템플릿 리터럴 타입: TypeScript에서의 문자열 패턴 매칭 및 유효성 검사

TypeScript의 타입 시스템은 지속적으로 발전하며, 개발자에게 복잡한 로직을 표현하고 타입 안정성을 보장하기 위한 더욱 강력한 도구를 제공합니다. 최근 버전에서 도입된 가장 흥미롭고 다재다능한 기능 중 하나는 템플릿 리터럴 타입입니다. 이 타입들은 타입 레벨에서 문자열을 조작할 수 있게 하여, 고급 문자열 패턴 매칭 및 유효성 검사를 가능하게 합니다. 이는 더욱 견고하고 유지보수하기 쉬운 애플리케이션을 생성할 수 있는 완전히 새로운 가능성을 열어줍니다.

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

템플릿 리터럴 타입은 JavaScript에서 템플릿 리터럴이 작동하는 방식과 유사하게, 문자열 리터럴 타입과 유니온 타입을 결합하여 구성되는 타입의 한 형태입니다. 하지만 런타임 문자열을 생성하는 대신, 기존 타입을 기반으로 새로운 타입을 생성합니다.

다음은 기본적인 예시입니다:

            type Greeting<T extends string> = `Hello, ${T}!`;

type MyGreeting = Greeting<"World">; // type MyGreeting = "Hello, World!"

            

              
                Copy
              
            
          

이 예시에서 `Greeting`은 문자열 타입 `T`를 입력으로 받아 "Hello, ", `T`, 그리고 "!"의 연결인 새로운 타입을 반환하는 템플릿 리터럴 타입입니다.

기본 문자열 패턴 매칭

템플릿 리터럴 타입은 기본적인 문자열 패턴 매칭을 수행하는 데 사용될 수 있습니다. 이를 통해 특정 패턴과 일치하는 경우에만 유효한 타입을 생성할 수 있습니다.

예를 들어, "prefix-"로 시작하는 문자열만 허용하는 타입을 생성할 수 있습니다:

            type PrefixedString<T extends string> = T extends `prefix-${string}` ? T : never;

type ValidPrefixedString = PrefixedString<"prefix-valid">; // type ValidPrefixedString = "prefix-valid"
type InvalidPrefixedString = PrefixedString<"invalid">; // type InvalidPrefixedString = never

            

              
                Copy
              
            
          

이 예시에서 `PrefixedString`은 조건부 타입을 사용하여 입력 문자열 `T`가 "prefix-"로 시작하는지 확인합니다. 만약 그렇다면, 타입은 `T` 자체이고, 그렇지 않다면 `never`입니다. `never`는 TypeScript에서 발생하지 않는 값의 타입을 나타내는 특별한 타입으로, 유효하지 않은 문자열을 효과적으로 제외합니다.

문자열의 특정 부분 추출하기

템플릿 리터럴 타입은 문자열의 특정 부분을 추출하는 데에도 사용될 수 있습니다. 이는 문자열에서 데이터를 파싱하여 다른 타입으로 변환해야 할 때 특히 유용합니다.

"x:10,y:20" 형식의 좌표를 나타내는 문자열이 있다고 가정해 봅시다. 템플릿 리터럴 타입을 사용하여 x 및 y 값을 추출할 수 있습니다:

            type CoordinateString = `x:${number},y:${number}`;

type ExtractX<T extends CoordinateString> = T extends `x:${infer X},y:${number}` ? X : never;
type ExtractY<T extends CoordinateString> = T extends `x:${number},y:${infer Y}` ? Y : never;

type XValue = ExtractX<"x:10,y:20">; // type XValue = 10
type YValue = ExtractY<"x:10,y:20">; // type YValue = 20

            

              
                Copy
              
            
          

이 예시에서 `ExtractX`와 `ExtractY`는 `infer` 키워드를 사용하여 `number` 타입과 일치하는 문자열의 부분을 캡처합니다. `infer`를 사용하면 패턴 매치에서 타입을 추출할 수 있습니다. 캡처된 타입은 조건부 타입의 반환 타입으로 사용됩니다.

고급 문자열 유효성 검사

템플릿 리터럴 타입은 유니온 타입 및 조건부 타입과 같은 다른 TypeScript 기능과 결합하여 고급 문자열 유효성 검사를 수행할 수 있습니다. 이를 통해 문자열의 구조와 내용에 대한 복잡한 규칙을 강제하는 타입을 생성할 수 있습니다.

예를 들어, ISO 8601 날짜 문자열을 검증하는 타입을 생성할 수 있습니다:

            type Year = `${number}${number}${number}${number}`;
type Month = `0${number}` | `10` | `11` | `12`;
type Day = `0${number}` | `${1 | 2}${number}` | `30` | `31`;

type ISODate = `${Year}-${Month}-${Day}`;

type ValidDate = ISODate extends "2023-10-27" ? true : false; // true
type InvalidDate = ISODate extends "2023-13-27" ? true : false; // false

function processDate(date: ISODate) {
  // Function logic here.  TypeScript enforces the ISODate format.
  return `Processing date: ${date}`;
}

console.log(processDate("2024-01-15")); // Works
//console.log(processDate("2024-1-15")); // TypeScript error: Argument of type '"2024-1-15"' is not assignable to parameter of type '`${number}${number}${number}${number}-${0}${number}-${0}${number}` | `${number}${number}${number}${number}-${0}${number}-${1}${number}` | ... 14 more ... | `${number}${number}${number}${number}-12-31`'.

            

              
                Copy
              
            
          

여기서 `Year`, `Month`, `Day`는 날짜의 각 부분에 대한 유효한 형식을 나타내기 위해 템플릿 리터럴 타입을 사용하여 정의됩니다. `ISODate`는 이 타입들을 결합하여 유효한 ISO 8601 날짜 문자열을 나타내는 타입을 생성합니다. 이 예시는 또한 이 타입이 함수에서 데이터 형식을 강제하여 잘못된 날짜 형식이 전달되는 것을 방지하는 데 어떻게 사용될 수 있는지 보여줍니다. 이는 코드의 신뢰성을 향상시키고 잘못된 입력으로 인한 런타임 오류를 방지합니다.

실제 사용 사례

템플릿 리터럴 타입은 다양한 실제 시나리오에서 사용될 수 있습니다. 다음은 몇 가지 예시입니다:

• 폼 유효성 검사: 템플릿 리터럴 타입을 사용하여 이메일 주소, 전화번호 및 우편 번호와 같은 폼 입력의 형식을 검증할 수 있습니다.
• API 요청 유효성 검사: 템플릿 리터럴 타입을 사용하여 API 요청 페이로드의 구조를 검증하여 예상 형식에 부합하는지 확인할 수 있습니다. 예를 들어, 통화 코드("USD", "EUR", "GBP" 등)를 검증할 수 있습니다.
• 설정 파일 파싱: 템플릿 리터럴 타입을 사용하여 설정 파일을 파싱하고 특정 패턴에 따라 값을 추출할 수 있습니다. 설정 객체에서 파일 경로를 검증하는 것을 고려해 보세요.
• 문자열 기반 Enum: 템플릿 리터럴 타입을 사용하여 유효성 검사가 포함된 문자열 기반 enum을 생성할 수 있습니다.

예시: 통화 코드 유효성 검사

통화 코드 유효성 검사에 대한 더 자세한 예시를 살펴보겠습니다. 우리는 애플리케이션에서 유효한 ISO 4217 통화 코드만 사용되도록 보장하고자 합니다. 이러한 코드는 일반적으로 세 개의 대문자입니다.

            type CurrencyCode = `${Uppercase<string>}${Uppercase<string>}${Uppercase<string>}`;

function formatCurrency(amount: number, currency: CurrencyCode) {
  // Function logic to format currency based on the provided code.
  return `$${amount} ${currency}`;
}

console.log(formatCurrency(100, "USD")); // Works
//console.log(formatCurrency(100, "usd")); // TypeScript error: Argument of type '"usd"' is not assignable to parameter of type '`${Uppercase}${Uppercase}${Uppercase}`'.

//More precise example:
type ValidCurrencyCode = "USD" | "EUR" | "GBP" | "JPY" | "CAD" | "AUD"; // Extend as needed

type StronglyTypedCurrencyCode = ValidCurrencyCode;

function formatCurrencyStronglyTyped(amount: number, currency: StronglyTypedCurrencyCode) {
    return `$${amount} ${currency}`;
}

console.log(formatCurrencyStronglyTyped(100, "EUR")); // Works
//console.log(formatCurrencyStronglyTyped(100, "CNY")); // TypeScript error: Argument of type '"CNY"' is not assignable to parameter of type '"USD" | "EUR" | "GBP" | "JPY" | "CAD" | "AUD"'.

            

              
                Copy
              
            
          

이 예시는 세 개의 대문자로 구성된 문자열만 허용하는 `CurrencyCode` 타입을 생성하는 방법을 보여줍니다. 두 번째, 더욱 강력한 타입 지정 예시는 이를 미리 정의된 허용 가능한 통화 목록으로 더욱 제한하는 방법을 보여줍니다.

예시: API 엔드포인트 경로 유효성 검사

또 다른 사용 사례는 API 엔드포인트 경로 유효성 검사입니다. 유효한 API 엔드포인트 구조를 나타내는 타입을 정의하여 요청이 올바른 경로로 이루어지도록 보장할 수 있습니다. 이는 여러 서비스가 다른 API를 노출할 수 있는 마이크로서비스 아키텍처에서 특히 유용합니다.

            type APIServiceName = "users" | "products" | "orders";
type APIEndpointPath = `/${APIServiceName}/${string}`;

function callAPI(path: APIEndpointPath) {
  // API call logic
  console.log(`Calling API: ${path}`);
}

callAPI("/users/123"); // Valid
callAPI("/products/details"); // Valid
//callAPI("/invalid/path"); // TypeScript error

// Even more specific:
type APIAction = "create" | "read" | "update" | "delete";
type APIEndpointPathSpecific = `/${APIServiceName}/${APIAction}`;

function callAPISpecific(path: APIEndpointPathSpecific) {
  // API call logic
  console.log(`Calling specific API: ${path}`);
}

callAPISpecific("/users/create"); // Valid
//callAPISpecific("/users/list"); // TypeScript error

            

              
                Copy
              
            
          

이를 통해 API 엔드포인트의 구조를 더욱 정밀하게 정의하여 오타를 방지하고 애플리케이션 전반의 일관성을 보장할 수 있습니다. 이는 기본적인 예시이며, 쿼리 매개변수 및 URL의 다른 부분을 검증하기 위해 더 복잡한 패턴을 생성할 수 있습니다.

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

문자열 패턴 매칭 및 유효성 검사에 템플릿 리터럴 타입을 사용하면 다음과 같은 여러 이점이 있습니다:

• 향상된 타입 안정성: 템플릿 리터럴 타입은 문자열에 대한 더 엄격한 타입 제약을 적용하여 런타임 오류의 위험을 줄입니다.
• 향상된 코드 가독성: 템플릿 리터럴 타입은 문자열의 예상 형식을 명확하게 표현하여 코드의 가독성을 높입니다.
• 향상된 유지보수성: 템플릿 리터럴 타입은 문자열 유효성 검사 규칙에 대한 단일 진실 공급원을 제공하여 코드의 유지보수성을 높입니다.
• 더 나은 개발자 경험: 템플릿 리터럴 타입은 더 나은 자동 완성 및 오류 메시지를 제공하여 전반적인 개발자 경험을 향상시킵니다.

제한 사항

템플릿 리터럴 타입은 강력하지만, 몇 가지 제한 사항도 있습니다:

• 복잡성: 템플릿 리터럴 타입은 특히 복잡한 패턴을 다룰 때 복잡해질 수 있습니다. 타입 안정성의 이점과 코드 유지보수성 사이의 균형을 맞추는 것이 중요합니다.
• 성능: 템플릿 리터럴 타입은 특히 대규모 프로젝트에서 컴파일 성능에 영향을 미칠 수 있습니다. 이는 TypeScript가 더 복잡한 타입 검사를 수행해야 하기 때문입니다.
• 제한된 정규 표현식 지원: 템플릿 리터럴 타입은 패턴 매칭을 허용하지만, 정규 표현식의 모든 기능을 지원하지는 않습니다. 매우 복잡한 문자열 유효성 검사의 경우, 적절한 입력 살균을 위해 이러한 타입 구성과 함께 런타임 정규 표현식이 여전히 필요할 수 있습니다.

모범 사례

템플릿 리터럴 타입을 사용할 때 염두에 두어야 할 몇 가지 모범 사례가 있습니다:

• 간단하게 시작하기: 간단한 패턴부터 시작하여 필요에 따라 점진적으로 복잡성을 늘려나가세요.
• 설명적인 이름 사용: 코드 가독성을 높이기 위해 템플릿 리터럴 타입에 설명적인 이름을 사용하세요.
• 타입 문서화: 템플릿 리터럴 타입의 목적과 사용법을 설명하기 위해 문서화하세요.
• 철저한 테스트: 예상대로 작동하는지 확인하기 위해 템플릿 리터럴 타입을 철저히 테스트하세요.
• 성능 고려: 템플릿 리터럴 타입이 컴파일 성능에 미치는 영향을 염두에 두고 그에 따라 코드를 최적화하세요.

결론

템플릿 리터럴 타입은 TypeScript에서 타입 레벨에서 고급 문자열 조작, 패턴 매칭 및 유효성 검사를 수행할 수 있게 해주는 강력한 기능입니다. 템플릿 리터럴 타입을 사용하면 더욱 견고하고 유지보수하기 쉬우며 타입 안전한 애플리케이션을 생성할 수 있습니다. 몇 가지 제한 사항이 있지만, 템플릿 리터럴 타입을 사용하는 이점은 단점을 상회하는 경우가 많으므로 모든 TypeScript 개발자에게 귀중한 도구입니다. TypeScript 언어가 계속 발전함에 따라 이러한 고급 타입 기능을 이해하고 활용하는 것은 고품질 소프트웨어를 구축하는 데 중요할 것입니다. 복잡성과 가독성 사이의 균형을 유지하고 항상 철저한 테스트를 우선시하는 것을 잊지 마세요.