TypeScript Union 및 Intersection 유형

TypeScript는 더 안전하고 예측 가능한 코드를 작성하는 데 도움이 되는 강력한 유형 시스템 기능을 제공합니다. 이러한 기능 중에는 복잡한 유형을 정의하고 관리하는 데 유연성을 제공하는 union 및 interchange 유형이 있습니다. 이 문서에서는 이러한 개념을 소개하고 사용법을 설명하는 예를 제공합니다.

Union 유형은 무엇인가?

Union 타입은 변수가 다양한 타입의 값을 보유할 수 있도록 합니다. 이는 여러 타입 중 하나일 수 있는 값을 표현해야 할 때 유용합니다. Union 타입은 | (파이프) 기호를 사용하여 표시합니다.

Union 유형 정의

유니온 유형을 정의하려면 | 기호로 구분하여 여러 유형을 지정합니다.

let value: string | number;

value = "Hello, TypeScript"; // Valid
value = 42; // Valid
value = true; // Error: Type 'boolean' is not assignable to type 'string | number'

이 예에서 변수 value는 string 또는 number가 될 수 있지만, boolean가 될 수는 없습니다.

함수에서 Union 유형 사용

Union 유형은 매개변수 또는 반환 유형이 여러 유형일 수 있는 함수에서 특히 유용합니다.

function formatValue(value: string | number): string {
  if (typeof value === "string") {
    return value.toUpperCase();
  } else {
    return value.toFixed(2);
  }
}

console.log(formatValue("hello")); // Output: HELLO
console.log(formatValue(123.456)); // Output: 123.46

formatValue 함수는 string 또는 number 중 하나를 매개변수로 받아서 이에 따라 형식을 지정합니다.

교차로 유형은 무엇인가요?

교차 유형을 사용하면 여러 유형을 하나로 결합할 수 있습니다. 즉, 교차 유형의 값은 교차의 모든 유형을 충족합니다. 교차 유형은 & (앰퍼샌드) 기호를 사용하여 표시합니다.

교차 유형 정의

교차 유형을 정의하려면 & 기호로 구분된 여러 유형을 지정합니다.

interface Person {
  name: string;
}

interface Employee {
  employeeId: number;
}

type EmployeePerson = Person & Employee;

const john: EmployeePerson = {
  name: "John Doe",
  employeeId: 1234
};

console.log(john.name); // Output: John Doe
console.log(john.employeeId); // Output: 1234

이 예에서 EmployeePerson 유형은 Person 및 Employee 인터페이스를 결합하여 name 및 employeeId 속성을 모두 갖는 유형을 생성합니다.

함수에서 교차 유형 사용

교차 유형은 함수에서 여러 유형 속성을 요구하는 데에도 사용될 수 있습니다.

function printEmployeeDetails(employee: Person & Employee): void {
  console.log(`Name: ${employee.name}`);
  console.log(`Employee ID: ${employee.employeeId}`);
}

const jane: EmployeePerson = {
  name: "Jane Smith",
  employeeId: 5678
};

printEmployeeDetails(jane);
// Output:
// Name: Jane Smith
// Employee ID: 5678

printEmployeeDetails 함수에는 Person 및 Employee 유형을 모두 만족하는 인수가 필요합니다.

Union과 Intersection 유형 결합

복잡한 유형 정의를 생성하려면 Union 및 Intersection 유형을 결합할 수 있습니다.

type Shape = Circle | Rectangle;

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

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

function getArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius * shape.radius;
  } else {
    return shape.width * shape.height;
  }
}

const myCircle: Circle = { kind: "circle", radius: 10 };
const myRectangle: Rectangle = { kind: "rectangle", width: 20, height: 30 };

console.log(getArea(myCircle)); // Output: 314.159...
console.log(getArea(myRectangle)); // Output: 600

이 예에서 Shape 유형은 Circle와 Rectangle의 합집합이고, getArea 함수는 두 유형을 모두 적절히 처리합니다.

결론

TypeScript의 Union 및 Intersection 유형은 유형을 관리하고 결합하는 강력한 방법을 제공하여 유형 정의에서 유연성과 정확성을 제공합니다. Union 유형은 변수가 여러 유형 중 하나가 될 수 있도록 하는 반면 Intersection 유형은 여러 유형을 하나로 결합합니다. 이러한 기능을 사용하면 보다 강력하고 유형이 안전한 애플리케이션을 만들 수 있습니다.

Union과 Intersection 유형을 사용하는 연습을 통해 해당 유형의 기능에 익숙해지고 TypeScript 코딩 기술을 향상시키세요.