[TECH-QA] TypeScript에서 객체 리터럴을 불변(immutable)으로 사용하기

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

// 타입: { readonly apiUrl: "https://api.example.com"; readonly port: 8080; readonly timeout: 5000; }

// 값 변경 시도 - 에러 발생
// config.apiUrl = "https://new-url.com"; // 오류: Cannot assign to 'apiUrl' because it is a read-only property.

// 사용 예시
function fetchData(url: string) {
  console.log(`Fetching from ${url}`);
}

fetchData(config.apiUrl); // 정상 작동

const userSettings = {
  user: {
    name: "Alice",
    age: 30
  },
  preferences: {
    theme: "dark",
    notifications: true
  }
} as const;

// 타입: { readonly user: { readonly name: "Alice"; readonly age: 30; }; readonly preferences: { readonly theme: "dark"; readonly notifications: true; }; }

// 값 변경 시도 - 에러 발생
// userSettings.user.name = "Bob"; // 오류: Cannot assign to 'name' because it is a read-only property.

// 사용 예시
function displayUser(settings: typeof userSettings) {
  console.log(`User: ${settings.user.name}, Theme: ${settings.preferences.theme}`);
}

displayUser(userSettings);

const colors = ["red", "green", "blue"] as const;

// 타입: readonly ["red", "green", "blue"]

// 배열 요소 변경 시도 - 에러 발생
// colors[0] = "yellow"; // 오류: Cannot assign to '0' because it is a read-only property.

// 사용 예시
function pickColor(color: typeof colors[number]) {
  console.log(`Selected color: ${color}`);
}

pickColor(colors[0]); // 정상 작동: "red"

const frozenConfig = Object.freeze({
  apiUrl: "https://api.example.com",
  port: 8080
}) as const;

// 런타임과 컴파일 타임 모두 불변
// frozenConfig.apiUrl = "new-url"; // 컴파일 에러
// frozenConfig.port = 3000; // 컴파일 에러