문자열 유니언과 자동 완성

유니온으로 자동 완성 지원하기

기본 문자열 리터럴 유니온

type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // Error

편집기의 자동 완성

type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blue

제한 사항

type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))

타입을 넓히면 추천을 잃음

function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestions

문자열과 리터럴 유니온 기법

type Color = "red" | "green" | (string & {})
const a: Color = "red"        // suggested
const b: Color = "#ff8800"    // also allowed
console.log(a, b)

문자열과 빈 객체가 작동하는 이유

type A = "red" | string          // collapses to string — no hints
type B = "red" | (string & {})   // keeps "red" as a suggestion
const x: B = "red"
console.log(x)

재사용 가능한 도우미

type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)

함수에 적용하기

type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home"))     // suggested
console.log(setIcon("my-icon")) // allowed

이 기법을 사용할 때

type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)

절충점

type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)

빠른 확인

복습