as const

Toast를 만드는데,

export const TOAST_TYPE = {
    toastA: 'toastA',
    toastB: 'toastB',
    toastC: 'toastC'
};

export type ToastType = keyof typeof TOAST_TYPE;

로 타입을 만들고,

type Props = {
    children: ReactNode;
    toastType: ToastType;
    config?: {
        duration: number;
    }
}

const ToastContainer = ({children, toastType, config = {duration: 3000}} : Props) => {

로 Props의 toastType의 타입을 ToastType으로 제한했으니, toastType = ‘toastA’ | ‘toastB’ | ‘toastC’ 만 받을거라고 생각했다.

ERROR in src/ToastA.tsx:7:25
TS2322: Type 'string' is not assignable to type '"toastA" | "toastB" | "toastC"'.
     5 | const ToastA = () => {
     6 |     return (
  >  7 |         <ToastContainer toastType={TOAST_TYPE.toastA}>
       |                         ^^^^^^^^^
     8 |            <div className="Toast">
     9 |                TOAST A
    10 |            </div>

난 분명히 ‘toastA’를 props로 넘긴것 같았는데… 잘 안됐다. 뭔가하고 찾아보니 as const 키워드로 지정하는 것을 깜빡했었다. 기억도 잘 안나고 이참에 정리하려고 한다.

as const를 붙이지 않았을 때

const TOAST_TYPE: {
toastA: string;
toastB: string;
toastC: string;
}

as const 키워드를 붙이지 않았다면, toastA, toastB, toastC의 값이 일반적인 string 타입으로 추론된다.

즉, TOAST_TYPE.toastA의 타입은 string 이므로, 다른 문자열도 할당될 가능성이 생긴다.

as const를 붙였을 때

const TOAST_TYPE: {
    readonly toastA: "toastA";
    readonly toastB: "toastB";
    readonly toastC: "toastC";
}

타입 추론 결과

• 모든 값이 리터럴 타입("toastA", "toastB", "toastC")로 고정된다.
• 객체의 속성이 readonly가 되어 수정이 불가능해진다.

✅ as const를 붙이면 얻는 이점

1. 리터럴 타입 고정

   • TOAST_TYPE.toastA의 타입이 "toastA"가 되어, "toastA" 외의 값으로 변경할 수 없음.
   • 이로 인해, 타입 안정성이 증가한다.

2. 객체 속성 변경 불가능 (readonly)

   • TOAST_TYPE.toastA = "newValue"; 같은 코드가 컴파일 오류 발생.

3. 타입 추론 정확도 증가

   • 예를 들어, 특정 변수의 타입을 keyof typeof TOAST_TYPE로 지정할 때 정확한 리터럴 타입이 보장된다.

   type ToastType = keyof typeof TOAST_TYPE;
   // "toastA" | "toastB" | "toastC"

---

🚀 결론

✅ as const를 붙이면 객체 속성이 리터럴 타입으로 고정되고 readonly 속성이 추가됨 → 타입 안정성이 증가한다.

❌ as const를 안 붙이면 객체 속성이 일반 string 타입으로 추론됨 → 의도하지 않은 값이 들어갈 가능성이 생긴다.

따라서, 값이 변하지 않는 상수 객체를 정의할 때는 as const를 붙이는 것이 좋다.