고급 TypeScript 패턴: 조건부 및 매핑된 타입 마스터

TypeScript의 강점은 강력한 타이핑을 제공하여 오류를 조기에 감지하고 유지 관리가 용이한 코드를 작성할 수 있다는 것입니다. string, number 및 boolean과 같은 기본 타입이 기본이지만, 조건부 및 매핑된 타입과 같은 TypeScript의 고급 기능은 유연성과 타입 안전성의 새로운 차원을 열어줍니다. 이 포괄적인 가이드는 이러한 강력한 개념을 자세히 살펴보고 진정으로 동적이고 적응 가능한 TypeScript 애플리케이션을 만들 수 있는 지식을 제공합니다.

조건부 타입이란 무엇입니까?

조건부 타입을 사용하면 JavaScript의 삼항 연산자(condition ? trueValue : falseValue)와 유사하게 조건에 따라 달라지는 타입을 정의할 수 있습니다. 이를 통해 타입이 특정 제약 조건을 충족하는지 여부에 따라 복잡한 타입 관계를 표현할 수 있습니다.

구문

조건부 타입의 기본 구문은 다음과 같습니다.

            T extends U ? X : Y
            

              
                Copy
              
            
          

• T: 확인 중인 타입입니다.
• U: 비교할 타입입니다.
• extends: 서브타입 관계를 나타내는 키워드입니다.
• X: T가 U에 할당 가능한 경우 사용할 타입입니다.
• Y: T가 U에 할당할 수 없는 경우 사용할 타입입니다.

본질적으로 T extends U가 true로 평가되면 타입은 X로 확인되고, 그렇지 않으면 Y로 확인됩니다.

실용적인 예

1. 함수 매개변수의 타입 결정

함수 매개변수가 문자열인지 숫자인지 확인하는 타입을 만들고 싶다고 가정해 보겠습니다.

            type ParamType<T> = T extends string ? string : number;

function processValue(value: ParamType<string | number>): void {
  if (typeof value === "string") {
    console.log("Value is a string:", value);
  } else {
    console.log("Value is a number:", value);
  }
}

processValue("hello"); // Output: Value is a string: hello
processValue(123);     // Output: Value is a number: 123
            

              
                Copy
              
            
          

이 예에서 ParamType<T>는 조건부 타입입니다. T가 문자열이면 타입은 string으로 확인되고, 그렇지 않으면 number로 확인됩니다. processValue 함수는 이 조건부 타입에 따라 문자열 또는 숫자를 허용합니다.

2. 입력 타입에 따른 반환 타입 추출

입력에 따라 다른 타입을 반환하는 함수가 있는 시나리오를 상상해 보십시오. 조건부 타입은 올바른 반환 타입을 정의하는 데 도움이 될 수 있습니다.

            interface StringProcessor {
  process(input: string): number;
}

interface NumberProcessor {
  process(input: number): string;
}

type Processor<T> = T extends string ? StringProcessor : NumberProcessor;

function createProcessor<T extends string | number>(input: T): Processor<T> {
  if (typeof input === "string") {
    return { process: (input: string) => input.length } as Processor<T>;
  } else {
    return { process: (input: number) => input.toString() } as Processor<T>;
  }
}

const stringProcessor = createProcessor("example");
const numberProcessor = createProcessor(42);

console.log(stringProcessor.process("example")); // Output: 7
console.log(numberProcessor.process(42));    // Output: "42"
            

              
                Copy
              
            
          

여기에서 Processor<T> 타입은 입력 타입에 따라 StringProcessor 또는 NumberProcessor를 조건부로 선택합니다. 이렇게 하면 createProcessor 함수가 올바른 타입의 프로세서 객체를 반환합니다.

3. 차별된 유니온

조건부 타입은 차별된 유니온으로 작업할 때 매우 강력합니다. 차별된 유니온은 각 멤버가 공통의 단일톤 타입 속성(차별자)을 갖는 유니온 타입입니다. 이를 통해 해당 속성의 값을 기반으로 타입을 좁힐 수 있습니다.

            interface Square {
  kind: "square";
  size: number;
}

interface Circle {
  kind: "circle";
  radius: number;
}

type Shape = Square | Circle;

type Area<T extends Shape> = T extends { kind: "square" } ? number : string;

function calculateArea(shape: Shape): Area<typeof shape> {
  if (shape.kind === "square") {
    return shape.size * shape.size;
  } else {
    return Math.PI * shape.radius * shape.radius;
  }
}

const mySquare: Square = { kind: "square", size: 5 };
const myCircle: Circle = { kind: "circle", radius: 3 };

console.log(calculateArea(mySquare)); // Output: 25
console.log(calculateArea(myCircle)); // Output: 28.274333882308138
            

              
                Copy
              
            
          

이 예제에서 Shape 타입은 차별된 유니온입니다. Area<T> 타입은 조건부 타입을 사용하여 도형이 사각형인지 원인지 확인하고, 사각형의 경우 number를 반환하고 원의 경우 string을 반환합니다(실제 시나리오에서는 일관된 반환 타입을 원할 수 있지만, 이것은 원리를 보여줍니다).

조건부 타입에 대한 주요 내용

• 조건에 따라 타입을 정의할 수 있습니다.
• 복잡한 타입 관계를 표현하여 타입 안전성을 향상시킵니다.
• 함수 매개변수, 반환 타입 및 차별된 유니온 작업에 유용합니다.

매핑된 타입이란 무엇입니까?

매핑된 타입은 속성을 매핑하여 기존 타입을 변환하는 방법을 제공합니다. 이를 통해 다른 타입의 속성을 기반으로 새 타입을 만들고 선택적, 읽기 전용으로 만들거나 타입을 변경하는 등 수정을 적용할 수 있습니다.

구문

매핑된 타입의 일반적인 구문은 다음과 같습니다.

            type NewType<T> = {
  [K in keyof T]: ModifiedType;
};

            

              
                Copy
              
            
          

• T: 입력 타입입니다.
• keyof T: T의 모든 속성 키의 유니온을 반환하는 타입 연산자입니다.
• K in keyof T: keyof T의 각 키를 반복하여 각 키를 타입 변수 K에 할당합니다.
• ModifiedType: 각 속성이 매핑될 타입입니다. 여기에는 조건부 타입 또는 기타 타입 변환이 포함될 수 있습니다.

실용적인 예

1. 속성 선택적으로 만들기

매핑된 타입을 사용하여 기존 타입의 모든 속성을 선택적으로 만들 수 있습니다.

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

type PartialUser = {
  [K in keyof User]?: User[K];
};

const partialUser: PartialUser = {
  name: "John Doe",
}; // Valid, as 'id' and 'email' are optional
            

              
                Copy
              
            
          

여기에서 PartialUser는 User 인터페이스의 키를 반복하는 매핑된 타입입니다. 각 키 K에 대해 ? 수식어를 추가하여 속성을 선택적으로 만듭니다. User[K]는 User 인터페이스에서 속성 K의 타입을 검색합니다.

2. 속성 읽기 전용으로 만들기

마찬가지로, 기존 타입의 모든 속성을 읽기 전용으로 만들 수 있습니다.

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

type ReadonlyProduct = {
  readonly [K in keyof Product]: Product[K];
};

const readonlyProduct: ReadonlyProduct = {
  id: 123,
  name: "Example Product",
  price: 25.00,
};

// readonlyProduct.price = 30.00; // Error: Cannot assign to 'price' because it is a read-only property.
            

              
                Copy
              
            
          

이 경우 ReadonlyProduct는 Product 인터페이스의 각 속성에 readonly 수식어를 추가하는 매핑된 타입입니다.

3. 속성 타입 변환

매핑된 타입을 사용하여 속성의 타입을 변환할 수도 있습니다. 예를 들어 모든 문자열 속성을 숫자로 변환하는 타입을 만들 수 있습니다.

            interface Config {
  apiUrl: string;
  timeout: string;
  maxRetries: number;
}

type NumericConfig = {
  [K in keyof Config]: Config[K] extends string ? number : Config[K];
};

const numericConfig: NumericConfig = {
  apiUrl: 123, // Must be a number due to the mapping
  timeout: 456, // Must be a number due to the mapping
  maxRetries: 3,
};

            

              
                Copy
              
            
          

이 예제는 매핑된 타입 내에서 조건부 타입을 사용하는 것을 보여줍니다. 각 속성 K에 대해 Config[K]의 타입이 문자열인지 확인합니다. 그렇다면 타입은 number로 매핑되고, 그렇지 않으면 변경되지 않은 상태로 유지됩니다.

4. 키 재매핑(TypeScript 4.1 이후)

TypeScript 4.1에서는 as 키워드를 사용하여 매핑된 타입 내에서 키를 다시 매핑하는 기능을 도입했습니다. 이를 통해 원래 타입을 기반으로 다른 속성 이름으로 새 타입을 만들 수 있습니다.

            interface Event {
  eventId: string;
  eventName: string;
  eventDate: Date;
}

type TransformedEvent = {
  [K in keyof Event as `new${Capitalize<string&K>}`]: Event[K];
};

// Result:
// {
//   newEventId: string;
//   newEventName: string;
//   newEventDate: Date;
// }

//Capitalize function used to Capitalize first letter
type Capitalize<S extends string> = Uppercase<string&S> extends never ? string :  `$Capitalize<S>`;

//Usage with an actual object
const myEvent: TransformedEvent = {
    newEventId: "123",
    newEventName: "New Name",
    newEventDate: new Date()
};

            

              
                Copy
              
            
          

여기에서 TransformedEvent 타입은 각 키 K를 "new"로 시작하고 대문자로 시작하는 새 키로 다시 매핑합니다. `Capitalize` 유틸리티 함수는 키의 첫 글자가 대문자인지 확인합니다. `string & K` 교차는 우리가 문자열 키만 처리하고 K에서 올바른 리터럴 유형을 가져오는지 확인합니다. 키 재매핑은 특정 요구 사항에 따라 타입을 변환하고 조정하는 강력한 가능성을 엽니다. 이를 통해 복잡한 논리를 기반으로 키의 이름을 바꾸거나, 필터링하거나 수정할 수 있습니다.

매핑된 타입에 대한 주요 내용

• 속성을 매핑하여 기존 타입을 변환할 수 있습니다.
• 속성을 선택적으로, 읽기 전용으로 만들거나 타입을 변경할 수 있습니다.
• 다른 타입의 속성을 기반으로 새 타입을 만드는 데 유용합니다.
• 키 재매핑(TypeScript 4.1에 도입)은 타입 변환에서 더욱 뛰어난 유연성을 제공합니다.

조건부 및 매핑된 타입 결합

조건부 및 매핑된 타입의 진정한 힘은 이들을 결합할 때 나옵니다. 이를 통해 광범위한 시나리오에 적응할 수 있는 매우 유연하고 표현력이 풍부한 타입 정의를 만들 수 있습니다.

예: 타입별 속성 필터링

객체의 속성을 해당 타입을 기반으로 필터링하는 타입을 만들고 싶다고 가정해 보겠습니다. 예를 들어 객체에서 문자열 속성만 추출할 수 있습니다.

            interface Data {
  name: string;
  age: number;
  city: string;
  country: string;
  isEmployed: boolean;
}

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

type StringData = StringProperties<Data>;

// Result:
// {
//   name: string;
//   city: string;
//   country: string;
// }

const stringData: StringData = {
  name: "John",
  city: "New York",
  country: "USA",
};

            

              
                Copy
              
            
          

이 예에서 StringProperties<T> 타입은 키 재매핑 및 조건부 타입을 사용하여 매핑된 타입을 사용합니다. 각 속성 K에 대해 T[K]의 타입이 문자열인지 확인합니다. 그렇다면 키가 유지되고, 그렇지 않으면 never로 매핑되어 효과적으로 필터링됩니다. 매핑된 타입 키로 never는 결과 타입에서 제거합니다. 이렇게 하면 문자열 속성만 StringData 타입에 포함됩니다.

TypeScript의 유틸리티 타입

TypeScript는 조건부 및 매핑된 타입을 활용하여 일반적인 타입 변환을 수행하는 몇 가지 기본 제공 유틸리티 타입을 제공합니다. 이러한 유틸리티 타입을 이해하면 코드를 크게 단순화하고 타입 안전성을 향상시킬 수 있습니다.

일반적인 유틸리티 타입

• Partial<T>: T의 모든 속성을 선택적으로 만듭니다.
• Readonly<T>: T의 모든 속성을 읽기 전용으로 만듭니다.
• Required<T>: T의 모든 속성을 필수 항목으로 만듭니다(? 수식어 제거).
• Pick<T, K extends keyof T>: T에서 속성 집합 K를 선택합니다.
• Omit<T, K extends keyof T>: T에서 속성 집합 K를 제거합니다.
• Record<K extends keyof any, T>: 타입 T의 속성 집합 K로 타입을 구성합니다.
• Exclude<T, U>: U에 할당 가능한 모든 타입을 T에서 제외합니다.
• Extract<T, U>: U에 할당 가능한 모든 타입을 T에서 추출합니다.
• NonNullable<T>: null 및 undefined를 T에서 제외합니다.
• Parameters<T>: 튜플에서 함수 타입 T의 매개변수를 가져옵니다.
• ReturnType<T>: 함수 타입 T의 반환 타입을 가져옵니다.
• InstanceType<T>: 생성자 함수 타입 T의 인스턴스 타입을 가져옵니다.
• ThisType<T>: 컨텍스트 this 타입의 마커 역할을 합니다.

이러한 유틸리티 타입은 조건부 및 매핑된 타입을 사용하여 구축되었으며, 이러한 고급 TypeScript 기능의 강력함과 유연성을 보여줍니다. 예를 들어 Partial<T>는 다음과 같이 정의됩니다.

            type Partial<T> = {
  [P in keyof T]?: T[P];
};
            

              
                Copy
              
            
          

조건부 및 매핑된 타입 사용을 위한 모범 사례

조건부 및 매핑된 타입은 강력하지만, 신중하게 사용하지 않으면 코드를 더 복잡하게 만들 수도 있습니다. 다음은 염두에 두어야 할 몇 가지 모범 사례입니다.

• 단순하게 유지: 지나치게 복잡한 조건부 및 매핑된 타입을 사용하지 마십시오. 타입 정의가 너무 복잡해지면 더 작고 관리하기 쉬운 부분으로 나누는 것을 고려하십시오.
• 의미 있는 이름 사용: 조건부 및 매핑된 타입에 목적을 명확하게 나타내는 설명적인 이름을 지정합니다.
• 타입 문서화: 특히 복잡한 경우 조건부 및 매핑된 타입 뒤에 있는 논리를 설명하는 주석을 추가하십시오.
• 유틸리티 타입 활용: 사용자 지정 조건부 또는 매핑된 타입을 만들기 전에 내장 유틸리티 타입이 동일한 결과를 얻을 수 있는지 확인합니다.
• 타입 테스트: 다양한 시나리오를 다루는 단위 테스트를 작성하여 조건부 및 매핑된 타입이 예상대로 작동하는지 확인하십시오.
• 성능 고려: 복잡한 타입 계산은 컴파일 시간에 영향을 미칠 수 있습니다. 타입 정의의 성능 영향을 염두에 두십시오.

결론

조건부 및 매핑된 타입은 TypeScript를 마스터하기 위한 필수 도구입니다. 이를 통해 복잡한 데이터 구조 및 동적 요구 사항에 적응하는 매우 유연하고 타입 안전하며 유지 관리가 용이한 애플리케이션을 만들 수 있습니다. 이 가이드에서 논의된 개념을 이해하고 적용함으로써 TypeScript의 모든 잠재력을 활용하고 보다 강력하고 확장 가능한 코드를 작성할 수 있습니다. TypeScript를 계속 탐구하면서, 도전적인 타이핑 문제를 해결할 수 있는 새로운 방법을 찾기 위해 조건부 및 매핑된 타입의 다양한 조합을 실험하는 것을 잊지 마십시오. 가능성은 정말 무궁무진합니다.