[TypeScript] as const

 

TypeScript 에서 상수를 선언할 때, `as const` 라는 구문을 습관처럼 붙였던 경우가 있을 것이다. 

근데 `as const` 를 왜 붙이지?

TypeScript3.4 버전에서 추가된 const assertion 기능을 활용하기 위한 구문으로, 객체나 배열을 리터럴 타입(literal type) 으로 지정하기 위해 사용된다. 이 구문은 TypeScript가 해당 값을 변경할 수 없는 불변 타입(immutable type) 으로 취급하도록 만든다. 

 

let foo = 'foo';
// let foo: string


let foo = 'foo' as const;
// let foo: 'foo'

 

즉, 값을 string 이나 number 등의 일반 타입이 아닌, 정확한 리터럴 타입으로 유지한다. 

 

const obj = { name: 'John', age: 30 } as const;
// obj.name = 'Doe'; // 오류 발생: 'name'은 읽기 전용입니다.

 

객체와 배열에서는 그 빛을 더 발하는데, 모든 속성을 읽기 전용(readonly)으로 변경한다. 즉, 객체의 속성을 변경하거나 배열에 요소를 추가하거나 삭제할 수 없다. 

 

 

const vs `as const`

비슷하게 보이나, 변수를 그냥 const 변수로 선언하는 것과 변수 끝에 `as const` 를 추가하는 것은 다르다. 

 

const 는 JavaScript와 TypeScript 모두에서 사용되는 키워드로, 변수의 값을 재할당할 수 없게 막지만 타입은 일반적으로 추론된다.

반면 `as const`는 값을 리터럴 타입으로 지정하고 읽기 전용으로 만들어준다. 즉, 타입을 더 구체적이고 제한적으로 만들어, 더 높은 타입 안전성을 제공한다.

 

예를 들어: 

// cosnt 사용 예시 
const myArray = [1, 2, 3];

 

이 경우 myArray 의 타입은 number[] 로 추론된다. 즉, myArray 의 요소는 number 타입이기만 하면 되고, 배열에 요소를 추가하거나 값을 변경할 수 있다. 

 

// as const 사용 예시
const myArray = [1, 2, 3] as const;

 

이 경우 myArray 의 타입은 readonly [1, 2, 3] 로 추론된다. 즉, 배열의 요소는 정확히 1, 2, 3 이 되어야 하며 배열의 값이나 구조를 변경할 수 없다. 

 

---

 

근데 왜 갑자기 `as const` 에 대해 찾아봤냐고? 

 

위와 같이 `as const` 없이 변수를 선언한 후 value 를 받아와서 사용하려고 하자 빨간줄과 함께 아래와 같은 에러가 나를 반겼다.

A computed property name in a type literal must refer to an expression whose type is a literal type or a 'unique symbol' type.

 

 

---

 

 

편-안