> TypeScript를 쓴다는 것은 단순히 변수 뒤에 `: string`을 붙이는 것이 아닙니다.<br>진정한 TypeScript의 힘은 **"타입 시스템을 프로그래밍"**할 때 나옵니다.<br>단순한 인터페이스 선언을 넘어, 조건부 타입, 맵드 타입, 템플릿 리터럴 타입을 활용하여 라이브러리 레벨의 정교한 타이핑을 하는 방법까지.<br>오늘은 10년 차 개발자도 헷갈려하는 **TypeScript의 심연(Abyss)**을 아주 깊고 길게 들여다보겠습니다.

![TypeScript Advanced](https://images.unsplash.com/photo-1516116216624-53e697fedbea?q=80&w=2128&auto=format&fit=crop)

# 1. 제네릭(Generics): 타입의 함수화

가장 기초적이지만 가장 강력한 도구입니다. 제네릭은 **"타입을 인자로 받는 함수"**라고 생각하면 이해가 빠릅니다.

### 🧬 기본 개념
```typescript
// T라는 타입 변수를 받아서 그대로 반환하는 타입 함수
type Identity<T> = T;

type StringIdentity = Identity<string>; // string
```

### 🧩 실전 응용: API 응답 래퍼
```typescript
interface ApiResponse<Data> {
  status: number;
  message: string;
  data: Data; // Data 타입은 나중에 정해진다
}

interface User { id: number; name: string; }

// 이제 User 타입이 쏙 들어간 응답 타입을 만들 수 있습니다.
function fetchUser(): Promise<ApiResponse<User>> { ... }
```

# 2. keyof & Mapped Types: 객체 타입을 마음대로 조작하기

기존 타입을 재활용해서 새로운 타입을 찍어내는(Map) 기술입니다.

### 🔑 keyof 연산자
객체 타입의 **키(Key)**들만 뽑아서 유니온 타입으로 만듭니다.
```typescript
interface User { id: number; name: string; age: number; }
type UserKeys = keyof User; // "id" | "name" | "age"
```

### 🗺️ Mapped Types (in)
`[K in Keys]` 문법을 사용해 객체의 모든 속성을 순회합니다.

```typescript
// 모든 속성을 Readonly로 만들기 (유틸리티 타입 Readonly<T>의 원리)
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K];
};

// 모든 속성을 Optional로 만들기 (Partial<T>의 원리)
type MyPartial<T> = {
  [K in keyof T]?: T[K];
};
```

# 3. Conditional Types: 타입 세계의 if문

`T extends U ? X : Y` 형태의 삼항 연산자를 사용하여 조건에 따라 타입을 분기합니다. **타입 체조의 시작점**입니다.

### 🚦 기본 문법
```typescript
type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false
```

### 🕵️‍♀️ infer: 타입 추론하기
조건부 타입 안에서 `infer` 키워드를 쓰면, TypeScript가 추론한 타입을 변수처럼 가져올 수 있습니다. 주로 **"안에 들어있는 타입 꺼내기"** 용도로 쓰입니다.

```typescript
// Promise<T>에서 T만 쏙 꺼내는 유틸리티 (Awaited<T>의 원리)
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type Result = UnwrapPromise<Promise<string>>; // string
```

# 4. Template Literal Types: 문자열 가지고 놀기

TypeScript 4.1부터 도입된 기능으로, 문자열 리터럴 타입을 템플릿 리터럴 문법으로 조합할 수 있습니다. CSS-in-JS 라이브러리나 이벤트 핸들러 타이핑에 혁명을 가져왔습니다.

### 🎨 색상 코드 조합하기
```typescript
type Color = "red" | "blue";
type Shade = "100" | "200" | "300";

// 자동으로 모든 조합이 생성됩니다!
type Palette = `${Color}-${Shade}`;
// "red-100" | "red-200" | "red-300" | "blue-100" ...
```

### 🛠 이벤트 핸들러 자동 생성
```typescript
type Entity = "User" | "Post";
type EventName = `on${Entity}Change`; // "onUserChange" | "onPostChange"

const handlers: Record<EventName, () => void> = {
  onUserChange: () => {},
  onPostChange: () => {},
  // onCommentChange: () => {} // 에러! 타입에 없음
};
```

# 5. 실전 예제: Type-safe `get` 함수 만들기

`lodash.get` 처럼 중첩된 객체의 값을 점(`.`) 표기법으로 가져오는 함수를 타입 안전하게 만들어 봅시다.

```typescript
// 재귀적 타입 정의 (Recursive Type Definitions)
type Path<T> = T extends object
  ? {
      [K in keyof T]: K extends string
        ? `${K}` | `${K}.${Path<T[K]>}` // 현재 키 | 현재 키.하위 키
        : never;
    }[keyof T]
  : never;

// 사용 예시
interface Config {
  server: {
    port: number;
    database: {
      host: string;
    };
  };
}

// P는 "server" | "server.port" | "server.database" | "server.database.host" 만 허용됨!
function get<T, P extends Path<T>>(obj: T, path: P) { ... }

const config: Config = { ... };
get(config, "server.database.host"); // OK
get(config, "server.db.password");   // Error: 타입에 없는 경로!
```
이 코드가 컴파일 타임에 경로 유효성을 검사해줍니다. 오타가 날 수가 없는 구조죠.

# 6. 공변성(Covariance)과 반공변성(Contravariance)

고급 사용자가 되기 위해 꼭 넘어야 할 산입니다. 타입 호환성에 관한 이야기입니다.

- **공변성**: `Cat`이 `Animal`의 서브타입이면, `List<Cat>`도 `List<Animal>`의 서브타입이다. (리턴 타입에서 적용)
- **반공변성**: 함수의 **매개변수**에서는 반대로 동작합니다. `Animal`을 받는 함수에 `Cat`을 받는 함수를 넣을 수 없습니다. (더 좁은 타입을 받는 함수는 더 넓은 타입을 받는 자리에 못 들어감)

이 원리를 모르면, 함수형 프로그래밍이나 복잡한 콜백 타입을 다룰 때 이해할 수 없는 에러를 마주하게 됩니다.

# 마치며
> 타입은 문서다

TypeScript를 잘 쓴다는 것은 **"런타임 에러를 컴파일 타임 에러로 옮겨오는 능력"**을 기르는 것입니다.

오늘 다룬 내용들이 어렵게 느껴질 수 있습니다. 하지만 이 개념들을 자유자재로 다루게 되면, 여러분의 코드는 그 자체로 **살아있는 문서**가 되고, 동료 개발자들에게 **최고의 생산성 도구**가 되어줄 것입니다.

이제 IDE의 자동완성(IntelliSense)이 여러분의 손끝에서 춤추게 만들어보세요! 💃🕺

TypeScript 마스터하기: 타입 체조(Type Gymnastics)부터 고급 패턴까지

댓글 0

사수에게 칭찬받는 TypeScript 핵심 패턴 5가지