타입스크립트의 교차 타입

타입스크립트의 교차 타입

이 글은 타입스크립트의 교차 타입에 대해 설명합니다.

YouTube Video

타입스크립트의 교차 타입

타입스크립트에서 교차 타입은 여러 타입을 결합하여 새로운 타입을 만드는 방법입니다.

교차 타입이란 무엇인가요?

교차 타입은 여러 타입을 결합하여 해당 타입들에 속한 모든 속성을 포함하는 새로운 타입을 정의할 수 있게 해줍니다. 교차 타입은 & 기호를 사용하여 정의되며 각 구성 타입의 모든 속성을 요구합니다.

예제:

1type A = { name: string };
2type B = { age: number };
3
4type C = A & B;
5
6const person: C = {
7    name: "John Doe",
8    age: 30
9};

이 코드에서 type C = A & B로 정의하면, C 타입은 name (문자열 타입)과 age (숫자 타입) 속성을 가지는 객체 타입이 됩니다.

교차 타입의 장점

교차 타입을 사용하면 기존의 타입을 재사용하고 더 유연하고 복합적인 타입을 정의할 수 있습니다. 이는 코드의 유지보수성과 확장성을 향상시킵니다. 또한, 교차 타입은 여러 서로 다른 타입의 제약 조건을 동시에 적용할 수 있어 타입 안전성을 높여줍니다.

장점:

  • 재사용성: 여러 타입을 결합하여 중복 정의를 줄이고 기존 타입을 재사용할 수 있습니다.
  • 타입 안전성: 교차 타입은 여러 타입의 조건을 충족하는 객체만 허용하여 타입 검사를 강화합니다.

교차 타입의 사용 사례

교차 타입은 객체나 인터페이스를 확장할 때 매우 유용합니다. 특히, 다양한 속성을 가진 객체를 표현하고자 할 때 유용합니다.

사용 사례 1: 다중 인터페이스를 가진 객체

 1interface Drivable {
 2    drive(): void;
 3}
 4
 5interface Flyable {
 6    fly(): void;
 7}
 8
 9type Vehicle = Drivable & Flyable;
10
11const car: Vehicle = {
12    drive() {
13        console.log("Driving on the road");
14    },
15    fly() {
16        console.log("Flying in the sky");
17    }
18};
19
20car.drive(); // "Driving on the road"
21car.fly();   // "Flying in the sky"

이 예제에서 Vehicle 타입은 DrivableFlyable을 결합한 교차 타입으로 정의됩니다. Vehicle 타입의 객체는 drive()fly() 메서드를 모두 구현해야 합니다.

사용 사례 2: 클래스와 교차 타입 결합하기

클래스와 교차 타입을 결합함으로써 여러 인터페이스의 속성을 가진 객체를 생성할 수 있습니다.

 1interface Person {
 2    name: string;
 3}
 4
 5interface Employee {
 6    employeeId: number;
 7}
 8
 9type PersonEmployee = Person & Employee;
10
11class CompanyWorker implements PersonEmployee {
12    constructor(public name: string, public employeeId: number) {}
13
14    getDetails() {
15        return `${this.name}, Employee ID: ${this.employeeId}`;
16    }
17}
18
19const worker = new CompanyWorker("Alice", 123);
20console.log(worker.getDetails()); // "Alice, Employee ID: 123"

여기에서는 PersonEmployee의 교차 타입인 PersonEmployee를 사용하여 CompanyWorker 클래스가 두 가지 속성을 가지도록 합니다.

교차 타입 사용 시 고려할 점

교차 타입을 사용할 때 중요한 점은 속성 충돌 가능성을 인지하는 것입니다. 같은 이름의 속성이 다른 타입에서 서로 다른 타입 주석을 가지고 있으면 오류가 발생할 수 있습니다.

유의해야 할 예시:

1type A = { id: number };
2type B = { id: string };
3
4type C = A & B;
5
6// Error: Type 'number' and 'string' are not compatible
7const obj: C = {
8    id: 1
9};

이 예에서는 ABid 속성이 충돌하여 타입 C로 객체를 정의할 때 오류가 발생합니다. 이러한 경우 속성 충돌을 피하기 위해 설계 검토가 필요합니다.

교차 타입에 대한 타입 주석이 포함된 코드 예제

마지막으로 타입 주석이 포함된 실제 코드 예제를 소개합니다.

예제 1: 객체 세부 정보 표시

 1type ContactInfo = { phone: string; email: string };
 2type Address = { city: string; postalCode: string };
 3
 4type PersonDetails = ContactInfo & Address;
 5
 6const details: PersonDetails = {
 7    phone: "123-4567",
 8    email: "example@mail.com",
 9    city: "New York",
10    postalCode: "10001"
11};
12
13console.log(details);

예제 2: 추가 속성이 있는 객체

 1interface BasicInfo {
 2    name: string;
 3    age: number;
 4}
 5
 6interface WorkInfo {
 7    company: string;
 8    position: string;
 9}
10
11type FullInfo = BasicInfo & WorkInfo;
12
13const employee: FullInfo = {
14    name: "Bob",
15    age: 28,
16    company: "Tech Corp",
17    position: "Engineer"
18};
19
20console.log(`${employee.name} is a ${employee.position} at ${employee.company}`);

결론

TypeScript의 교차 타입은 여러 타입을 새로운 타입으로 결합할 수 있는 강력한 기능입니다. 이 기능은 코드 재사용성과 안전성을 높여주며 복잡한 타입 정의를 가능하게 합니다. 설계 유연성을 효과적으로 활용하면서 타입 충돌에 주의하면 안정적이고 가독성이 높은 코드를 작성할 수 있습니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video