답변.

Mapped Types는 다른 타입의 모든 속성을 변환(이름 변경, 수정)하여 동적으로 구성되는 타입입니다. 구문은 in 구조를 기반으로 합니다:

type Readonly<T> = {
  readonly [K in keyof T]: T[K];
}

type User = {
  name: string;
  age: number;
}

const u: Readonly<User> = { name: 'Eve', age: 22 };
u.name = 'Bob'; // 오류: name은 읽기 전용입니다.

숙지해야 할 사항:

수정자를 변경할 수 있습니다(읽기 전용, 선택적), -? 또는 +? 키워드를 통해 제거하거나 추가할 수 있습니다.
중첩하여 사용할 수 있으며, 조건부 타입, 유틸리티 타입 및 제너릭과 조합할 수 있습니다.
복잡한 중첩된 타입 계층의 수정 시, 개발 단계에서 오류 추적이 항상 쉬운 것은 아닙니다.

모든 수정자를 포함한 예:

type PartialMutable<T> = {
  -readonly [K in keyof T]?: T[K];
};

함정이 있는 질문.

«선택적 수정자를 사용한 mapped type을 적용하면 첫 번째 수준의 속성에만 영향을 미치나요, 아니면 중첩 객체에도 영향을 미치나요?»

답변: 아니요, 선택적 ?를 가진 mapped type은 오직 첫 번째 수준의 속성에만 영향을 미칩니다. 중첩 객체는 별도로 변환해야 하며, 종종 재귀적이거나 추가적인 mapped type을 사용해야 합니다.

예:

type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

주제의 뉘앙스를 몰라서 발생한 실제 오류 예.

이야기

하나의 프로젝트에서 시간 절약을 위해 표준 Partial<T>를 사용하여 깊은 형태를 만들었습니다. 그러나 두 번째 및 세 번째 수준의 필드가 선택적이지 않아 중첩 키가 없을 때 런타임에서 예기치 않은 오류가 발생했습니다.

이야기

오로지 자식 객체 내부의 읽기 전용 속성을 제거하려고 시도했으나, mapped type을 최상위 수준에만 적용했습니다:

type Mutable<T> = { -readonly [K in keyof T]: T[K] }

결과적으로, { readonly foo: { readonly bar: number } } 타입의 필드는 중첩에서 변경되지 않아 팀을 혼란스럽게 하고 유지보수를 복잡하게 만들었습니다.

이야기

복잡한 데이터 모델에서 여러 유틸리티 타입(예: Readonly & Partial)의 교차를 위해 중첩된 mapped type을 사용했습니다. 잘못된 구성 요소 순서 때문에 타입 호환성에 예기치 않은 충돌이 발생하고 컴파일러가 복잡한 오류 메시지를 출력하기 시작했습니다.

TypeScript에서 Mapped Types란 무엇이며, 이를 통해 유연한 제너릭 타입을 어떻게 생성할 수 있습니까? 사용의 뉘앙스와 잠재적 함정에 대해 자세히 설명하십시오.

답변.

함정이 있는 질문.

주제의 뉘앙스를 몰라서 발생한 실제 오류 예.