ProgrammingLanguageTypeScript

[TypeScript] 고급 타입, 매핑된 타입, keyof/typeof

, , , , ,

이 글에서는 고급 타입, 매핑된 타입, 강력한 keyof/typeof 연산자를 살펴봅니다. TypeScript의 표현형 타이핑 시스템의 중추라고 할 수 있는 이러한 기능을 사용하면 정교하고 정확한 타입 정의를 생성하여 코드를 새로운 차원으로 끌어올릴 수 있습니다.

고급 타입

TypeScript에서 "advanced types"은 일반적으로 더 복잡한 타입 정의를 만들 수 있는 기능과 구성을 의미합니다. 고급 타입의 몇 가지 예로는 Union 타입, Intersection 타입, Conditional 타입, Mapped 타입 등이 있습니다.

Union Type

1
type MyUnion = string | number;

Union 타입은 여러 타입 중 하나가 될 수 있는 값을 설명합니다. 세로 막대(|)를 사용하여 각 타입을 구분하므로 string | number는 string 또는 number가 될 수 있는 값의 타입입니다.

Intersection Type

교차(Intersection) 타입은 여러 타입을 하나로 결합합니다. 이를 통해 기존 타입을 합쳐서 필요한 모든 기능을 갖춘 단일 타입을 얻을 수 있으므로 MyIntersection은 prop1과 prop2를 포함하는 객체를 기대하는 타입입니다.

1
type MyIntersection = { prop1: string } & { prop2: number };

Conditional Type

이 타입은 제네릭 매개변수를 받아 T가 string을 확장하는지 확인합니다. T가 string을 확장하면 타입은 "string type"으로 평가되고, 그렇지 않으면 "non-string type"으로 평가됩니다.

1
type MyConditional<T> = T extends string ? 'string type' : 'non-string type';

Mapped Type

Mapped 타입을 사용하면 기존 타입의 속성을 변환하여 새로운 타입을 만들 수 있습니다. 일반적인 구문은 다음과 같습니다.

1
2
3
type NewType<T> = {
  [P in keyof T]: SomeTransformation;
};

예시

1
2
3
type OptionalProps<T> = {
  [P in keyof T]?: T[P];
};

이 OptionalProps는 (?) 프로퍼티를 사용하여 T의 모든 프로퍼티를 옵션으로 만듭니다.

keyof

keyof는 객체 타입의 모든 키의 합집합 타입을 생성하는 타입스크립트 연산자입니다.

1
2
type MyKeys = keyof { name: string; age: number };
// MyKeys is "name" | "age"

typeof

typeof는 값, 변수 또는 표현식의 타입을 반환하는 연산자입니다. 종종 keyof와 함께 사용하여 타입의 키를 가져오는 데 사용됩니다.

1
2
3
4
const person = { name: 'John', age: 30 };

type PersonKeys = keyof typeof person;
// PersonKeys is "name" | "age"

이러한 개념은 종종 타입스크립트에서 강력하고 표현력이 풍부한 타입 정의를 만드는 데 함께 사용됩니다. 이를 통해 데이터를 모델링하고 코드에서 타입 안전을 강화할 수 있습니다.

Share