TypeScript 매핑된 타입: 객체 변환 및 속성 수정 마스터하기

끊임없이 진화하는 소프트웨어 개발 환경에서, 유지 보수 가능하고 확장 가능하며 신뢰할 수 있는 애플리케이션을 구축하기 위해서는 강력한 타입 시스템이 필수적입니다. TypeScript는 강력한 타입 추론 및 고급 기능 덕분에 전 세계 개발자들에게 없어서는 안 될 도구가 되었습니다. 그중 가장 강력한 기능 중 하나는 기존 객체 타입을 새로운 타입으로 변환할 수 있게 해주는 정교한 메커니즘인 매핑된 타입(Mapped Types)입니다. 이 블로그 게시물에서는 TypeScript 매핑된 타입의 세계를 깊이 탐구하며, 그 기본적인 개념, 실제 적용 사례, 그리고 개발자가 객체 변환 및 속성 수정을 우아하게 처리할 수 있도록 돕는 방법을 살펴보겠습니다.

매핑된 타입의 핵심 개념 이해하기

본질적으로 매핑된 타입은 기존 타입의 속성들을 반복하여 새로운 타입을 생성하는 방법입니다. 이를 타입에 대한 루프라고 생각해보세요. 원본 타입의 각 속성에 대해 키, 값 또는 둘 다에 변환을 적용할 수 있습니다. 이는 수동적인 반복 없이 기존 타입 정의를 기반으로 새로운 타입 정의를 생성할 수 있는 방대한 가능성을 열어줍니다.

매핑된 타입의 기본 문법은 { [P in K]: T } 구조를 포함하며, 여기서:

• P: 반복되는 속성의 이름을 나타냅니다.
• in K: 이 부분이 핵심입니다. P가 타입 K(일반적으로 문자열 리터럴의 유니온 또는 keyof 타입)에서 각 키를 취할 것임을 나타냅니다.
• T: 새 타입에서 속성 P의 값 타입을 정의합니다.

간단한 예시부터 시작해봅시다. 사용자 데이터를 나타내는 객체가 있고, 모든 속성이 선택적인 새로운 타입을 만들고 싶다고 상상해 보세요. 이는 예를 들어 설정 객체를 구축하거나 부분 업데이트를 구현할 때 흔히 발생하는 시나리오입니다.

예시 1: 모든 속성을 선택적으로 만들기

이 기본 타입을 고려해 보세요:

            
type User = {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
};

            

              
                Copy
              
            
          

매핑된 타입을 사용하여 모든 속성이 선택적인 새로운 타입 OptionalUser를 만들 수 있습니다:

            
type OptionalUser = {
  [P in keyof User]?: User[P];
};

            

              
                Copy
              
            
          

이를 분석해 봅시다:

• keyof User: 이는 User 타입의 키(예: 'id' | 'name' | 'email' | 'isActive')들의 유니온을 생성합니다.
• P in keyof User: 이는 유니온의 각 키를 반복합니다.
• ?: 이는 속성을 선택적으로 만드는 수정자입니다.
• User[P]: 이는 룩업(lookup) 타입입니다. 각 키 P에 대해 원본 User 타입에서 해당 값 타입을 가져옵니다.

결과적인 OptionalUser 타입은 다음과 같이 보일 것입니다:

            
{
  id?: number;
  name?: string;
  email?: string;
  isActive?: boolean;
}

            

              
                Copy
              
            
          

이는 엄청나게 강력합니다. 각 속성을 ?로 수동으로 재정의하는 대신, 타입을 동적으로 생성했습니다. 이 원칙은 다른 많은 유틸리티 타입을 만드는 데 확장될 수 있습니다.

매핑된 타입의 일반적인 속성 수정자

매핑된 타입은 단순히 속성을 선택적으로 만드는 것만이 아닙니다. 결과 타입의 속성에 다양한 수정자를 적용할 수 있도록 합니다. 가장 일반적인 것들은 다음과 같습니다:

• 선택성(Optionality): ? 수정자를 추가하거나 제거합니다.
• 읽기 전용(Readonly): readonly 수정자를 추가하거나 제거합니다.
• 널 허용/비허용(Nullability/Non-nullability): | null 또는 | undefined를 추가하거나 제거합니다.

예시 2: 타입의 읽기 전용 버전 생성하기

속성을 선택적으로 만드는 것과 유사하게, ReadonlyUser 타입을 만들 수 있습니다:

            
type ReadonlyUser = {
  readonly [P in keyof User]: User[P];
};

            

              
                Copy
              
            
          

이것은 다음을 생성할 것입니다:

            
{
  readonly id: number;
  readonly name: string;
  readonly email: string;
  readonly isActive: boolean;
}

            

              
                Copy
              
            
          

이는 특정 데이터 구조가 일단 생성되면 변경될 수 없도록 보장하는 데 매우 유용하며, 특히 동시성 환경이나 많은 국제 개발 팀이 채택한 함수형 프로그래밍 패러다임에서 인기 있는 불변 데이터 패턴을 다룰 때 강력하고 예측 가능한 시스템을 구축하기 위한 근본적인 원칙입니다.

예시 3: 선택성 및 읽기 전용 결합하기

수정자를 결합할 수 있습니다. 예를 들어, 속성이 선택적이면서 동시에 읽기 전용인 타입:

            
type OptionalReadonlyUser = {
  readonly [P in keyof User]?: User[P];
};

            

              
                Copy
              
            
          

그 결과는 다음과 같습니다:

            
{
  readonly id?: number;
  readonly name?: string;
  readonly email?: string;
  readonly isActive?: boolean;
}

            

              
                Copy
              
            
          

매핑된 타입으로 수정자 제거하기

수정자를 제거하고 싶다면 어떻게 해야 할까요? TypeScript는 매핑된 타입 내에서 -? 및 -readonly 구문을 사용하여 이를 허용합니다. 이는 기존 유틸리티 타입 또는 복잡한 타입 구성 요소를 다룰 때 특히 강력합니다.

Partial<T> 타입(내장되어 있으며 모든 속성을 선택적으로 만듦)이 있다고 가정해 봅시다. 그리고 Partial<T>와 동일하지만 모든 속성이 다시 필수적으로 만들어진 타입을 만들고 싶다고 해봅시다.

            
type Mandatory<T> = {
  -?: T extends object ? T[keyof T] : never;
};

type FullyPopulatedUser = Mandatory<Partial<User>>;

            

              
                Copy
              
            
          

이것은 직관적이지 않게 보입니다. 분석해 봅시다:

Partial<User>는 우리의 OptionalUser와 동일합니다. 이제 그 속성들을 필수로 만들고 싶습니다. -? 구문은 선택적 수정자를 제거합니다.

Partial에 먼저 의존하지 않고 이를 달성하는 더 직접적인 방법은 단순히 원본 타입을 가져와서 선택적이었다면 필수로 만드는 것입니다:

            
type MakeMandatory<T> = {
  -?: T;
};

type MandatoryUser = MakeMandatory<OptionalUser>;

            

              
                Copy
              
            
          

이렇게 하면 OptionalUser가 원래의 User 타입 구조(모든 속성이 존재하고 필수적임)로 올바르게 되돌아갑니다.

마찬가지로, readonly 수정자를 제거하려면:

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

type MutableUser = Mutable<ReadonlyUser>;

            

              
                Copy
              
            
          

MutableUser는 원래 User 타입과 동일하지만, 속성이 읽기 전용이 아닐 것입니다.

널 허용 및 미정의 허용 여부

널 허용 여부도 제어할 수 있습니다. 예를 들어, 모든 속성이 확실히 null이 아님을 보장하려면:

            
type NonNullableValues<T> = {
  [P in keyof T]-?: NonNullable<T[P]>;
};

interface MaybeNull {
  name: string | null;
  age: number | undefined;
}

type DefiniteValues = NonNullableValues<MaybeNull>;
// type DefiniteValues = {
//   name: string;
//   age: number;
// }

            

              
                Copy
              
            
          

여기서 -?는 속성이 선택 사항이 아님을 보장하고, NonNullable<T[P]>는 값 타입에서 null과 undefined를 제거합니다.

속성 키 변환하기

매핑된 타입은 믿을 수 없을 정도로 다재다능하며, 값이나 수정자를 변경하는 데 그치지 않습니다. 객체 타입의 키도 변환할 수 있습니다. 이것이 매핑된 타입이 복잡한 시나리오에서 진정으로 빛을 발하는 지점입니다.

예시 4: 속성 키에 접두사 추가하기

기존 타입의 모든 속성에 특정 접두사가 붙는 새로운 타입을 만들고 싶다고 가정해 봅시다. 이는 네임스페이싱 또는 데이터 구조의 변형을 생성하는 데 유용할 수 있습니다.

            
type Prefixed<T, Prefix extends string> = {
  [P in keyof T as `${Prefix}${Capitalize<string & P>}`]: T[P];
};

type OriginalConfig = {
  timeout: number;
  retries: number;
};

type PrefixedConfig = Prefixed<OriginalConfig, 'app'>;
// type PrefixedConfig = {
//   appTimeout: number;
//   appRetries: number;
// }

            

              
                Copy
              
            
          

키 변환을 분석해 봅시다:

• P in keyof T: 여전히 원본 키들을 반복합니다.
• as `${Prefix}${Capitalize<string & P>}`: 이것은 키 재매핑(remapping) 절입니다.
• `${Prefix}${...}`: 이는 템플릿 리터럴 타입(template literal types)을 사용하여 제공된 Prefix와 변환된 속성 이름을 연결하여 새 키 이름을 구성합니다.
• Capitalize<string & P>: 이는 속성 이름 P가 문자열로 처리된 다음 대문자로 변환되도록 하는 일반적인 패턴입니다. string & P를 사용하여 P와 string을 교차시켜 TypeScript가 이를 문자열 타입으로 처리하도록 보장하며, 이는 Capitalize에 필요합니다.

이 예시는 기존 속성을 기반으로 속성 이름을 동적으로 변경하는 방법을 보여주는데, 이는 애플리케이션의 여러 계층에서 일관성을 유지하거나 특정 명명 규칙을 가진 외부 시스템과 통합할 때 강력한 기술입니다.

예시 5: 속성 필터링하기

특정 조건을 만족하는 속성만 포함하고 싶다면 어떨까요? 이는 매핑된 타입과 조건부 타입(Conditional Types)을 키 재매핑을 위한 as 절과 결합하여 달성할 수 있으며, 종종 속성을 필터링하는 데 사용됩니다.

            
type OnlyStrings<T> = {
  [P in keyof T as T[P] extends string ? P : never]: T[P];
};

interface MixedData {
  name: string;
  age: number;
  city: string;
  isActive: boolean;
}

type StringOnlyData = OnlyStrings<MixedData>;
// type StringOnlyData = {
//   name: string;
//   city: string;
// }

            

              
                Copy
              
            
          

이 경우:

• T[P] extends string ? P : never: 각 속성 P에 대해, 해당 값 타입(T[P])이 string에 할당 가능한지 확인합니다.
• 만약 문자열이라면, 키 P는 유지됩니다.
• 문자열이 아니라면, never로 매핑됩니다. 키가 never로 매핑되면, 결과 객체 타입에서 사실상 제거됩니다.

이 기술은 더 넓은 타입에서 더 구체적인 타입을 생성하는 데 매우 유용합니다. 예를 들어, 특정 타입의 구성 설정만 추출하거나 데이터 필드를 그 속성에 따라 분리하는 데 사용될 수 있습니다.

예시 6: 키를 다른 형태로 변환하기

또한 키를 완전히 다른 종류의 키로 변환할 수 있습니다. 예를 들어 문자열 키를 숫자로 바꾸거나 그 반대로 바꿀 수 있지만, 이는 직접적인 객체 조작보다는 고급 타입 레벨 프로그래밍에서 더 자주 사용됩니다.

문자열 키를 문자열 리터럴의 유니온으로 변환한 다음, 이를 새 타입의 기본으로 사용하는 것을 고려해 보세요. 이 특정 방식으로는 매핑된 타입 자체 내에서 객체의 키를 직접 변환하는 것은 아니지만, 키가 어떻게 조작될 수 있는지를 보여줍니다.

더 직접적인 키 변환 예시는 키를 대문자 버전으로 매핑하는 것일 수 있습니다:

            
type UppercaseKeys<T> = {
  [P in keyof T as Uppercase<string & P>]: T[P];
};

type LowercaseData = {
  firstName: string;
  lastName: string;
};

type UppercaseData = UppercaseKeys<LowercaseData>;
// type UppercaseData = {
//   FIRSTNAME: string;
//   LASTNAME: string;
// }

            

              
                Copy
              
            
          

이는 as 절을 사용하여 각 키 P를 해당 대문자 등가물로 변환합니다.

실제 적용 사례 및 현실 시나리오

매핑된 타입은 단지 이론적인 구성 요소가 아닙니다. 다양한 개발 분야에 걸쳐 중요한 실제적인 의미를 가집니다. 다음은 매핑된 타입이 매우 유용한 몇 가지 일반적인 시나리오입니다:

1. 재사용 가능한 유틸리티 타입 구축

많은 일반적인 타입 변환은 재사용 가능한 유틸리티 타입으로 캡슐화될 수 있습니다. TypeScript의 표준 라이브러리는 이미 Partial<T>, Readonly<T>, Record<K, T>, Pick<T, K>와 같은 훌륭한 예시들을 제공합니다. 매핑된 타입을 사용하여 자신만의 커스텀 유틸리티 타입을 정의함으로써 개발 워크플로우를 간소화할 수 있습니다.

예를 들어, 모든 속성을 원본 값을 받아 새 값을 반환하는 함수로 매핑하는 타입:

            
type Mappers<T> = {
  [P in keyof T]: (value: T[P]) => T[P];
};

interface ProductInfo {
  name: string;
  price: number;
}

type ProductMappers = Mappers<ProductInfo>;
// type ProductMappers = {
//   name: (value: string) => string;
//   price: (value: number) => number;
// }

            

              
                Copy
              
            
          

2. 동적 폼 처리 및 유효성 검사

프론트엔드 개발, 특히 React 또는 Angular와 같은 프레임워크(여기 예시는 순수 TypeScript이지만)에서 폼과 그 유효성 검사 상태를 다루는 것은 일반적인 작업입니다. 매핑된 타입은 각 폼 필드의 유효성 검사 상태를 관리하는 데 도움이 될 수 있습니다.

'pristine', 'touched', 'valid', 'invalid' 상태를 가질 수 있는 필드를 가진 폼을 생각해 봅시다.

            
type FormFieldState = 'pristine' | 'touched' | 'dirty' | 'valid' | 'invalid';

type FormState<T> = {
  [P in keyof T]: FormFieldState;
};

interface UserForm {
  username: string;
  email: string;
  password: string;
}

type UserFormState = FormState<UserForm>;
// type UserFormState = {
//   username: FormFieldState;
//   email: FormFieldState;
//   password: FormFieldState;
// }

            

              
                Copy
              
            
          

이를 통해 폼의 데이터 구조를 반영하지만 각 필드의 상태를 추적하여 폼 관리 로직의 일관성과 타입 안전성을 보장하는 타입을 만들 수 있습니다. 이는 다양한 UI/UX 요구 사항이 복잡한 폼 상태로 이어질 수 있는 국제 프로젝트에 특히 유용합니다.

3. API 응답 변환

API를 다룰 때, 응답 데이터가 항상 내부 도메인 모델과 완벽하게 일치하지 않을 수 있습니다. 매핑된 타입은 API 응답을 원하는 형태로 변환하는 데 도움을 줄 수 있습니다.

키에 snake_case를 사용하지만 애플리케이션이 camelCase를 선호하는 API 응답을 상상해 보세요:

            
// Assume this is the incoming API response type
type ApiUserData = {
  user_id: number;
  first_name: string;
  last_name: string;
};

// Helper to convert snake_case to camelCase for keys
type ToCamelCase<S extends string>: string = S extends `${infer T}_${infer U}`
  ? `${T}${Capitalize<U>}`
  : S;

type CamelCasedKeys<T> = {
  [P in keyof T as ToCamelCase<string & P>]: T[P];
};

type AppUserData = CamelCasedKeys<ApiUserData>;
// type AppUserData = {
//   userId: number;
//   firstName: string;
//   lastName: string;
// }

            

              
                Copy
              
            
          

이것은 문자열 조작을 위한 재귀적 조건부 타입을 사용하는 더 고급 예시입니다. 핵심은 매핑된 타입이 다른 고급 TypeScript 기능과 결합될 때 복잡한 데이터 변환을 자동화하여 개발 시간을 절약하고 런타임 오류 위험을 줄일 수 있다는 것입니다. 이는 다양한 백엔드 서비스와 작업하는 글로벌 팀에게 중요합니다.

4. 열거형(Enum)과 유사한 구조 개선하기

TypeScript에 `enum`이 있지만, 때로는 더 많은 유연성을 원하거나 열거형처럼 작동하는 객체 리터럴에서 타입을 파생하고 싶을 수 있습니다.

            
const AppPermissions = {
  READ: 'read',
  WRITE: 'write',
  DELETE: 'delete',
  ADMIN: 'admin',
} as const;

type Permission = typeof AppPermissions[keyof typeof AppPermissions];
// type Permission = 'read' | 'write' | 'delete' | 'admin'

type UserPermissions = {
  [P in Permission]?: boolean;
};

type RolePermissions = {
  [P in Permission]: boolean;
};

const userPerms: UserPermissions = {
  read: true,
};

const adminRole: RolePermissions = {
  read: true,
  write: true,
  delete: true,
  admin: true,
};

            

              
                Copy
              
            
          

여기서 우리는 먼저 가능한 모든 권한 문자열의 유니온 타입을 파생시킵니다. 그런 다음 매핑된 타입을 사용하여 각 권한이 키인 타입을 생성함으로써, 사용자가 해당 권한을 가지고 있는지(선택 사항) 또는 역할이 이를 필수로 하는지(필수 사항) 지정할 수 있습니다. 이 패턴은 전 세계의 권한 부여 시스템에서 흔히 사용됩니다.

도전 과제 및 고려 사항

매핑된 타입은 매우 강력하지만, 잠재적인 복잡성에 유의하는 것이 중요합니다:

• 가독성 및 복잡성: 지나치게 복잡한 매핑된 타입은 특히 이러한 고급 기능에 익숙하지 않은 개발자에게 읽고 이해하기 어려울 수 있습니다. 항상 명확성을 위해 노력하고, 주석을 추가하거나 복잡한 변환을 세분화하는 것을 고려하세요.
• 성능 영향: TypeScript의 타입 검사는 컴파일 타임에 이루어지지만, 극도로 복잡한 타입 조작은 이론적으로 컴파일 시간을 약간 증가시킬 수 있습니다. 대부분의 애플리케이션에서는 이는 미미하지만, 매우 큰 코드베이스나 성능이 중요한 빌드 프로세스에서는 염두에 두어야 할 점입니다.
• 디버깅: 매핑된 타입이 예상치 못한 결과를 생성할 때 디버깅이 어려울 수 있습니다. TypeScript Playground 또는 IDE의 타입 검사 기능을 사용하는 것이 타입이 어떻게 해석되는지 이해하는 데 중요합니다.
• `keyof` 및 룩업 타입 이해: 매핑된 타입을 효과적으로 사용하려면 `keyof` 및 룩업 타입(`T[P]`)에 대한 견고한 이해가 필요합니다. 팀이 이러한 기본 개념을 잘 이해하고 있는지 확인하세요.

매핑된 타입 사용을 위한 모범 사례

매핑된 타입의 모든 잠재력을 활용하면서도 그 도전 과제를 완화하려면 다음 모범 사례들을 고려하세요:

• 간단하게 시작하기: 복잡한 키 재매핑이나 조건부 로직에 뛰어들기 전에 기본적인 선택성 및 읽기 전용 변환부터 시작하세요.
• 내장 유틸리티 타입 활용하기: Partial, Readonly, Record, Pick, Omit, Exclude와 같은 TypeScript의 내장 유틸리티 타입에 익숙해지세요. 이들은 일반적인 작업에 충분하며 잘 테스트되고 이해하기 쉽습니다.
• 재사용 가능한 제네릭 타입 생성하기: 일반적인 매핑된 타입 패턴을 제네릭 유틸리티 타입으로 캡슐화하세요. 이는 프로젝트 전반과 글로벌 팀에 걸쳐 일관성을 촉진하고 상용구 코드를 줄입니다.
• 서술적인 이름 사용하기: 매핑된 타입과 제네릭 매개변수의 목적을 명확히 나타내도록 이름을 지정하세요(예: Optional<T>, DeepReadonly<T>, PrefixedKeys<T, Prefix>).
• 가독성 우선: 매핑된 타입이 너무 복잡해진다면, 동일한 결과를 달성하는 더 간단한 방법이 있는지 또는 추가된 복잡성을 감수할 가치가 있는지 고려하세요. 때로는 약간 더 장황하지만 더 명확한 타입 정의가 선호될 수 있습니다.
• 복잡한 타입 문서화: 복잡한 매핑된 타입의 경우, 특히 다양한 국제 팀과 코드를 공유할 때 JSDoc 주석을 추가하여 기능을 설명하세요.
• 타입 테스트하기: 매핑된 타입이 예상대로 작동하는지 확인하기 위해 타입 테스트를 작성하거나 예시를 사용하세요. 이는 미묘한 버그를 잡기 어려울 수 있는 복잡한 변환에 특히 중요합니다.

결론

TypeScript 매핑된 타입은 고급 타입 조작의 초석으로, 개발자에게 객체 타입을 변환하고 조정할 수 있는 탁월한 기능을 제공합니다. 속성을 선택적으로 만들거나, 읽기 전용으로 만들거나, 이름을 바꾸거나, 복잡한 조건에 따라 필터링하는 등, 매핑된 타입은 데이터 구조를 관리하는 선언적이고 타입 안전하며 매우 표현력이 풍부한 방법을 제공합니다.

이러한 기술을 마스터함으로써 코드 재사용성을 크게 향상시키고, 타입 안전성을 개선하며, 더욱 강력하고 유지 보수 가능한 애플리케이션을 구축할 수 있습니다. 매핑된 타입의 힘을 받아들여 TypeScript 개발을 한 단계 더 발전시키고, 글로벌 청중을 위한 고품질 소프트웨어 솔루션 구축에 기여하십시오. 다양한 지역의 개발자들과 협력할 때, 이러한 고급 타입 패턴은 타입 시스템의 엄격함을 통해 잠재적인 의사소통 격차를 줄이고 코드 품질과 일관성을 보장하는 공통 언어 역할을 할 수 있습니다.