[241115 TIL] as const

as const는 TypeScript에서 리터럴 타입 추론을 위해 사용하는 구문입니다. 이를 통해 객체, 배열, 문자열 등의 값을 "읽기 전용"으로 설정하고, 그 값을 리터럴 타입으로 좁힐 수 있습니다.

---

1. as const의 역할

as const는 TypeScript에서 다음과 같은 역할을 합니다:

1. 리터럴 타입 추론:
   • 기본적으로 TypeScript는 값을 더 일반적인 타입으로 추론합니다.
   • as const를 사용하면 값을 리터럴 타입으로 추론하도록 강제합니다.
2. 읽기 전용(readonly)로 설정:
   • as const를 사용하면 객체나 배열의 모든 속성을 읽기 전용(readonly)으로 설정합니다.

---

2. 예제

a) 기본 값 추론과의 차이

const value = "hello"; // TypeScript는 value를 string 타입으로 추론
const literalValue = "hello" as const; // TypeScript는 value를 "hello" 리터럴 타입으로 추론

• const value는 "hello"를 문자열 타입 string으로 추론합니다.
• const literalValue = "hello" as const는 "hello" 리터럴 타입으로 좁힙니다.

b) 객체에서의 사용

const obj = {
  name: "Alice",
  age: 30,
}; // TypeScript는 obj를 { name: string; age: number } 타입으로 추론

const objAsConst = {
  name: "Alice",
  age: 30,
} as const; // TypeScript는 objAsConst를 { readonly name: "Alice"; readonly age: 30 } 타입으로 추론

• obj는 name과 age를 각각 string과 number 타입으로 추론합니다.
• objAsConst는 as const 덕분에 리터럴 타입으로 추론되며, readonly로 설정됩니다:

  {
    readonly name: "Alice";
    readonly age: 30;
  }

c) 배열에서의 사용

const arr = [1, 2, 3]; // TypeScript는 arr를 number[] 타입으로 추론
const arrAsConst = [1, 2, 3] as const; // TypeScript는 arrAsConst를 readonly [1, 2, 3] 타입으로 추론

• arr는 배열 요소를 일반적인 number[]로 추론합니다.
• arrAsConst는 [1, 2, 3]을 읽기 전용으로 고정합니다:

  readonly [1, 2, 3]

d) 열거형 대체로 사용

as const는 TypeScript에서 열거형(enum)을 대체하거나 고정된 값 집합을 표현할 때 유용합니다.

const Colors = {
  RED: "red",
  GREEN: "green",
  BLUE: "blue",
} as const;

// 타입 추론
type Color = typeof Colors[keyof typeof Colors]; // "red" | "green" | "blue"

---

3. as const의 활용 사례

a) TypeScript에서 상수 값 고정

const BUTTON_TYPES = ["primary", "secondary", "danger"] as const;

type ButtonType = typeof BUTTON_TYPES[number]; // "primary" | "secondary" | "danger"

b) 읽기 전용 데이터

as const를 사용하면 데이터를 수정하지 않도록 보장할 수 있습니다.

const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
} as const;

config.apiUrl = "https://another-api.com"; // 오류: 읽기 전용 속성은 변경할 수 없습니다.

---

4. 주의사항

• as const는 데이터가 변경되지 않는다고 가정할 때 사용해야 합니다.
• 값이 고정된 상수 집합을 표현할 때 매우 유용합니다.
• readonly 속성을 포함하므로, 수정이 필요한 경우 주의해야 합니다.

---

5. 결론

as const는 TypeScript에서 값을 리터럴 타입으로 추론하고 읽기 전용으로 설정하는 간단하고 강력한 도구입니다. 이를 사용하면 코드의 안정성을 높이고, 타입 추론을 더욱 정밀하게 제어할 수 있습니다.