Template Literal Types

Template Literal Type이란 기존 TypeScript의 String Literal Type을 기반으로 새로운 타입을 만드는 도구이다.

 

기본 형태를 살펴보자.

type World = "world";

type Greeting = `hello ${World}`;
// type Greeting = "hello world"

 

유니온 타입을 이용할 수도 있다.

type Hello = 'hello'
type Contury = 'Korea' | 'Japan' | 'China' | 'America'

type Greeting = `${Hello} ${Contury}`;
// 'hello Korea' | 'hello Japan' | 'hello China' | 'hello America'

 

Conditional Types와 infer 키워드를 통한 추론도 가능하다.

type HelloOrBye<T> = T extends `${infer F} World` ? R : never;

type H = HelloOrBye<"Hello World">; // "Hello"

type B = HelloOrBye<"Bye World">; // "Bye"

 

위에서 얻은 지식을 바탕으로 타입챌린지 Trim 관련 문제를 풀어보자.

https://github.com/type-challenges/type-challenges/blob/main/questions/00106-medium-trimleft/README.ko.md

GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge

 

왼쪽 공백을 제거하는 문제이다. Template Literal Types와 Conditional Types를 이용해서 풀면 된다.

type TrimLeft<S extends string> = S extends `${infer F}${infer R}`
? F extends ' ' | '\n' | '\t'
? TrimLeft<R>
: S 
: ''

 

https://github.com/type-challenges/type-challenges/blob/main/questions/00108-medium-trim/README.ko.md

GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge

이번엔 양쪽 공백을 모두 제거해야한다. 앞서 구현한 TrimLeft에 추가로 TrimRight를 구현해서 풀면 가독성 좋게 풀 수 있다.

type TrimLeft<S extends string> = S extends `${' ' | '\n' | '\t'}${infer R}` ? TrimLeft<R> : S
type TrimRight<S extends string> = S extends `${infer F}${' ' | '\n' | '\t'}` ? TrimRight<F> : S

type Trim<S extends string> = TrimLeft<TrimRight<S>>

 

Template Literal Types를 알아보고 Trim 관련 타입을 구현해보았다!