Typescript

알아두면 유용할 Typescript 기능들

작성: 수정:
#TypeScript

타입스크립트에는 정말 유용한 기능들이 많이 있는데요, 이번에 알게 된 신기한 3가지 기능을 가져와 봤습니다.

1. Template Literal Types

Template Literal Types를 사용하여 String Literal Type을 기반으로 새로운 타입을 만들 수 있습니다.

type Size = 'width' | 'height'
type Limit = 'min' | 'max'

type SizeLimit = `${Limit}-${Size}`
// type SizeLimit = "min-width" | "min-height" | "max-width" | "max-height

Capitalize, Uppercase, Lowercase를 조합하면 더 유용하게 사용할 수 있습니다.

type User = 'name' | 'age'
type SetUser = `set${Capitalize<User>}`
// type SetUser = "setName" | "setAge"

2. Mapped Types

Mapped Types를 사용하면 타입을 순회하여 새 타입으로 변환해 줄 수 있습니다.

as 키워드를 통해 key도 바꿔줄 수 있습니다.

interface User {
    name: string
    age: number
}

type Set<T> = {
    [K in keyof T as `sett${Capitalize<K & string>}`]: () => T[K]
}

type SetUser = Set<User>
/*
type SetUser = {
    settName: () => string;
    settAge: () => number;
}
*/

3. Conditional Types

Conditional Types를 사용하면 조건에 따라 다른 타입을 반환시켜 줄 수 있습니다.

type IsString<T> = T extends string ? "YES" : "NO"

type Result1 = IsString<"hello">  // "YES"
type Result2 = IsString<123>      // "NO"

마무리

개인적으로 정말 놀라움을 금치 못할 기능의 발견이었습니다.

한 번쯤 유용하게 사용해 보는 것을 추천해 드립니다.

댓글