TypeScript를 사용하다보면 가끔 가변성 관련 오류 메시지를 만날 수 있습니다. 가변성 오류는 알기 쉽지 않고 디버깅하기 어려운 문제를 일으킬 수 있으므로 이해하는 것이 중요합니다. 이번 글에서는 TypeScript에서 가변성 관련 대표적인 에러 메시지와 그 해결 방법에 대해 알아보겠습니다.

Readonly type is not assignable

가장 흔히 발생하는 가변성 오류 중 하나는 Readonly 형식에 대입하려고 시도하는 경우입니다. 다음은 이에 관한 에러 메시지의 예시입니다.

Type '{ readOnlyProp: number; }' is not assignable to type 'Readonly<{ readOnlyProp: number; }>'.

이 오류는 읽기 전용 속성에 값을 할당하려고 시도하고 있는 경우에 발생합니다. 이를 해결하려면 as const 또는 readonly 키워드를 사용하여 값을 읽기 전용으로 선언해야 합니다.

const obj = {
  readOnlyProp: 123
} as const;

Readonly array is not assignable

배열에서도 비슷한 문제가 발생할 수 있습니다. 다음은 배열에 대한 Readonly 적용시 발생하는 에러 메시지의 예시입니다.

Type 'readonly number[]' is not assignable to type 'readonly number[]'.

이 오류는 읽기 전용 배열에 값을 할당하려고 시도하고 있는 경우에 발생합니다. 이를 해결하려면 값을 readonly로 선언해야 합니다.

const arr: readonly number[] = [1, 2, 3];

결론

가변성 관련 에러를 이해하고 이를 해결하는 것은 TypeScript를 사용하는데 중요한 요소입니다. 위에서 살펴본 대표적인 에러 메시지 및 해결법을 통해 코드 작성 시 주의할 점을 기억하는 것이 도움이 될 것입니다.

더 많은 정보는 TypeScript 공식 문서에서 확인할 수 있습니다.