TypeScript 제네릭 | Generics 완벽 가이드
이 글의 핵심
TypeScript 제네릭에 대한 실전 가이드입니다. Generics 완벽 가이드 등을 예제와 함께 상세히 설명합니다.
들어가며
제네릭이란?
제네릭(Generics)은 타입을 매개변수처럼 넘겨 같은 뼈대로 여러 종류의 값을 안전하게 다루는 기능입니다.
비유(틀): 과자를 찍는 틀은 하나인데, 반죽만 바꿔 초콜릿·쿠키를 모두 찍을 수 있습니다. 제네릭은 함수·클래스에 형태만 맞는 틀을 끼우고, 구체적인 타입은 호출하는 쪽에서 넣는 방식입니다.
1. 제네릭 기본
문제 상황
다양한 타입을 받아야 하는 함수를 만들 때 any를 사용하면 타입 안정성을 잃습니다:
// any 사용 (타입 안정성 상실)
function identity(value: any): any {
return value;
}
const result1 = identity("hello"); // any 타입
const result2 = identity(123); // any 타입
// 문제점:
// 1. 반환 타입이 any라서 타입 체크가 안 됨
// 2. result1.toFixed()를 호출해도 컴파일 에러가 안 남 (런타임 에러 발생)
// 3. 입력 타입과 출력 타입의 관계를 표현할 수 없음제네릭 해결
제네릭을 사용하면 타입 안정성을 유지하면서 재사용 가능한 코드를 작성할 수 있습니다:
// 제네릭 사용
// <T>: 타입 매개변수 선언 (T는 관례적 이름, Type의 약자)
// value: T: 매개변수 타입이 T
// : T: 반환 타입이 T (입력과 같은 타입)
function identity<T>(value: T): T {
return value;
}
// 명시적 타입 지정
const result1 = identity<string>("hello"); // string 타입
const result2 = identity<number>(123); // number 타입
// 타입 추론 (권장)
// TypeScript가 전달된 값을 보고 T를 자동으로 추론
const result3 = identity("hello"); // T = string으로 추론
const result4 = identity(123); // T = number로 추론
// 이제 타입 안정성 확보
// result3.toUpperCase(); // ✅ OK - string 메서드
// result3.toFixed(); // ❌ 컴파일 에러 - string에는 toFixed 없음
// result4.toFixed(2); // ✅ OK - number 메서드제네릭의 장점:
- 타입 안정성: 컴파일 타임에 타입 체크
- 재사용성: 하나의 함수로 모든 타입 처리
- 가독성: 타입 관계를 명확히 표현
- 자동 완성: IDE가 정확한 메서드 제안
제네릭 vs any:
| 특성 | 제네릭 (<T>) | any |
|---|---|---|
| 타입 안정성 | ✅ 유지 | ❌ 상실 |
| 타입 추론 | ✅ 가능 | ❌ 불가 |
| 자동 완성 | ✅ 정확 | ❌ 없음 |
| 런타임 에러 | ✅ 방지 | ❌ 발생 가능 |
2. 함수 제네릭
기본 사용
function getFirstElement<T>(arr: T[]): T | undefined {
return arr[0];
}
const numbers = [1, 2, 3];
const first = getFirstElement(numbers); // number | undefined
const strings = ["a", "b", "c"];
const firstStr = getFirstElement(strings); // string | undefined여러 타입 매개변수
function pair<T, U>(first: T, second: U): [T, U] {
return [first, second];
}
const result1 = pair("hello", 123); // [string, number]
const result2 = pair(true, "world"); // [boolean, string]화살표 함수
const map = <T, U>(arr: T[], fn: (item: T) => U): U[] => {
return arr.map(fn);
};
const numbers = [1, 2, 3];
const doubled = map(numbers, (n) => n * 2); // number[]
const strings = map(numbers, (n) => n.toString()); // string[]3. 인터페이스 제네릭
기본 사용
interface Box<T> {
value: T;
}
const numberBox: Box<number> = { value: 123 };
const stringBox: Box<string> = { value: "hello" };
// 중첩 제네릭
const boxOfBoxes: Box<Box<number>> = {
value: { value: 123 }
};실전 예제: API 응답
interface ApiResponse<T> {
success: boolean;
data: T;
error?: string;
}
interface User {
id: string;
name: string;
email: string;
}
interface Product {
id: string;
name: string;
price: number;
}
const userResponse: ApiResponse<User> = {
success: true,
data: {
id: "U001",
name: "홍길동",
email: "[email protected]"
}
};
const productResponse: ApiResponse<Product[]> = {
success: true,
data: [
{ id: "P001", name: "노트북", price: 1000000 },
{ id: "P002", name: "마우스", price: 30000 }
]
};4. 클래스 제네릭
기본 사용
제네릭 클래스를 사용하면 다양한 타입에서 동작하는 자료구조를 만들 수 있습니다:
// Stack<T>: T 타입의 요소를 저장하는 스택 클래스
class Stack<T> {
// private items: 외부에서 직접 접근 불가
// T[]: T 타입의 배열
private items: T[] = [];
// push: 스택에 요소 추가 (LIFO - Last In First Out)
push(item: T): void {
// item의 타입은 T로 제한됨
// numberStack이면 number만, stringStack이면 string만 추가 가능
this.items.push(item);
}
// pop: 스택에서 마지막 요소 제거 및 반환
// 반환 타입: T | undefined (스택이 비어있으면 undefined)
pop(): T | undefined {
return this.items.pop();
}
// peek: 마지막 요소 확인 (제거하지 않음)
peek(): T | undefined {
return this.items[this.items.length - 1];
}
// isEmpty: 스택이 비어있는지 확인
isEmpty(): boolean {
return this.items.length === 0;
}
// size: 스택의 크기 반환
size(): number {
return this.items.length;
}
}
// 사용: number 타입 스택
const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
numberStack.push(3);
console.log(numberStack.pop()); // 3 (마지막에 추가된 것)
console.log(numberStack.peek()); // 2 (제거하지 않고 확인)
// numberStack.push("hello"); // ❌ 컴파일 에러: string은 number가 아님
// 사용: string 타입 스택
const stringStack = new Stack<string>();
stringStack.push("hello");
stringStack.push("world");
console.log(stringStack.pop()); // world
// stringStack.push(123); // ❌ 컴파일 에러: number는 string이 아님제네릭 클래스의 장점:
- 하나의 클래스로 모든 타입 지원
- 타입별로 별도 클래스를 만들 필요 없음
- 타입 안정성 유지 (잘못된 타입 추가 방지)
- 코드 재사용성 극대화
실제 사용 예시:
// 같은 Stack 클래스로 다양한 타입 처리
const taskStack = new Stack<Task>(); // Task 객체 스택
const undoStack = new Stack<Action>(); // Action 객체 스택
const historyStack = new Stack<string>(); // 문자열 스택5. 제네릭 제약 조건
extends
// 특정 프로퍼티를 가진 타입만 허용
interface Lengthwise {
length: number;
}
function logLength<T extends Lengthwise>(value: T): void {
console.log(value.length);
}
logLength("hello"); // ✅ 5
logLength([1, 2, 3]); // ✅ 3
// logLength(123); // ❌ 에러: number에는 length 없음keyof
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
const user = {
name: "홍길동",
age: 25,
email: "[email protected]"
};
const name = getProperty(user, "name"); // string
const age = getProperty(user, "age"); // number
// const invalid = getProperty(user, "invalid"); // ❌ 에러6. 실전 예제
예제 1: 배열 유틸리티
function chunk<T>(arr: T[], size: number): T[][] {
const result: T[][] = [];
for (let i = 0; i < arr.length; i += size) {
result.push(arr.slice(i, i + size));
}
return result;
}
const numbers = [1, 2, 3, 4, 5, 6];
console.log(chunk(numbers, 2)); // [[1, 2], [3, 4], [5, 6]]
const strings = ["a", "b", "c", "d"];
console.log(chunk(strings, 3)); // [["a", "b", "c"], ["d"]]예제 2: 캐시 시스템
class Cache<K, V> {
private store = new Map<K, V>();
set(key: K, value: V): void {
this.store.set(key, value);
}
get(key: K): V | undefined {
return this.store.get(key);
}
has(key: K): boolean {
return this.store.has(key);
}
delete(key: K): boolean {
return this.store.delete(key);
}
clear(): void {
this.store.clear();
}
}
// 사용
const userCache = new Cache<string, User>();
userCache.set("U001", { id: "U001", name: "홍길동", email: "[email protected]" });
const user = userCache.get("U001");
console.log(user?.name); // 홍길동예제 3: Promise 래퍼
class AsyncResult<T> {
constructor(private promise: Promise<T>) {}
async map<U>(fn: (value: T) => U): Promise<AsyncResult<U>> {
const value = await this.promise;
return new AsyncResult(Promise.resolve(fn(value)));
}
async flatMap<U>(fn: (value: T) => Promise<U>): Promise<AsyncResult<U>> {
const value = await this.promise;
return new AsyncResult(fn(value));
}
async unwrap(): Promise<T> {
return await this.promise;
}
}
// 사용
const result = new AsyncResult(Promise.resolve(10));
result
.map((x) => x * 2)
.then((r) => r.unwrap())
.then((value) => console.log(value)); // 207. 고급 패턴
조건부 타입
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false매핑 타입
type Readonly<T> = {
readonly [K in keyof T]: T[K];
};
interface User {
name: string;
age: number;
}
type ReadonlyUser = Readonly<User>;
// { readonly name: string; readonly age: number; }8. 자주 하는 실수
실수 1: 제네릭 제약 없이 프로퍼티 접근
// ❌ 잘못된 사용
function getLength<T>(value: T): number {
return value.length; // 에러: T에 length가 있다는 보장 없음
}
// ✅ 올바른 사용
function getLength<T extends { length: number }>(value: T): number {
return value.length;
}실수 2: 불필요한 제네릭
// ❌ 불필요한 제네릭
function log<T>(message: string): void {
console.log(message);
}
// ✅ 제네릭 제거
function log(message: string): void {
console.log(message);
}정리
핵심 요약
- 제네릭: 타입을 매개변수화
- 함수:
function fn<T>(value: T): T - 인터페이스:
interface Box<T> - 클래스:
class Stack<T> - 제약:
<T extends Type> - keyof: 객체 키 타입
다음 단계
- TypeScript 유틸리티 타입
- TypeScript 데코레이터
- TypeScript 고급 패턴
관련 글
- C++ 템플릿 |
- TypeScript 고급 타입 | Union, Intersection, Literal 타입
- TypeScript 인터페이스 | Interface 완벽 가이드
- C++ numeric_limits |
- C++ Union과 Variant |