본문 바로가기
C.W.K.
Stream
Lesson 01 of 07 · published

왜 제네릭인가: 타입 사이의 관계를 잃지 않기

~10 min · generics, intro, type-parameters

Level 0Curious
0 XP0/93 lessons0/23 achievements
0/100 XP to next level100 XP to go0% complete
"제네릭은 아직 정하지 않은 타입을 위한 빈칸이 아니라, 입력과 출력이 같은 타입이라는 관계를 보존하는 장치야."

중복과 any 사이의 세 번째 길

배열의 첫 원소를 돌려주는 함수를 타입마다 따로 만들면 구현이 반복돼. 모든 배열을 any[]로 받으면 함수는 하나지만 반환 타입 정보가 사라져. 제네릭은 구현 하나를 유지하면서 호출마다 실제 원소 타입을 붙잡아 두 문제를 함께 푼다.

function first<T>(items: T[]): T에서 T는 호출 시점에 정해져. 숫자 배열을 넣으면 T는 number, 문자열 배열이면 string이야. 반환 타입에도 같은 T가 쓰였으므로 입력에서 얻은 정보가 출력까지 이어진다.

Array와 Promise도 같은 원리

Array<T>, Promise<T>, Map<K, V>는 특별한 내장 마법이 아니라 타입 매개변수를 가진 제네릭 타입이야. 빈칸에 어떤 타입을 넣느냐에 따라 같은 구조가 다른 값의 계약이 된다.

이 관점을 잡으면 라이브러리 타입이 덜 낯설어져. 꺾쇠괄호 안의 타입이 어느 위치에 나타나고 어떤 관계를 이어 주는지 추적하면 돼.

타입 슬롯 하나로 관계를 보존해

제네릭이 없다면 배열의 첫 원소를 얻기 위해 firstString, firstNumber, firstUser를 복제하거나 any를 써야 해. first<T>(arr: T[]): T의 T는 호출자가 채우는 슬롯이라 숫자 배열에서는 number, 문자열 배열에서는 string이 입력부터 반환까지 이어져. Array<T>도 같은 원리의 객체 타입이고 Array<string>string[]과 같아.

제네릭의 핵심은 재사용보다 관계 보존이야. 같은 T가 어디에서 들어와 어디로 흘러가는지 읽어.

Code

Generic 기본 — slot, 채움, 관계·typescript
// Generic 없이 — 타입 잃음.
function firstLoose(arr: any[]): any {
  return arr[0];
}
const a = firstLoose([1, 2, 3]);   // a: any — 도움 없음

// Generic 과 함께 — 관계 보존.
function first<T>(arr: T[]): T {
  return arr[0];
}
const b = first([1, 2, 3]);        // b: number — 추론
const c = first(['a', 'b']);       // c: string
const d = first<boolean>([true]);  // d: boolean — 명시

// identity — 교과서 generic.
function identity<T>(x: T): T { return x }
const e = identity(42);            // e: number
const f = identity('hi');          // f: string

External links

Exercise

튜플 [T, U]를 받아 [U, T]를 반환하는 제네릭 swap 함수를 작성해. swap([1, 'two'])swap([true, { x: 1 }])를 호출해 두 타입 매개변수가 입력에서 추론되고 반환 위치까지 보존되는지 확인해.
Hint
function swap<T, U>(p: [T, U]): [U, T] { return [p[1], p[0]] }처럼 두 슬롯을 선언해. 입력 튜플에서 T와 U가 추론되고 반환 튜플에서는 순서만 바뀌어.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.