> TypeScript를 쓴다는 것은 단순히 변수 뒤에 `: string`을 붙이는 것이 아닙니다. 진정한 TypeScript의 힘은 **"타입 시스템을 프로그래밍"**할 때 나옵니다. 단순한 인터페이스 선언을 넘어, 조건부 타입, 맵드 타입, 템플릿 리터럴 타입을 활용하여 라이브러리 레벨의 정교한 타이핑을 하는 방법까지. 오늘은 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)부터 고급 패턴까지

> TypeScript 문법은 알지만 실무 코드에서 어떻게 써야 할지 막막하신가요? "이거 `any` 써도 되나요?"라고 묻기 전에 잠깐만요! 실무에서 버그를 줄이고, 코드의 가독성을 높이며, "이 사람 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가지

![typescript](https://librarian-blog-images.s3.ap-northeast-2.amazonaws.com/e8c1cc3c-8aa3-42f8-9382-60df0d5c2cee_typescript.jpeg)

# react-native와 typescript로 공부를 하다 진짜 너무 황당한 에러를 맞딱뜨렸다..
>'string | null' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없습니다. 'null' 형식은 'string' 형식에 할당할 수 없습니다.

---

# 무슨 내용의 에러인가
## 1. 우선 코드를 살펴보자
```typescript
const key = 'todos';
const rawTodos = await AsyncStorage.getItem(key);
const savedTodos: ITodos[] = JSON.parse(rawTodos);
```
1. AsyncStorage에 있는 todos라는 key로 Object Value를 가져와서 rawTodos 변수에 저장한다.
2. rawTodos에 저장되어있는 Object를 JSON.parse를 통해 파싱을 해서 savedTodos 변수에 저장한다.
3. 이때 JSON.parse(rawTodos)에서 rawTodos에 빨간색 밑줄이 생기면서 위의 에러를 떨군다

## 2. 무엇이 문제인가
해당 코드의 에러는 typescript에서 발생해서 타입이 맞지않는다는 에러인데 rawTodos에
const rawTodos: string | null
으로 type을 지정해줘도 위의 에러는 사라지지않았다

---

# 해결방법
정말 온갖 생쇼를 하다가 정말 간단하게 해결했다
## 1. 해결방법1
```typescript
const key = 'todos';
const rawTodos = await AsyncStorage.getItem(key);
if (!rawTodos) {
 throw new Error('No saved todos');
}
const savedTodos: ITodos[] = JSON.parse(rawTodos);
```
위의 코드처럼 rawTodos가 없을때 즉 null일 경우 처리해준다

## 2. 해결방법2
tsconfig.json에서 
strictNullChecks: false 
로 설정해준다 
typescript로 개발하다보면 현재의 경우처럼 빡세게 null 체크를 할 때가있는데 이걸 false로 해주면 좀 널널하게 바꿔준다는것 같다

---

# 마무리
typescript를 공부하는 중이라 정말 여러가지 난관에 부딪히는거 같다
특히 저런 에러는 구글링을해도 잘 못찾겠더라
typescript를 잘다루기까지의 난관이 너무 험난하다...

typescript

모든 포스트

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

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

TypeScript 타입 에러

인기 태그