템플릿 리터럴 타입

템플릿 리터럴 타입

특수한 문자열 타입

특히 문자열의 조합을 표현할 때 편리

• 백틱(`)과 보간(${})을 사용하는 자바스크립트의 자바스크립트 템플릿 리터럴과 사용법이 비슷

  • 값 대신 타입을 만들기 위해 사용됨

• 템플릿 리터럴 타입은 재귀 호출이 가능

type Literal = 'literal';
type Template = `template ${Literal}`; //"template literal"
// Template 타입을 사용하면 정해진 문자열만 변수에 대입할 수 있음
const str: Template = 'template literal';

• 문자열 타입 안에 다른 타입을 변수처럼 넣을 수 있음

type Template = `template ${string}`;
let str: Template = 'template ';
str = 'template hello';
str = 'teamplte 123';
str = 'template';  // error -> template 문자열 뒤에 띄어쓰기가 없기 때문

• 템플릿 리터럴 타입을 사용하면 문자열 변수를 엄격하게 관리 가능

• 특히 문자열의 조합을 표현할 때 편리

type City = 'seoul' | 'suwon' | 'busan';
type Vehicle = 'car' | 'bike' | 'walk';
type ID = `${City}:${Vehicle}`;
const id = 'seoul:walk';

infer 와 함께 사용하면 더 강력하다

• 좌우 공백이 있는 문자열 타입에서 공백을 제거하는 작업

  • ' test ' -> 'test'

type RemoveX<Str> = Str extends `x${infer Rest}`
  ? RemoveX<Rest>
  : Str extends `${infer Rest}x` ? RemoveX<Rest> : Str;
type Removed = RemoveX<'xxtestxx'>; // 'test'

• 좌우를 동시에 지우지 않는건 좌우 대칭인 경우에만 동작하기 때문

어떤 타입을 만든 뒤에는 여러 테스트 사례를 생각해서 어떠한 경우에도 다 돌아가도록 만들어야 한다.

type RemovedEmpty<Str> = Str extends ` ${infer Rest}`
  ? RemovedEmpty<Rest>
  : Str extends `${infer Rest} ` ? RemovedEmpty<Rest> : Str
  
TYPE REMOVED = REMOVEEMPTY<'  test  '> // 'test'