TypeScript에서 as const 사용의 중요성

as const가 없는 경우

export const MESSAGE_TYPE = {
  INFO: 'info',
  MESSAGE: 'message',
  PROCESS: 'process',
  ERROR: 'error',
};

위와 같이 작성된 객체는 JavaScript의 일반적인 객체와 비슷합니다. TypeScript는 이 객체의 각 값이 단순히 문자열이라고 생각합니다. 따라서 이 값을 사용하는 변수에는 어떤 문자열이든 넣을 수 있습니다.

예를 들어:

let messageType = MESSAGE_TYPE.INFO;  // OK, 'info'는 문자열이니까 가능
messageType = "other";  // OK, 다른 문자열도 가능

messageType 변수에 "other" 같은 전혀 다른 문자열도 넣을 수 있습니다.

as const가 있는 경우

export const MESSAGE_STATUS = {
  ID: 'ID',
  SYSTEM_CONTEXT: 'SYSTEM_CONTEXT',
  ANALYZING_SEMANTIC: 'ANALYZING_SEMANTIC',
  END: 'END',
  ERROR: 'ERROR',
} as const;

// TypeScript는 각각의 값을 고정된 문자열로 추론합니다.
let messageStatus: 'ID' | 'SYSTEM_CONTEXT' | 'ANALYZING_SEMANTIC' | 'END' | 'ERROR';

as const를 사용하면 TypeScript는 이 객체의 값들이 절대 변하지 않는 고정된 값이라고 생각합니다. 따라서 이 값들을 사용하는 변수에는 오직 그 값들만 넣을 수 있습니다.

예를 들어:

let messageStatus = MESSAGE_STATUS.ID;  // OK, 'ID'는 고정된 값이니까 가능
messageStatus = "other";  // Error, 'other'는 허용된 값이 아니므로 오류 발생

messageStatus 변수에는 CHAT_MESSAGE_STATUS에 정의된 값들만 넣을 수 있고, "other" 같은 값은 넣을 수 없습니다.

왜 이게 중요한가요?

• 타입 안정성: as const를 사용하면 코드가 더 안전해집니다. 예를 들어, 실수로 잘못된 값을 넣는 것을 방지할 수 있습니다.
• 더 나은 코드 작성: 특정 값들만 사용할 수 있도록 제한하므로, 예상치 못한 오류를 줄일 수 있습니다.

요약

• as const가 없으면: 변수에 아무 문자열이나 넣을 수 있습니다.
• as const가 있으면: 변수에 오직 지정된 값들만 넣을 수 있습니다.