TypeScript as const 이게 뭘까

타입스크립트는 값을 보고 타입을 추론한다
문제는, 우리가 "이 값은 고정값"이라고 생각해도 타입스크립트가 그렇게 봐주지 않을 때가 있다는 것

그래서 as const가 필요해진다.

---

1) 문제 직면 – 값은 'GET'인데 타입이 string이 된다

예를 들어 메서드를 "GET" | "POST"로 제한하고 싶다고 해보자

type Method = "GET" | "POST";
function request(method: Method) {}

그리고 요청 정보를 객체로 만들고 값을 꺼내서 넘기면,

const req = { method: "GET" };
request(req.method);

이런 코드가 상황에 따라 타입 에러로 이어질 수 있다
겉으로는 "GET"을 넘기는 것처럼 보여도, 타입스크립트가 req.method를 더 넓게(예: string) 취급해버리는 경우가 있기 때문이다

핵심은 이거다

• 값은 "GET"인데
• 타입이 "GET"으로 유지되지 못한다

---

2) 상황 정리 – 왜 넓어지나

타입스크립트는 객체/배열을 만들 때 기본적으로 이렇게 생각한다

• "이 프로퍼티 값은 나중에 바뀔 수도 있겠는데?"
• 그럼 "GET"으로 고정하지 말고 string으로 잡자

즉, 값이 고정된 “규격”인데도
객체에 넣는 순간 “변경 가능” 쪽으로 해석되어 타입이 퍼질 수 있다.

여기서 as const가 필요해진다.

---

3) 해결 – as const 한 줄로 "규격"이라고 찍기

as const는 타입스크립트에게 이렇게 말하는 문법이다.

이 값은 규격이다. 타입을 값 그대로 유지해라

그래서 이렇게 붙인다.

const req2 = { method: "GET" } as const;

request(req2.method); // OK

여기서 중요한 건 두 가지다

• req2.method의 타입이 "GET"으로 고정된다
• 그리고 내부 값은 readonly로 취급된다 (규격이라서 바꾸지 말라는 의미)

즉, as const는 "타입 시스템에서만" 값에 고정 표시를 해주는 기능이다.

---

4) 실무에서 제일 많이 쓰는 패턴 – 선택지 목록을 타입으로 만들기

as const는 결국 이 패턴 때문에 거의 매일 본다.

const STATUS = ["READY", "LOADING", "DONE"] as const;
type Status = typeof STATUS[number];
// "READY" | "LOADING" | "DONE"

이렇게 해두면, "허용된 값만 받게" 만들 수 있다.

function setStatus(status: Status) {}

setStatus("DONE");   // OK
setStatus("DONNE");  // 타입 에러 (오타)

여기서 좋은 점은 단순하다.

• 값 목록을 한 군데서 관리하면
• 타입은 거기서 자동으로 따라 나온다
• 오타는 컴파일 단계에서 잡힌다

---

5) 재발 방지 체크리스트

as const는 "규격/선택지"에만 붙이는 게 제일 깔끔하다.

다음 상황이면 as const를 떠올리면 된다.

• 값이 정해진 선택지다 (상태값, 옵션, 라우트, 이벤트명 등)
• 객체/배열에 담는 순간 타입이 넓어져서 분기/검증이 애매해진다
• 값 목록에서 유니온 타입을 뽑아 쓰고 싶다

반대로, 데이터가 런타임에서 계속 바뀌는 구조라면 as const는 보통 과하다.
(readonly로 고정되는 순간, 수정이 필요한 코드가 불편해진다)

---

6) 짧은 회고

as const를 어렵게 볼 필요는 없다.

"이 값은 규격이다. 타입도 그 규격 그대로 따라와라."