템플릿 리터럴 타입 기초

타입 수준의 문자열

간단한 템플릿 리터럴 타입

type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)

자리 표시자에 다른 타입 넣기

type World = "World"
// A template literal type with text Hello,  and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)

유니온을 결합하면 변형이 늘어남

type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)

여러 자리 표시자를 결합하면 경우의 수가 곱해짐

type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)

이 기능이 유용한 이유

type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)

숫자와 불리언의 문자열 변환

type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)

제네릭 자리 표시자 사용하기

function prefixed<T extends string>(s: T) {
  return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-home

입력 제한하기

type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignable

넓은 문자열 타입은 패턴을 무너뜨림

const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)

활용할 수 있는 곳

type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)

빠른 확인

복습