우리는 프로젝트를 하면 가끔씩 고정된 값을 쓸때가 있습니다.
예를 들어 필터에 [일반, 고급]을 나눠야 할때 처럼 말이죠.

원래 let은 타입 추론만 가능하며 const는 타입의 값을 추론할 수 있었습니다.
하지만 문제가 생기는데요

const 변수명 = {
  key1 : "값1",
  key2 : "값2"
};

위의 방식으로 변수를 선언하면 Object의 값을
변수 = { string, string };
이렇게 추론을 해버립니다.

이렇게 추론을 해버리면 어떠한 문제점이 생기냐

위의 사진처럼 상수인데도 불구하고 object의 특정 key값을 바꿀 수 있게 됩니다.
이러한 사태를 방지하기 위해 as const로 막는 것 입니다.

문법 설명

목적

우선 as const가 왜 나왔냐면 리터럴 타입의 추론 범위를 줄이고 값의 재할당을 막기 위해 나왔다고 합니다.
이게 뭔 소리냐, 상수 타입 지정을 하여 값을 변경할 수 없는 상수 형태로 만들어 리터럴 타입 추론 범위를 줄이고 읽기 전용 형태로 만들어 값의 재할당을 막는다 라고 생각하시면 될거 같습니다.

기본 문법

const 변수명 = {
  key1 : "값1",
  key2 : "값2"
} as const;

// 변수명의 타입: {
//   readonly key1 : "값1";
//   readonly key2 : "값2";
// }

쓰는 방법은 간단합니다. 그냥 원래 변수 쓰듯이 쓴 다음 세미콜론 앞에 as const를 써주면 됩니다.
이렇게 쓰면 밑에 적어놓은 것과 같이 모든 key의 값들이 readonly로 바뀌어 읽기 전용으로 바뀌게 됩니다.

만약 '아 나는 변수1의 key1만 고정하고 싶어!' 라고 하시면 밑의 문법으로 쓰시면 됩니다.

const 변수1 = {
  key1 : "값1" as const,
  key2 : "값2"
};

// 변수명의 타입: {
//   readonly key1 : "값1";
//   key2 : "값2";
// }

이렇게 쓰면 밑의 형태 처럼 key1만 readonly형태로 바뀌게 됩니다.

Array에서 사용하시는 경우

array로 사용하시는 경우에는 밑의 문법으로 작성하시면 됩니다.

const 변수1 = ["값1", "값2"] as const;

이렇게 작성하시면 우리가 흔히 아는 union의 형태처럼 바뀌게됩니다.

사용하실때는 그냥 원래 쓰던거처럼 index로 사용하시면 됩니다.

정리

as const는 값을 고정하고 읽기 전용 형태로 만들어주기 위해 나왔습니다.
비슷한 문법으로는 union, enum, const enum등이 있습니다.
위의 문법은 다른 글에서 다루도록 하겠습니다.
감사합니다.