제네릭(Generics)이란?

타입을 마치 함수의 파라미터처럼 동적으로 지정할 수 있도록 해준다.

즉, 함수, 인터페이스, 클래스, 타입에서 여러 타입을 유연하게 처리할 수 있도록 도와주는 기능이다.

제네릭을 사용하면 타입안정성을 유지하면서도 재사용 가능한 코드를 작성할 수 있다!

제네릭 함수

function identity<T>(value: T): T {
  return value;
}

const string = identity("Hello");  // string 타입으로 자동 추론
const string = identity(10); // number 타입으로 자동 추론

<T>를 통해 타입을 외부에서 결정할 수 있도록 하고, 매개 변수의 타입을 호출 시점에 결정한다.

아래와 같은 경우엔 기본타입을 지정한 코드이다.

function identity<T = string>(value: T): T {
  return value;
}

const string = identity(); // 기본값 string
const number = identity<number>(10) // 명시적 설정

제네릭 인터페이스

interface Box<T> {
  value: T;
}

const stringBox: Box<string> = { value: "Square" };
const numberBox: Box<number> = { value: 30 };

console.log(stringBox.value.toUpperCase()); // "SQUARE"
console.log(numberBox.value.toFixed(2)); // "30.00"

제네릭 클래스

class Stack<T> {
	private items: T[] = [];
	
	push(item: T){
		this.items.push(item);
	}
	pop(): T | undefined {
		return this.items.pop();
	}
}

const numberStack = new Stack<number>();
numberStack.push(1)
numberStack.push(2)

console.log(numberStack.pop()); // 2
console.log(numberStack.pop()); // 1

제네릭 제약 조건

function printLength<T extends { length: number }>(value: T): void {
  console.log(value.length);
}

printLength("GetLength"); // ✅ 9
printLength([1, 2, 3]); // ✅ 3
// printLength(123); // ❌ 오류 (number에는 length가 없음)

이렇게 작성하면 타입에 대한 강제는 아니지만 length 에 대해 동작하는 인자만 넘겨받을 수 있게 된다.

function getProperty<T, O extends keyof T>(obj: T, key: O) {
  return obj[key];  
}
let obj = { a: 1, b: 2, c: 3 };

getProperty(obj, "a"); // okay
getProperty(obj, "z"); // error: "z"는 "a", "b", "c" 속성에 해당하지 않습니다.

function pair<K, V>(key: K, value: V): [K, V] {
  return [key, value];
}

const result = pair("id", 123); // ["id", 123]

객체를 비교하거나 키-값 쌍을 표현할 때도 제네릭 제약 조건을 사용할 수 있다.

📚 제네릭 활용 예시