타입스크립트 as const

as const는 타입스크립트에서 사용하는 문법으로, 값의 타입을 리터럴 타입으로 좁혀주는 기능을 한다. 이 문법은 객체타입을 불변으로 만들 때 사용된다.

일반적으로 타입스크립트는 아래 array를 문자열 배열(string[])으로 추론한다.

const array = ["todos"]; // string[]으로 추론

as const를 사용하면 값의 타입을 그대로 유지하면서 리터럴 타입으로 간주하도록 만든다.

const array = ["todos"] as const;
// ['todos']로 추론

['todos'] 라는 값 자체가 하나의 타입이 된 것이다.

아래 예제를 보자. bestNumbers는 const로 정의되었지만 pop, push같은 동작은 여전히 가능하다.

const bestNumbers = [1, 12, 24]; //great numbers
bestNumbers.pop(); //Works fine

as const를 사용해서 불변으로 만들면 더 이상 동작하지 않는다.

const bestNumbers = [1, 12, 24] as const; //great numbers
//Cannot assign to 'bestNumbers' because it is a constant.
bestNumbers.pop(); //Now this won't work either
bestNumbers[2] = 7; //Or this

pop()을 시도하면 Property 'pop' does not exist on type 'readonly [1, 12, 24]'. 에러가 발생한다.

사용 사례

React Query에서 queryKey를 작성할 때, as const를 사용하면 타입 안정성을 보장할 수 있다.

const queryKey = ["todos"] as const;
// queryKey의 타입은 ['todos']로 고정
useQuery(queryKey, fetchTodos);

queryKey가 정확히 todos라는 값으로 고정되므로, 오타를 방지하고 React Query에서 올바른 타입을 추론할 수 있다.

출처

• as const : https://www.omarileon.me/blog/typescript-as-const