본문 바로가기
FrontEnd/TypeScript

아직도 이거 모르니? Typescript 조건부 타입정의 Infer 예시와 함께 알아보기!

by Fathory 2023. 6. 23.
title

소개

Typescript는 자바스크립트에 정적 타입을 추가하는 강력한 슈퍼셋입니다. 이는 개발자들이 타입을 정의하고 강제할 수 있어서 오류를 조기에 발견하고 코드 품질을 향상시킬 수 있습니다. Typescript의 주요 기능 중 하나는 조건부 타입정의를 지원하는 것인데, 이를 통해 특정 조건에 따라 타입을 생성할 수 있습니다.

1. 조건부 타입이란?

Typescript의 조건부 타입은 조건에 따라 타입을 정의할 수 있는 기능입니다. 이는 infer 키워드를 사용하여 제네릭 파라미터의 타입을 추론할 수 있습니다.

2. 기본 문법

Typescript에서 조건부 타입을 정의하는 기본 문법은 다음과 같습니다:

type MyConditionalType<T> = T extends U ? X : Y;

이 문법에서 T는 제네릭 파라미터, U는 타입, 그리고 XY는 조건에 따라 타입이 결정되는 타입입니다.

3. 예시: 타입 필터링

조건부 타입의 일반적인 사용 사례 중 하나는 조건에 따라 타입을 필터링하는 것입니다. 예를 들어, 특정 속성을 가진 객체들을 필터링하고 싶다고 가정해봅시다. 조건부 타입을 사용하여 이를 구현할 수 있습니다:

type FilteredObjects<T, K> = T extends { [P in keyof T]: K } ? T : never;

이 예시에서 T는 배열의 타입이고, K는 필터링할 속성의 타입입니다. 조건부 타입은 배열의 각 요소가 타입 K의 속성을 가지는지 확인합니다. 속성을 가지면 결과 타입에 포함되고, 그렇지 않으면 제외됩니다.

4. 예시: 타입 매핑

조건부 타입의 다른 사용 사례는 조건에 따라 타입을 매핑하는 것입니다. 예를 들어, 문자열 리터럴의 유니온 타입이 있고, 각 문자열 리터럴에 해당하는 타입을 생성하고 싶다고 가정해봅시다. 조건부 타입을 사용하여 이를 구현할 수 있습니다:

type MappedTypes<T> = T extends 'A' ? TypeA : T extends 'B' ? TypeB : TypeC;

이 예시에서 T는 문자열 리터럴의 유니온 타입이고, TypeA, TypeB, TypeC는 각 문자열 리터럴에 해당하는 타입입니다. 조건부 타입은 유니온의 각 문자열 리터럴을 확인하고 해당하는 타입으로 매핑합니다.

5. 예시: 타입 추론

조건부 타입의 infer 키워드를 사용하면 조건에 따라 제네릭 파라미터의 타입을 추론할 수 있습니다. 배열을 입력받아 첫 번째 요소를 반환하는 함수가 있다고 가정해봅시다. 조건부 타입과 infer를 사용하여 배열의 타입과 첫 번째 요소의 타입을 추론할 수 있습니다:

function getFirstElement<T extends any[]>(arr: T): T extends [infer U, ...any[]] ? U : never {
  return arr[0];
}

이 예시에서 조건부 타입은 배열 T가 최소한 하나의 요소를 가지는 배열인지 확인합니다. 만약 그렇다면 첫 번째 요소의 타입을 추론하고 반환하고, 그렇지 않으면 타입 never를 반환합니다.

6. 예시: 조건부 타입 결합

여러 개의 조건부 타입을 결합하여 더 복잡한 타입 정의를 만들 수도 있습니다. 객체를 입력받아 특정 타입의 속성만을 가진 새로운 객체를 반환하는 함수가 있다고 가정해봅시다. 여러 개의 조건부 타입을 사용하여 이를 구현할 수 있습니다:

type FilteredProperties<T, U> = {
  [K in keyof T]: T[K] extends U ? T[K] : never;
};

이 예시에서 T는 객체의 타입이고, U는 필터링할 속성의 타입입니다. 조건부 타입은 객체의 각 속성을 확인하고, 속성이 타입 U인 경우 결과 타입에 포함시킵니다. 그렇지 않으면 제외됩니다.

7. 결론

Typescript의 조건부 타입은 특정 조건에 따라 타입을 생성할 수 있는 강력한 기능입니다. 이를 사용하여 타입 필터링, 타입 매핑, 타입 추론 등 다양한 작업을 수행할 수 있습니다. 조건부 타입을 활용하면 Typescript에서 더 표현력 있고 타입 안전한 코드를 작성할 수 있습니다.

이 블로그 포스트에서는 Typescript의 조건부 타입의 기본 개념을 살펴보고, 여러 가지 예시를 통해 사용법을 설명했습니다. 타입 필터링, 타입 매핑, 타입 추론, 조건부 타입 결합 등을 다루었습니다. 이 포스트가 조건부 타입에 대한 이해를 돕고, 여러분의 Typescript 프로젝트에서 활용할 수 있도록 영감을 주었기를 바랍니다.

반응형