[TypeScript] 제네릭

📍 제네릭

generic : 일반적인, 포괄적인

✅ 하나의 함수에 다양한 타입의 값을 넣고 싶을 경우

1️⃣ any

• 모든 타입을 허용하며, 타입 검사를 하지 않는다.
• 예기치 않은 런타임 오류가 발생할 수 있다.

function func(value: any) {
  return value;
}

let num = func(10);
num.toUpperCase(); // ❌ 컴파일 오류 없음 → 런타임 오류 발생 가능
num.toFixed(); // 정상 실행됨

let bool = func(true);
let str = func("string");

2️⃣ unknown

• any와 유사하게 모든 타입을 허용하지만, 타입 검사를 강제한다.
• 안전성을 높인 any의 대안

function func(value: unknown) {
  return value;
}

let num = func(10);
num.toUpperCase(); // ❌ 'num' is of type 'unknown'
num.toFixed();     // ❌ 'num' is of type 'unknown'

// 타입 좁히기 후 안전하게 접근 가능
if (typeof num === "number") {
  num.toFixed(); // ✅
}

3️⃣ 제네릭 함수

• 여러 타입을 포괄적으로 처리할 수 있는 범용 함수
• <T>: 타입 변수(Type Variable, 타입을 저장하는 변수)
• 타입은 함수 호출 시 자동 추론되거나 명시적으로 지정 가능

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

// 타입 추론
let num = func(10);         // num: number
let bool = func(true);      // bool: boolean
let str = func("string");   // str: string

let arr = func([1, 2, 3]); // arr: number[]

// 튜플로 타입 단언
let arr = func([1, 2, 3] as [number, number, number]); // arr: [number, number, number]

// 제네릭에 명시적으로 타입 지정
let arr = func<[number, number, number]>([1, 2, 3]); // arr: [number, number, number]

4️⃣ 제네릭 타입 변수 여러 개 사용

function swap<T, U>(a: T, b: U): [U, T] {
  return [b, a];
}

const result = swap("hello", 42); // [42, "hello"]

5️⃣ 제네릭 인터페이스/타입에 적용

interface ApiResponse<T> {
  data: T;
  success: boolean;
}

const response: ApiResponse<string> = {
  data: "Hello",
  success: true,
};

6️⃣ 제네릭을 화살표 함수에 사용

const func = <T>(value: T): T => {
  return value;
};

• 💡참고 : JSX 문법과 충돌하지 않도록 화살표 함수에서 제네릭을 쓸 땐 const로 선언하는 것을 권장