타입스크립트에서 'As Const' 이해하기

원문링크
번역문링크

아래 글은 위의 글을 읽고 정리한 글입니다. 원문 혹은 번역문을 꼭 읽어보시는 것을 추천드립니다.

---

개요

• const assertion(상수 어설션)은 타입스크립트 버전 3.4에 도입
• 변수가 변경되지 않을 것(immutable)과 같이 엄격한 타입을 제공
  왜 나에 대한 기준만 그렇게 엄격한데!
• 레고 const assertion
  
  

---

문자열/숫자

• 문자열이나 숫자에 as const를 추가하면 특정 값으로 타입을 좁힐 수 있음

let name = "mingco";
// let name: string

let name = "minseok" as const;
// let name: "minseok"

let money = 0;
// let money: number

let money = 0 as const;
//let money: 0

근데 const 쓰면 되잖아요

네! 그래서 준비했습니다. as const 유용하게 쓰기~

1. 함수에서 값을 반환할 때 유용하게 쓰이는 as const

   type Color = "red" | "green" | "blue"
   type Variant = "light" | "dark"
   
   const createColorVariant = (color: Color, variant: Variant) => {
   	return `${variant}-${color}`
   }
   
   // createColorVariant = (color: Color, variant: Variant): string

   위 예제에서 좀 더 명시적으로 타입설정을 하고싶을때는
   Variant, Color를 사용하면 된다.

   type ColorVariant = `${Variant}-${Color}`
   	
   const createColorVariant = (color: Color, variant: Variant): ColourVariant 	=> {
   	return `${variant}-${color}`
   }

   근데 이렇게 하는 것보다 엠즤스럽고 쌈@뽕한 방법인 as const를 사용할 수 있다

   const createColorVariant = (color: Color, variant: Variant) => {
     return `${variant}-${color}` as const
   }
   
   // createColorVariant = (color: Color, variant: Variant): "light-red" | "light-green" | "light-blue" | "dark-red" | "dark-green" | "dark-blue"

   그렇다고 as const만 써야 MZ냐?
   
   
   아닙니다 오히려 상황에 맞게 쓰는 자가 곧 MZ죠

   • 타입을 만들어 재사용하려는 경우
   • 함수가 타입을 준수하기 원하는 경우

   type을 사용해서 명시해주면 되고

   그렇지 않은 경우에는 as const를 사용해서 추가 타입 정의, 더 많이 코드치는 일 생략 가능

   야 너두 쌈@뽕한 MZ 될 수 있어.
   

주의 ⚠️ as const는 리터럴 값에만 사용 가능
as const는 enum 멤버, 문자열, 숫자, 불리언, 배열, 객체 리터럴에 대한 참조에만 적용 가능

const test = "test" as const // O
const test = test as const // X

---

객체

• 객체나 배열에서 as const를 사용하면 흥미로운 일이 발생합니다.
• 먼저 객체는 as const 사용 시 모든 속성을 readonly로 변경 후 값의 범위를 좁힘
  속성, 값 건들지마 손목아지 날아가 붕게
  

const profile = {
	name: "mingco",
	age: 22,
}

/*
const profile: {
	name: string,
	age: number,
}
*/

const profile = {
	name: "mingco",
	age: 22,
} as const

/*
const profile: {
	readonly name: "mingco",
	readonly age: 22,
}
*/

profile.age = 29
// ㅋㅋ readonly라 못바꿈

배열

• 배열에 as const를 사용하면 튜플로 진화합니다.
• 튜플은 index가 고정되어있는 즉, 순서가 정해져있는 배열이라고 생각하면 편합니다.
  

const perfume = ["이솝", "딥디크", "르 라보"]
// string[]

const perfume = ["이솝", "딥디크", "르 라보"] as const
// readonly ["이솝", "딥디크", "르 라보"]

그래서 어디에 쓸까?

1. 리터럴 유니온 타입 생성하기
   리터럴 유니온 타입은 특정 값들 중 하나만을 허용하는 타입인데 as const를 사용해 아래와 같이 리터럴 유니온 타입을 만들 수 있다.

const fruits = ['apple', 'banana', 'cherry'] as const;
type Fruit = typeof fruits[number]; // "apple" | "banana" | "cherry"

그리고 글에 나와있는 훅 예제는 현재는 타입스크립트가 잘 추론하는 것으로 확인된다. (2024.04.20)

결론

• as const (상수 어설션)은 좀 더 빡빡하게 타입을 적용하고 싶을 때 사용하면 좋다.