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

> TypeScript 문법은 알지만 실무 코드에서 어떻게 써야 할지 막막하신가요?<br>"이거 `any` 써도 되나요?"라고 묻기 전에 잠깐만요!<br>실무에서 버그를 줄이고, 코드의 가독성을 높이며, "이 사람 TS 좀 치네?"라는 소리를 들을 수 있는 **핵심 패턴과 팁 5가지**를 엄선했습니다.

![TypeScript Tips](https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=2070&auto=format&fit=crop)

# 1. Exhaustiveness Checking (모든 케이스 처리 강제하기)

`switch` 문이나 `if-else` 분기에서 **"빠뜨린 케이스"가 있으면 컴파일 에러를 내는 기법**입니다. 상태 관리가 복잡한 프론트엔드 로직에서 필수입니다.

```typescript
type Shape = { kind: "circle" } | { kind: "square" };

function getArea(shape: Shape) {
  switch (shape.kind) {
    case "circle": return Math.PI * 2;
    case "square": return 100;
    default:
      // 만약 나중에 "triangle"이 추가되면 여기서 에러가 발생합니다!
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}
```
나중에 누군가 `Shape` 타입에 `triangle`을 추가하고 `switch` 문을 수정하지 않으면, 컴파일러가 빨간 줄을 긋고 알려줍니다. (유지보수의 신!)

# 2. Branded Types (같은 타입, 다른 의미 구분하기)

`string` 타입이지만 `UserId`와 `PostId`를 섞어 쓰면 안 될 때가 있습니다. 하지만 TypeScript는 구조적 타이핑(Structural Typing)이라 둘 다 그냥 `string`으로 취급하죠.
이때 **Branded Type(Nominal Typing 흉내내기)**을 씁니다.

```typescript
type Brand<K, T> = K & { __brand: T };

type UserId = Brand<string, "UserId">;
type PostId = Brand<string, "PostId">;

const userId = "user_123" as UserId;
const postId = "post_456" as PostId;

function deleteUser(id: UserId) { ... }

// ❌ 컴파일 에러! PostId는 UserId 자리에 들어갈 수 없습니다.
deleteUser(postId);
```
실수로 유저 ID 자리에 게시글 ID를 넣어서 DB를 날려버리는 사고를 원천 차단할 수 있습니다.

# 3. Discriminated Unions (구별된 유니온)

타입 좁히기(Type Narrowing)를 가장 우아하게 하는 방법입니다. 공통된 리터럴 속성(`type`, `kind` 등)을 두어 타입을 구분합니다.

```typescript
// ❌ 안 좋은 예: 모든 게 Optional
interface Response {
  status: "success" | "error";
  data?: User;
  error?: string;
}

// ✅ 좋은 예: 상태에 따라 확정된 타입
type Response = 
  | { status: "success"; data: User } // 성공이면 data는 무조건 있음
  | { status: "error"; error: string }; // 에러면 error 메시지가 무조건 있음

if (res.status === "success") {
  console.log(res.data.name); // ? 없이 접근 가능 (타입 좁혀짐)
}
```

# 4. as const (리터럴 추론)

객체나 배열을 **읽기 전용 리터럴 타입**으로 고정합니다. Redux 액션이나 설정 상수를 정의할 때 유용합니다.

```typescript
const routes = {
  HOME: "/",
  LOGIN: "/login",
} as const;

// type Route = "/" | "/login"
// string이 아니라 정확한 값으로 추론됩니다.
type Route = (typeof routes)[keyof typeof routes];

function navigate(path: Route) { ... }
```
`as const` 하나만 붙이면 `string`으로 퉁쳐지는 것을 막고 강력한 자동완성 효과를 얻을 수 있습니다.

# 5. Type Predicates (`is` 키워드)

`filter` 함수를 쓸 때 `undefined`를 걸러냈는데도 타입이 여전히 `undefined`를 포함하고 있어 답답했던 적 있으신가요?
**사용자 정의 타입 가드**를 쓰면 해결됩니다.

```typescript
const values = ["a", undefined, "b", null];

// ❌ 결과 타입: (string | undefined | null)[]
const badFilter = values.filter(v => v !== undefined && v !== null);

// ✅ Type Predicate 사용
function isString(val: any): val is string {
  return typeof val === "string";
}

// ⭕️ 결과 타입: string[]
const goodFilter = values.filter(isString);
```

# 마치며

TypeScript는 단순히 "에러를 잡아주는 도구"가 아니라, **"우리의 의도를 코드로 명확히 표현하는 언어"** 입니다.
오늘 소개한 패턴들을 코드에 하나씩 적용해 보세요. 코드가 훨씬 더 단단해지고, 동료들이 여러분의 코드를 믿고 사용할 수 있게 될 것입니다. 🚀

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

댓글 0

TypeScript 타입 에러

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