Generic 타입과 Interface

"Generic 타입은 slot 가진 재사용 가능 모양 — 데이터 구조의 template 같은."

Generic interface 와 type alias

`interface` 와 `type` 둘 다 타입 parameter 가질 수. interface Box<T> { value: T } 가 어떤 타입이든 wrap 하는 Box 정의. type Pair<T> = [T, T] 가 균일 쌍 정의. Slot 이 generic instantiate 될 때 채워: `Box` 이 `{ value: string }`; `Pair` 가 `[number, number]`.

Generic 타입이 standard library 가 Array, Map, Set, Promise, ReturnType, Awaited, 그 외 수십 개 표현하는 법. `Array` 읽을 수 있게 되면, 거의 어떤 library 의 타입 정의든 읽을 수 있어.

여러 parameter

interface Pair<A, B> { first: A; second: B }. type Map<K, V> = .... 2개 slot, 독립적으로 사용. Compiler 가 값에서 generic instantiate 될 때 추론.

Generic 타입이 빛나는 곳

Container 모양: Result<T, E> = { ok: true; value: T } | { ok: false; error: E }.
반복 구조: PaginatedResponse<T> = { items: T[]; nextCursor: string | null }.
고차 모양: Reducer<S, A> = (state: S, action: A) => S.
Library API 타입: EventHandler<E extends Event> = (e: E) => void.

한 필드만 바뀌는 거의-동일 타입 정의하고 있으면, 그 필드가 slot. Generic parameter 로 들어올리고 중복 무너짐.

Code

Generic 모양 — Box 와 Result·typescript

// Generic interface — Box 가 뭐든 wrap.
interface Box<T> {
  value: T;
  describe(): string;
}

const boxStr: Box<string> = {
  value: 'hi',
  describe() { return `Box(${this.value})` },
};
const boxNum: Box<number> = {
  value: 42,
  describe() { return `Box(${this.value})` },
};

// Generic type alias — 실패 가능 연산용 Result.
type Result<T, E = Error> =
  | { ok: true; value: T }
  | { ok: false; error: E };

function parseNumber(s: string): Result<number> {
  const n = Number(s);
  return Number.isNaN(n)
    ? { ok: false, error: new Error('not a number') }
    : { ok: true, value: n };
}

Exercise

items: T[], total: number, nextCursor: string | null 가진 PaginatedResponse<T> 타입 정의. 그다음 fetchUsers(): Promise<PaginatedResponse<User>> signature 써. Type system 이 그걸 users 의 paginated 응답으로 다루는지 확인.

Hint

Generic 타입이 다른 generic 과 자연스럽게 compose. Promise<PaginatedResponse<User>> 는 그냥 Promise 의 slot 에 PaginatedResponse<User> substitute.

Generic interface 와 type alias

여러 parameter

Generic 타입이 빛나는 곳

Code

External links

Exercise

Progress

댓글 0