TypeScript에서 래퍼 타입(Wrapper types)은 어떻게 구현되며, 어떤 용도로 사용되나요? 원시 타입과 그 래퍼를 사용할 때 어떤 문제가 발생하나요?

답변

TypeScript는 원시 타입(string, number, boolean)과 그 객체 래퍼(String, Number, Boolean)를 구별합니다. 래퍼는 생성자를 통해 만들어진 객체입니다:

const primitive: string = 'hello';
const wrapper: String = new String('hello');

• 원시 타입 — 간단하고 효율적이며 내장된 메서드와 속성을 제외하고는 메서드와 속성이 없습니다.
• 객체 래퍼 — 해당 메서드/속성을 가진 객체로, 비즈니스 로직에서는 드물게 사용됩니다.
• primitive === wrapper와 비교하면 결과는 false입니다:

console.log('hello' === new String('hello')); // false

• 타입을 지정할 때는 항상 원시 타입(string, String이 아닌)을 사용하는 것이 좋습니다.
• 래퍼는 제너릭 API 라이브러리와 작업할 필요가 있을 때만 사용하십시오(예: 반사 또는 메타 프로그래밍을 위해).

함정 질문

원시 값이 있을 때 TypeScript 인터페이스에서 래퍼 타입(String, Number, Boolean)을 사용할 수 있을까요?

답변: 래퍼를 사용하는 것은 권장되지 않습니다: 대부분의 경우 값은 원시 타입이므로 인터페이스가 래퍼 타입을 직접 상속하게 되면 오류가 발생할 수 있습니다. 항상 string, number, boolean을 사용하는 것이 좋습니다.

주제의 세부 사항을 알지 못해 발생한 실제 오류의 예

---

사례

웹 애플리케이션에서 사용자 이름 저장을 위해 인터페이스에 String 타입이 사용되었습니다. 이는 비교 오류와 동일한 타입(strong type)에 대한 요구로 인해 유닛 테스트 실패로 이어졌습니다.

---

사례

라이브러리 개발자가 제너릭 함수를 Number로 타입을 지정하였고, 라이브러리 클라이언트가 원시 값을 전달하여 타입 가드 메서드가 원시에 대해 예상치 못한 작동을 하지 않는 문제가 발생했습니다. 복잡한 타입 캐스팅 오류가 나타났습니다.

---

사례

분석 서비스에서 사용자 활성화 플래그로 Boolean 타입이 사용되었고, 데이터 필터링 시 비교 결과는 항상 false였으며, 시각적으로 값이 일치했음에도 불구하고 잘못된 데이터 처리 및 보고서 오류가 발생했습니다.