[Typescript] 6장 유니언 타입과 교차 타입

1.유니언 타입과 공통 필드

유니언 타입은 여러 타입 중 하나를 가질 수 있는 타입으로, 공통 필드를 가진 유니언 타입을 만들 때 다음과 같이 정의할 수 있습니다.

interface Cat {
    type: 'cat';
    meow: () => void;
}

interface Dog {
    type: 'dog';
    bark: () => void;
}

type Pet = Cat | Dog;

 

여기서 Pet 타입은 Cat 도는 Dog를 의미하며, 두 타입 모두 type이라는 공통 필드를 가지고 있습니다.

---

2.유니언 구별하기

유니언 타입을 구별하기 위해서는 타입 가드를 사용할 수 있습니다.

function handlePet(pet: Pet) {
    if (pet.type === "cat") {
       pet.meow(); // Cat 메서드 호출     
    } else {
        pet.bark(); // Dog 메서드 호출
    }
}

---

3. 교차 타입( Intersection Types)

교차 타입은 여러 타입을 결합하여 새로운 타입을 만드는 방법으로, 이를 통해서 믹스인을 만들 수 있습니다.

interface Swimmer {
    swim: () => void;
}

interface Flyer {
    fly: () => void;
}

type FlyFlash = Swimmer & Flyer;

const flyingFish: FlyFlash = {
    swim: () => console.log("Swimming"),
    fly: () => console.log("Flying")
    
}

---

4. 믹스인 패턴

교차 타입을 활용해 믹스인을 구현할 수 있습니다.

class Person {
    constructor(public name: string) {}
}

interface Loggable {
    log(name: string): void;
}

class ConsoleLogger implements Loggable {
    log(name: string) {
        console.log(`Hello, I'm a ${name}`);
    }
}

function extend<First extends {}, Second extends {}>(
    first: First,
    second: Second
): First & Second {
    const result: Partial<First & Second> = {};

    // first의 프로퍼티 복사
    for (const prop in first) {
        if (first.hasOwnProperty(prop)) {
            (result as First)[prop] = first[prop];
        }
    }

    // second의 프로퍼티 복사
    for (const prop in second) {
        if (second.hasOwnProperty(prop)) {
            (result as Second)[prop] = second[prop];
        }
    }

    return result as First & Second;
}

// ConsoleLogger의 인스턴스를 생성
const logger = new ConsoleLogger();
const jak = extend(new Person("jak"), logger);

// jak 객체에서 log 메서드 사용
jak.log = logger.log.bind(logger); // log 메서드를 바인딩
jak.log(jak.name); // "Hello, I'm a jak"

---

 

GitHub - Koras02/typescript-bloging