TypeScript 제네릭 단독 정복기: 타입 파라미터부터 extends·keyof까지

// 받은 값을 그대로 돌려주는 함수. 타입을 any로 대충 막았다.
function identity(value: any): any {
  return value;
}
 
// number를 넣었다.
const price = identity(1000);
// 하지만 price의 타입은 number가 아니라 any다.
 
// any라서 아래 코드가 컴파일 에러 없이 통과한다.
price.toUpperCase(); // number에는 없는 메서드인데 컴파일러가 막지 않는다
// 런타임에 TypeError: price.toUpperCase is not a function

// <T>는 "타입 빈칸"을 하나 선언하겠다는 뜻이다.
// 인자 타입과 반환 타입을 같은 T로 묶었다.
function identity<T>(value: T): T {
  return value;
}
 
// number를 넣으면 T가 number로 채워진다.
const price = identity(1000);
// price: number  (any가 아니다!)
 
// string을 넣으면 같은 함수인데 T가 string으로 채워진다.
const name = identity('claude');
// name: string
 
// 이제는 잘못된 호출을 컴파일러가 막아준다.
price.toUpperCase();
// Property 'toUpperCase' does not exist on type 'number'.

// 배열의 첫 요소를 돌려주는 함수.
// 요소 타입을 모르므로 T로 비워둔다.
function first<T>(items: T[]): T | undefined {
  // 빈 배열이면 undefined가 나올 수 있으므로 반환 타입에 명시했다.
  return items[0];
}
 
// number[]를 넣으면 T가 number로 추론된다.
const n = first([1, 2, 3]);
// n: number | undefined
 
// string[]를 넣으면 T가 string으로 추론된다.
const s = first(['a', 'b']);
// s: string | undefined
 
// 추론이 애매하면 <>로 직접 채워 넣을 수도 있다.
const empty = first<boolean>([]);
// empty: boolean | undefined

// 응답의 공통 구조는 고정하고, data에 담길 타입만 T로 비워둔다.
interface ApiResponse<T> {
  status: number; // 어떤 응답이든 동일
  message: string; // 어떤 응답이든 동일
  data: T; // 응답마다 달라지는 부분
}
 
interface User {
  id: number;
  name: string;
}
 
// 사용할 때 빈칸을 User로 채운다.
const userRes: ApiResponse<User> = {
  status: 200,
  message: 'ok',
  data: { id: 1, name: 'claude' },
};
 
// userRes.data는 User로 좁혀져 있다.
userRes.data.name; // string
 
// 같은 틀을 User[]로 채우면 목록 응답이 된다.
const listRes: ApiResponse<User[]> = {
  status: 200,
  message: 'ok',
  data: [{ id: 1, name: 'claude' }],
};

// 어떤 타입이든 담을 수 있는 스택. 담길 타입을 T로 비워둔다.
class Stack<T> {
  private items: T[] = [];
 
  push(item: T): void {
    this.items.push(item);
  }
 
  // 비어 있을 수 있으므로 T | undefined를 돌려준다.
  pop(): T | undefined {
    return this.items.pop();
  }
}
 
// 인스턴스를 만들 때 T를 number로 채운다.
const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
const popped = numberStack.pop();
// popped: number | undefined
 
numberStack.push('3');
// Argument of type 'string' is not assignable to parameter of type 'number'.

// T는 length: number를 가진 타입이어야 한다는 제약을 걸었다.
function logLength<T extends { length: number }>(value: T): T {
  // 제약 덕분에 value.length 접근이 안전하다.
  console.log(value.length);
  return value;
}
 
logLength('hello'); // OK - string에는 length가 있다
logLength([1, 2, 3]); // OK - 배열에도 length가 있다
logLength({ length: 10, name: 'box' }); // OK - length를 가진 객체
 
logLength(42);
// Argument of type 'number' is not assignable to
// parameter of type '{ length: number; }'.
// number에는 length가 없으므로 막힌다.

interface User {
  id: number;
  name: string;
  active: boolean;
}
 
// keyof User는 'id' | 'name' | 'active' 라는 유니온 타입이다.
type UserKey = keyof User;
// UserKey: 'id' | 'name' | 'active'

// any로 막은 버전. 키가 진짜 있는지도, 값 타입도 알 수 없다.
function getValueBad(obj: any, key: string): any {
  return obj[key];
}
 
const user = { id: 1, name: 'claude', active: true };
 
const name = getValueBad(user, 'name');
// name: any  (string이라는 정보가 사라졌다)
 
const typo = getValueBad(user, 'nmae');
// 오타지만 컴파일러가 막지 못한다. 런타임에 undefined가 나온다.

// T: 객체 타입 (빈칸)
// K: 그 객체의 키 중 하나여야 한다는 제약 (K extends keyof T)
function getValue<T, K extends keyof T>(obj: T, key: K): T[K] {
  // T[K]는 "T에서 K 키에 해당하는 값의 타입"이다. (인덱스드 액세스 타입)
  return obj[key];
}
 
const user = { id: 1, name: 'claude', active: true };
 
const name = getValue(user, 'name');
// name: string  (정확한 타입으로 추론된다)
 
const id = getValue(user, 'id');
// id: number
 
const active = getValue(user, 'active');
// active: boolean
 
// 존재하지 않는 키는 컴파일 타임에 막힌다.
const typo = getValue(user, 'nmae');
// Argument of type '"nmae"' is not assignable to
// parameter of type '"name" | "id" | "active"'.

// PropertyKey는 string | number | symbol을 가리키는 내장 타입이다.
// 그룹 이름(객체 키)으로 쓸 수 있는 값만 허용하기 위한 제약이다.
function groupBy<T, K extends keyof T>(
  items: T[],
  key: K,
): T[K] extends PropertyKey ? Record<T[K], T[]> : never {
  // 결과를 담을 객체. 아래에서 한 칸씩 채운다.
  const result = {} as Record<PropertyKey, T[]>;
 
  for (const item of items) {
    // item[key]의 타입은 T[K]. 이 값을 그룹 이름으로 쓴다.
    const groupName = item[key] as PropertyKey;
 
    // 해당 그룹이 처음이면 빈 배열을 만든다. (옵셔널 체이닝 대신 명시적 초기화)
    const bucket = result[groupName] ?? [];
    bucket.push(item);
    result[groupName] = bucket;
  }
 
  // 위에서 정의한 조건부 반환 타입에 맞춰 단언 없이 돌려준다.
  return result as T[K] extends PropertyKey ? Record<T[K], T[]> : never;
}

interface LogEntry {
  level: 'info' | 'warn' | 'error';
  message: string;
}
 
const logs: LogEntry[] = [
  { level: 'info', message: '서버 시작' },
  { level: 'error', message: 'DB 연결 실패' },
  { level: 'info', message: '요청 처리' },
  { level: 'warn', message: '응답 지연' },
];
 
// level 기준으로 묶는다.
const byLevel = groupBy(logs, 'level');
// byLevel: Record<'info' | 'warn' | 'error', LogEntry[]>
// 키가 정확히 세 레벨로 추론된다.
 
byLevel.info.length; // 2  - info 로그 두 개
byLevel.error[0].message; // 'DB 연결 실패' - 요소가 LogEntry로 추론된다
 
// 없는 키로 묶으려 하면 컴파일 타임에 막힌다.
const wrong = groupBy(logs, 'severity');
// Argument of type '"severity"' is not assignable to
// parameter of type 'keyof LogEntry'.