M

MLOG

한국어

TypeScript의 매핑된 타입을 활용하여 객체 형태를 동적으로 변환하고, 글로벌 애플리케이션을 위한 견고하고 유지보수 가능한 코드를 작성하는 방법을 알아보세요.

TypeScript 매핑된 타입(Mapped Types)을 활용한 동적 객체 변환: 종합 가이드

정적 타이핑을 강력하게 강조하는 TypeScript는 개발자가 더 안정적이고 유지보수하기 쉬운 코드를 작성할 수 있도록 지원합니다. 여기에 크게 기여하는 핵심 기능이 바로 매핑된 타입(mapped types)입니다. 이 가이드에서는 TypeScript 매핑된 타입의 세계를 깊이 탐구하며, 특히 글로벌 소프트웨어 솔루션 개발의 맥락에서 그 기능, 이점 및 실제 적용 사례에 대한 포괄적인 이해를 제공합니다.

핵심 개념 이해하기

핵심적으로 매핑된 타입은 기존 타입의 속성을 기반으로 새로운 타입을 생성할 수 있게 해줍니다. 다른 타입의 키를 순회하고 값에 변환을 적용하여 새로운 타입을 정의합니다. 이는 속성의 데이터 타입을 변경하거나, 속성을 선택적으로 만들거나, 기존 속성을 기반으로 새 속성을 추가하는 등 객체의 구조를 동적으로 수정해야 하는 시나리오에서 매우 유용합니다.

기본부터 시작해 보겠습니다. 간단한 인터페이스를 살펴보겠습니다:

interface Person {
  name: string;
  age: number;
  email: string;
}

이제 Person의 모든 속성을 선택적으로 만드는 매핑된 타입을 정의해 보겠습니다:

type OptionalPerson = { 
  [K in keyof Person]?: Person[K];
};

이 예제에서:

결과적으로 OptionalPerson 타입은 다음과 같이 보입니다:

{
  name?: string;
  age?: number;
  email?: string;
}

이는 기존 타입을 동적으로 수정하는 매핑된 타입의 강력함을 보여줍니다.

매핑된 타입의 구문과 구조

매핑된 타입의 구문은 매우 구체적이며 다음과 같은 일반적인 구조를 따릅니다:

type NewType = { 
  [Key in KeysType]: ValueType;
};

각 구성 요소를 분석해 보겠습니다:

예제: 속성 타입 변환하기

객체의 모든 숫자 속성을 문자열로 변환해야 한다고 상상해 보세요. 매핑된 타입을 사용하여 다음과 같이 할 수 있습니다:

interface Product {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

type StringifiedProduct = {
  [K in keyof Product]: Product[K] extends number ? string : Product[K];
};

이 경우, 우리는 다음을 수행합니다:

결과적으로 StringifiedProduct 타입은 다음과 같습니다:

{
  id: string;
  name: string;
  price: string;
  quantity: string;
}

주요 기능 및 기법

1. keyof 및 인덱스 시그니처 사용하기

앞서 보여드렸듯이, keyof는 매핑된 타입 작업을 위한 기본적인 도구입니다. 이를 통해 타입의 키를 순회할 수 있습니다. 인덱스 시그니처는 키를 미리 알지 못하지만 여전히 변환하고 싶을 때 속성의 타입을 정의하는 방법을 제공합니다.

예제: 인덱스 시그니처를 기반으로 모든 속성 변환하기

interface StringMap {
  [key: string]: number;
}

type StringMapToString = {
  [K in keyof StringMap]: string;
};

여기서 StringMap의 모든 숫자 값은 새 타입 내에서 문자열로 변환됩니다.

2. 매핑된 타입 내의 조건부 타입

조건부 타입은 조건에 따라 타입 관계를 표현할 수 있게 해주는 TypeScript의 강력한 기능입니다. 매핑된 타입과 결합하면 매우 정교한 변환이 가능해집니다.

예제: 타입에서 Null 및 Undefined 제거하기

type NonNullableProperties = {
  [K in keyof T]: T[K] extends (null | undefined) ? never : T[K];
};

이 매핑된 타입은 T 타입의 모든 키를 순회하고 조건부 타입을 사용하여 값이 null 또는 undefined를 허용하는지 확인합니다. 만약 그렇다면 타입은 never로 평가되어 해당 속성을 효과적으로 제거합니다. 그렇지 않으면 원래 타입을 유지합니다. 이 접근 방식은 잠재적으로 문제가 될 수 있는 null 또는 undefined 값을 제외하여 타입을 더 견고하게 만들고, 코드 품질을 향상시키며, 글로벌 소프트웨어 개발을 위한 모범 사례와 일치합니다.

3. 효율성을 위한 유틸리티 타입

TypeScript는 일반적인 타입 조작 작업을 단순화하는 내장 유틸리티 타입을 제공합니다. 이러한 타입들은 내부적으로 매핑된 타입을 활용합니다.

예제: Pick 및 Omit 사용하기

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}

type UserSummary = Pick;
// { id: number; name: string; }

type UserWithoutEmail = Omit;
// { id: number; name: string; role: string; }

이러한 유틸리티 타입은 반복적인 매핑된 타입 정의를 작성하는 수고를 덜어주고 코드 가독성을 향상시킵니다. 특히 글로벌 개발에서 사용자의 권한이나 애플리케이션의 컨텍스트에 따라 다른 뷰나 데이터 접근 수준을 관리하는 데 유용합니다.

실제 적용 사례 및 예제

1. 데이터 유효성 검사 및 변환

매핑된 타입은 외부 소스(API, 데이터베이스, 사용자 입력)로부터 받은 데이터를 검증하고 변환하는 데 매우 유용합니다. 이는 다양한 소스로부터 데이터를 처리하고 데이터 무결성을 보장해야 하는 글로벌 애플리케이션에서 매우 중요합니다. 데이터 타입 유효성 검사와 같은 특정 규칙을 정의하고, 이러한 규칙에 따라 데이터 구조를 자동으로 수정할 수 있습니다.

예제: API 응답 변환하기

interface ApiResponse {
  userId: string;
  id: string;
  title: string;
  completed: boolean;
}

type CleanedApiResponse = {
  [K in keyof ApiResponse]:
    K extends 'userId' | 'id' ? number :
    K extends 'title' ? string :
    K extends 'completed' ? boolean : any;
};

이 예제는 (원래 API에서 문자열이었던) userId와 id 속성을 숫자로 변환합니다. title 속성은 올바르게 문자열로 타이핑되고, completed는 boolean으로 유지됩니다. 이는 데이터 일관성을 보장하고 후속 처리에서 발생할 수 있는 오류를 방지합니다.

2. 재사용 가능한 컴포넌트 Props 생성하기

React 및 다른 UI 프레임워크에서 매핑된 타입은 재사용 가능한 컴포넌트 props 생성을 단순화할 수 있습니다. 이는 다양한 로케일과 사용자 인터페이스에 적응해야 하는 글로벌 UI 컴포넌트를 개발할 때 특히 중요합니다.

예제: 지역화 처리하기

interface TextProps {
  textId: string;
  defaultText: string;
  locale: string;
}

type LocalizedTextProps = {
  [K in keyof TextProps as `localized-${K}`]: TextProps[K];
};

이 코드에서 새로운 타입인 LocalizedTextProps는 TextProps의 각 속성 이름에 접두사를 붙입니다. 예를 들어, textId는 컴포넌트 props를 설정하는 데 유용한 localized-textId가 됩니다. 이 패턴은 사용자의 로케일에 따라 동적으로 텍스트를 변경할 수 있는 props를 생성하는 데 사용될 수 있습니다. 이는 전자 상거래 애플리케이션이나 국제 소셜 미디어 플랫폼과 같이 다양한 지역과 언어에서 원활하게 작동하는 다국어 사용자 인터페이스를 구축하는 데 필수적입니다. 변환된 props는 개발자에게 지역화에 대한 더 많은 제어권을 제공하고 전 세계적으로 일관된 사용자 경험을 만들 수 있는 능력을 부여합니다.

3. 동적 폼 생성

매핑된 타입은 데이터 모델을 기반으로 동적으로 폼 필드를 생성하는 데 유용합니다. 글로벌 애플리케이션에서는 다양한 사용자 역할이나 데이터 요구 사항에 적응하는 폼을 만드는 데 유용할 수 있습니다.

예제: 객체 키를 기반으로 폼 필드 자동 생성하기

interface UserProfile {
  firstName: string;
  lastName: string;
  email: string;
  phoneNumber: string;
}

type FormFields = {
  [K in keyof UserProfile]: {
    label: string;
    type: string;
    required: boolean;
  };
};

이를 통해 UserProfile 인터페이스의 속성을 기반으로 폼 구조를 정의할 수 있습니다. 이는 수동으로 폼 필드를 정의할 필요가 없게 하여 애플리케이션의 유연성과 유지보수성을 향상시킵니다.

고급 매핑된 타입 기법

1. 키 리매핑 (Key Remapping)

TypeScript 4.1에서는 매핑된 타입에 키 리매핑 기능이 도입되었습니다. 이를 통해 타입을 변환하면서 키의 이름을 바꿀 수 있습니다. 이는 타입을 다른 API 요구 사항에 맞추거나 더 사용자 친화적인 속성 이름을 만들고 싶을 때 특히 유용합니다.

예제: 속성 이름 변경하기

interface Product {
  productId: number;
  productName: string;
  productDescription: string;
  price: number;
}

type ProductDto = {
  [K in keyof Product as `dto_${K}`]: Product[K];
};

이는 Product 타입의 각 속성 이름을 dto_로 시작하도록 변경합니다. 이는 다른 이름 규칙을 사용하는 데이터 모델과 API 간에 매핑할 때 유용합니다. 애플리케이션이 특정 이름 규칙을 가질 수 있는 여러 백엔드 시스템과 인터페이스하는 국제 소프트웨어 개발에서 원활한 통합을 가능하게 하므로 중요합니다.

2. 조건부 키 리매핑

키 리매핑을 조건부 타입과 결합하여 특정 기준에 따라 속성의 이름을 바꾸거나 제외하는 등 더 복잡한 변환을 수행할 수 있습니다. 이 기법은 정교한 변환을 가능하게 합니다.

예제: DTO에서 속성 제외하기


interface Product {
    id: number;
    name: string;
    description: string;
    price: number;
    category: string;
    isActive: boolean;
}

type ProductDto = {
    [K in keyof Product as K extends 'description' | 'isActive' ? never : K]: Product[K]
}

여기서 description과 isActive 속성은 키가 'description' 또는 'isActive'일 경우 never로 해석되기 때문에 생성된 ProductDto 타입에서 효과적으로 제거됩니다. 이를 통해 다양한 작업에 필요한 데이터만 포함하는 특정 데이터 전송 객체(DTO)를 생성할 수 있습니다. 이러한 선택적 데이터 전송은 글로벌 애플리케이션의 최적화와 개인 정보 보호에 매우 중요합니다. 데이터 전송 제한은 관련 데이터만 네트워크를 통해 전송되도록 보장하여 대역폭 사용량을 줄이고 사용자 경험을 향상시킵니다. 이는 글로벌 개인 정보 보호 규정과도 일치합니다.

3. 제네릭과 함께 매핑된 타입 사용하기

매핑된 타입은 제네릭과 결합하여 매우 유연하고 재사용 가능한 타입 정의를 만들 수 있습니다. 이를 통해 다양한 타입을 처리할 수 있는 코드를 작성할 수 있으며, 코드의 재사용성과 유지보수성을 크게 높여 대규모 프로젝트나 국제 팀에서 특히 유용합니다.

예제: 객체 속성 변환을 위한 제네릭 함수


function transformObjectValues(obj: T, transform: (value: T[K]) => U): {
    [P in keyof T]: U;
} {
    const result: any = {};
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            result[key] = transform(obj[key]);
        }
    }
    return result;
}

interface Order {
    id: number;
    items: string[];
    total: number;
}

const order: Order = {
    id: 123,
    items: ['apple', 'banana'],
    total: 5.99,
};

const stringifiedOrder = transformObjectValues(order, (value) => String(value));
// stringifiedOrder: { id: string; items: string; total: string; }

이 예제에서 transformObjectValues 함수는 제네릭(T, K, U)을 활용하여 T 타입의 객체(obj)와 T의 단일 속성을 받아 U 타입의 값을 반환하는 변환 함수를 인자로 받습니다. 그런 다음 이 함수는 원래 객체와 동일한 키를 가지지만 값은 U 타입으로 변환된 새로운 객체를 반환합니다.

모범 사례 및 고려 사항

1. 타입 안정성과 코드 유지보수성

TypeScript와 매핑된 타입의 가장 큰 이점 중 하나는 향상된 타입 안정성입니다. 명확한 타입을 정의함으로써 개발 초기에 오류를 발견하여 런타임 버그의 가능성을 줄일 수 있습니다. 특히 대규모 프로젝트에서 코드를 추론하고 리팩토링하기 쉽게 만듭니다. 또한, 매핑된 타입을 사용하면 소프트웨어가 전 세계 수백만 사용자의 요구에 맞게 확장될 때 오류 발생 가능성이 줄어듭니다.

2. 가독성과 코드 스타일

매핑된 타입은 강력할 수 있지만, 명확하고 읽기 쉬운 방식으로 작성하는 것이 중요합니다. 의미 있는 변수 이름을 사용하고 복잡한 변환의 목적을 설명하기 위해 코드에 주석을 다세요. 코드의 명확성은 모든 배경의 개발자가 코드를 읽고 이해할 수 있도록 보장합니다. 스타일링, 이름 지정 규칙 및 서식의 일관성은 코드를 더 접근하기 쉽게 만들고, 특히 다른 멤버가 소프트웨어의 다른 부분을 작업하는 국제 팀에서 더 원활한 개발 프로세스에 기여합니다.

3. 과용과 복잡성

매핑된 타입의 과용을 피하세요. 강력하지만, 과도하게 사용되거나 더 간단한 해결책이 있을 때 코드를 덜 읽기 쉽게 만들 수 있습니다. 간단한 인터페이스 정의나 간단한 유틸리티 함수가 더 적절한 해결책이 될 수 있는지 고려해 보세요. 타입이 지나치게 복잡해지면 이해하고 유지하기 어려울 수 있습니다. 항상 타입 안정성과 코드 가독성 사이의 균형을 고려하세요. 이 균형을 맞추는 것은 국제 팀의 모든 멤버가 코드베이스를 효과적으로 읽고, 이해하고, 유지할 수 있도록 보장합니다.

4. 성능

매핑된 타입은 주로 컴파일 시간의 타입 검사에 영향을 미치며 일반적으로 상당한 런타임 성능 오버헤드를 유발하지 않습니다. 그러나 지나치게 복잡한 타입 조작은 컴파일 프로세스를 느리게 할 수 있습니다. 복잡성을 최소화하고, 특히 대규모 프로젝트나 다른 시간대에 걸쳐 다양한 리소스 제약을 가진 팀의 경우 빌드 시간에 미치는 영향을 고려하세요.

결론

TypeScript 매핑된 타입은 객체 형태를 동적으로 변환하기 위한 강력한 도구 모음을 제공합니다. 복잡한 데이터 모델, API 상호 작용 및 UI 컴포넌트 개발을 다룰 때 특히 타입 안전하고, 유지보수 가능하며, 재사용 가능한 코드를 구축하는 데 매우 중요합니다. 매핑된 타입을 마스터함으로써 더 견고하고 적응력 있는 애플리케이션을 작성하여 글로벌 시장을 위한 더 나은 소프트웨어를 만들 수 있습니다. 국제 팀과 글로벌 프로젝트의 경우, 매핑된 타입을 사용하면 견고한 코드 품질과 유지보수성을 확보할 수 있습니다. 여기서 논의된 기능들은 적응력 있고 확장 가능한 소프트웨어를 구축하고, 코드 유지보수성을 향상시키며, 전 세계 사용자에게 더 나은 경험을 제공하는 데 중요합니다. 매핑된 타입은 새로운 기능, API 또는 데이터 모델이 추가되거나 수정될 때 코드를 더 쉽게 업데이트할 수 있도록 합니다.

TypeScript 매핑된 타입(Mapped Types)을 활용한 동적 객체 변환: 종합 가이드 | MLOG