타입스크립트 템플릿 리터럴 타입을 활용한 타입 안전한 API

타입스크립트 템플릿 리터럴 타입은 타입스크립트 4.1에 도입된 강력한 기능으로, 타입 레벨에서 문자열 조작을 수행할 수 있게 해줍니다. 이 기능은 고도로 타입 안전하고 유지보수하기 쉬운 API를 만드는 무한한 가능성을 열어주며, 런타임에만 발견될 수 있었던 오류를 컴파일 타임에 잡아낼 수 있게 합니다. 이는 결과적으로 개발자 경험 개선, 손쉬운 리팩터링, 그리고 더 견고한 코드로 이어집니다.

템플릿 리터럴 타입이란 무엇인가?

기본적으로 템플릿 리터럴 타입은 문자열 리터럴 타입, 유니온 타입, 그리고 타입 변수를 결합하여 구성할 수 있는 문자열 리터럴 타입입니다. 이를 타입에 대한 문자열 보간(string interpolation)이라고 생각할 수 있습니다. 이를 통해 기존 타입을 기반으로 새로운 타입을 생성할 수 있어 높은 수준의 유연성과 표현력을 제공합니다.

간단한 예시는 다음과 같습니다:

type Greeting = "Hello, World!";

type PersonalizedGreeting = `Hello, ${T}!`;

type MyGreeting = PersonalizedGreeting<"Alice">; // MyGreeting 타입은 "Hello, Alice!"가 됩니다

이 예시에서 PersonalizedGreeting은 제네릭 타입 매개변수 T를 받는 템플릿 리터럴 타입이며, T는 반드시 문자열이어야 합니다. 그런 다음 문자열 리터럴 "Hello, "와 T의 값, 그리고 문자열 리터럴 "!"를 보간하여 새로운 타입을 구성합니다. 결과 타입인 MyGreeting은 "Hello, Alice!"가 됩니다.

템플릿 리터럴 타입 사용의 이점

• 향상된 타입 안전성: 런타임 대신 컴파일 타임에 오류를 잡아냅니다.
• 개선된 코드 유지보수성: 코드를 더 쉽게 이해하고, 수정하며, 리팩터링할 수 있게 만듭니다.
• 더 나은 개발자 경험: 더 정확하고 유용한 자동 완성 및 오류 메시지를 제공합니다.
• 코드 생성: 타입 안전한 코드를 생성하는 코드 생성기를 만들 수 있습니다.
• API 설계: API 사용에 대한 제약을 강제하고 매개변수 처리를 단순화합니다.

실제 사용 사례

1. API 엔드포인트 정의

템플릿 리터럴 타입은 API 엔드포인트 타입을 정의하는 데 사용될 수 있으며, 이를 통해 올바른 매개변수가 API에 전달되고 응답이 올바르게 처리되도록 보장할 수 있습니다. USD, EUR, JPY와 같은 여러 통화를 지원하는 전자상거래 플랫폼을 생각해 봅시다.

type Currency = "USD" | "EUR" | "JPY";
type ProductID = string; //실제로는 더 구체적인 타입이 될 수 있습니다

type GetProductEndpoint = `/products/${ProductID}/${C}`;

type USDEndpoint = GetProductEndpoint<"USD">; // USDEndpoint 타입은 "/products/${string}/USD"가 됩니다

이 예시는 통화를 타입 매개변수로 받는 GetProductEndpoint 타입을 정의합니다. 결과 타입은 지정된 통화로 제품을 검색하기 위한 API 엔드포인트를 나타내는 문자열 리터럴 타입입니다. 이 접근 방식을 사용하면 API 엔드포인트가 항상 올바르게 구성되고 올바른 통화가 사용되도록 보장할 수 있습니다.

2. 데이터 유효성 검사

템플릿 리터럴 타입은 컴파일 타임에 데이터를 검증하는 데 사용될 수 있습니다. 예를 들어, 전화번호나 이메일 주소의 형식을 검증하는 데 사용할 수 있습니다. 국가 코드에 따라 형식이 다른 국제 전화번호를 검증해야 한다고 상상해 보세요.

type CountryCode = "+1" | "+44" | "+81"; // 미국, 영국, 일본
type PhoneNumber = `${C}-${N}`;

type ValidUSPhoneNumber = PhoneNumber<"+1", "555-123-4567">; // ValidUSPhoneNumber 타입은 "+1-555-123-4567"가 됩니다

//참고: 더 복잡한 유효성 검사는 템플릿 리터럴 타입과 조건부 타입을 함께 사용해야 할 수 있습니다.

이 예시는 특정 형식을 강제하는 기본 전화번호 타입을 만드는 방법을 보여줍니다. 더 정교한 유효성 검사는 조건부 타입과 템플릿 리터럴 내에서 정규 표현식과 유사한 패턴을 사용하는 것을 포함할 수 있습니다.

3. 코드 생성

템플릿 리터럴 타입은 컴파일 타임에 코드를 생성하는 데 사용될 수 있습니다. 예를 들어, 표시하는 데이터의 이름을 기반으로 리액트 컴포넌트 이름을 생성하는 데 사용할 수 있습니다. <엔티티>Details 패턴에 따라 컴포넌트 이름을 생성하는 것은 일반적인 패턴입니다.

type Entity = "User" | "Product" | "Order";
type ComponentName = `${E}Details`;

type UserDetailsComponent = ComponentName<"User">; // UserDetailsComponent 타입은 "UserDetails"가 됩니다

이를 통해 일관성 있고 서술적인 컴포넌트 이름을 자동으로 생성하여 이름 충돌의 위험을 줄이고 코드 가독성을 향상시킬 수 있습니다.

4. 이벤트 처리

템플릿 리터럴 타입은 타입 안전한 방식으로 이벤트 이름을 정의하는 데 탁월하며, 이벤트 리스너가 올바르게 등록되고 이벤트 핸들러가 예상된 데이터를 수신하도록 보장합니다. 이벤트가 모듈과 이벤트 유형으로 분류되고 콜론으로 구분되는 시스템을 생각해 보세요.

type Module = "user" | "product" | "order";
type EventType = "created" | "updated" | "deleted";
type EventName = `${M}:${E}`;

type UserCreatedEvent = EventName<"user", "created">; // UserCreatedEvent 타입은 "user:created"가 됩니다

interface EventMap {
  [key: EventName]: (data: any) => void; //예시: 이벤트 처리를 위한 타입
}

이 예시는 일관된 패턴을 따르는 이벤트 이름을 만드는 방법을 보여주며, 이벤트 시스템의 전반적인 구조와 타입 안전성을 향상시킵니다.

고급 기법

1. 조건부 타입과 결합하기

템플릿 리터럴 타입은 조건부 타입과 결합하여 훨씬 더 정교한 타입 변환을 만들 수 있습니다. 조건부 타입은 다른 타입에 의존하는 타입을 정의할 수 있게 해주어, 타입 레벨에서 복잡한 로직을 수행할 수 있게 합니다.

type ToUpperCase = S extends Uppercase ? S : Uppercase;

type MaybeUpperCase = Upper extends true ? ToUpperCase : S;

type Example = MaybeUpperCase<"hello", true>; // Example 타입은 "HELLO"가 됩니다
type Example2 = MaybeUpperCase<"world", false>; // Example2 타입은 "world"가 됩니다

type MyObject = {
  name: string;
  age: number;
};

type AddPrefix = {
  [K in keyof T as `${Prefix}${string & K}`]: T[K];
};

type PrefixedObject = AddPrefix;
// PrefixedObject 타입은 다음과 같습니다:
//    data_name: string;
//    data_age: number;
// }

type MyString = "hello world";

type CapitalizedString = Capitalize; // CapitalizedString 타입은 "Hello world"가 됩니다

type UpperCasedString = Uppercase;   // UpperCasedString 타입은 "HELLO WORLD"가 됩니다