literal type과 const assertion

literal type

 

literal type은 간단히, 특정 값을 타입으로 고정시키는 것이다.

물론 특정 값을 type 선언해서 사용할 수도 있긴 하다. deprecated라고 뜰 뿐이지...

type name = 'Darren'
const me: 'Darren' = 'Darren'
const cloneMe: name = 'Darren' // deprecated

 

literal template 어따 써먹지라는 생각을 할 수도 있지만 아래와 같이 종종 유용하게 사용된다.

interface widthOption {
  width: number
}

const setDivWidth = (width: widthOption | 'auto') => {
  return width === 'auto' ? 'auto' : `${width}px`
}

 

 

const Assertion

 

as const를 통해서 object나 array를 고정된 타입으로 만들 수 있고, type assertion을 좀 더 잘 활용하는 차원에서 literal type은 const assertion 과 같이 사용되곤 합니다.

 

사실 const assertion이 object에서 자주 사용되긴 하지만, enum members, string, number, boolean, array, object에서 사용 됩니다.

A 'const' assertions can only be applied to references to enum members, or string, number, boolean, array, or object literals.

// Type '"hello"'
let x = "hello" as const;

// Type 'readonly [10, 20]'
let y = [10, 20] as const;

// Type '{ readonly text: "hello" }'
let z = { text: "hello" } as const;

const a = 'A'
const me = 'darren' as const

const returnA = () => a
const returnMyName = () => me // 함수 반환 타입이 string이 아닌 'darren'으로 추론됨

 

as const를 붙여 특정 값을 literal type으로 만드는 이유는 여러가지가 있겠지만,

 

우선은 object, array의 값을 변경하지 않게 하기 위해서 사용됩니다. 아래 예시는 프로퍼티가 1개 뿐이지만, 복잡하고 nested된 object에 일일히 readonly를 달아주려면 힘들겠죠.

const me = {
  name: "darren"
} as const

me.name = "mama" // Cannot assign to 'name' because it is a read-only property.

 

또 type narrowing하기에도 편리합니다. 아래는 typescript 문서에 언급된 예시입니다.

// Works with no types referenced or declared.
// We only needed a single const assertion.
function getShapes () {
  let result = [
    { kind: 'circle', radius: 100 },
    { kind: 'square', sideLength: 50 }
  ] as const
  return result
}

for (const shape of getShapes()) {
  // Narrows perfectly!
  if (shape.kind === 'circle') {
    console.log('Circle radius', shape.radius)
  } else {
    console.log('Square side length', shape.sideLength)
  }
}

 

as const를 Enum 처럼 사용할 수도 있습니다.

const color = {
  red: '#f00',
  blue: '#00f',
  green: '#0f0'
} as const

// enum화
type Color = typeof color[keyof typeof color]

const getColor = (hex: Color) => hex
getColor(color.red)

 

 

ref)

const assertion이 도입되었던 typescript 3.4 버전의 설명글

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions