본문 바로가기
IT/typescript

[typescript] Union & Intersection

by 내일은교양왕 2024. 3. 17.

정리

Union Type에서의 교집합, 합집합과 구조적 타입에서의 교집합, 합집합의 개념은 다르다.

구조적 타이핑은 객체가 어떤 타입에 부합하는 최소한의 특징을 가지고 있다면, 그 타입에 해당하는 것으로 간주한다.

 

Union Type

여러 타입 중 하나를 가질 수 있다.

 

 

개념은 너무 쉬워서 넘어가고, 

값을 넣을 때는 합친 타입 중 아무거나 넣으면 되고,

사용할 때는 어떤 타입을 사용할 것인지 확인 후 사용. 즉, Narrowing해서 사용 

단, 사용할 로직이 어느 타입이든 상관없다면 Narrowing 할 필요는 없음

function printId(id: number | string) {
    if (typeof id === 'number') {
        console.log(`${id} is number`)
    }
    else if (typeof id === 'string') {
        console.log(id.toUpperCase())
    }
}

printId(1)
printId('hello world')

 

 

**구조적 타이핑 관점에서 바라보는 Union Type

합집합을 교집합으로 생각해라 / Bird에 속하거나 Fish에 속하거나 

두 집합과 각각의 집합에 대한 특성이 주어졌을 때, 두집합의 합집합에는 각각의 특성들의 교집합만이 적용된다.

typescript에서는 반환된 타입이 어떤것인지 알 수 없기 때문이다. 

interface Bird {
    fly(): void;
    layEggs(): void;
}

interface Fish {
    swim(): void;
    layEggs(): void;
}

declare function getSmallPet(): Fish | Bird;

const pet = getSmallPet()
pet.layEggs()
pet.swim() // error

 

 

교집합을 합집합으로

둘다 가지는 값은 인터섹션 타입이 속함. 이유는 교집합이 되려면 어느쪽으로 간주해도 무리가 없어야 한다. 타입 관점에서는 양 쪽 모두 속해야 교집합 (구조적 타이핑 개념 때문에...)

declare function getSmallPet(): Fish | Bird;

const pet = getSmallPet()
pet.layEggs()
pet.swim()

 

 

Intersection Type

여러 타입을 모두 만족하는 새로운 타입을 생성.

type Person = { name: string };
type Employee = { employeeId: number };

type EmployeeDetails = Person & Employee;

const employee: EmployeeDetails = {
    name: "John",
    employeeId: 12345
};

 

 

https://blog.hwahae.co.kr/all/tech/9954

 

집합의 관점에서 타입스크립트 바라보기 – 화해 블로그 | 기술 블로그

타입스크립트 유니온타입 프론트엔드에서 타입스크립트를 쓰는 것은 필수로 자리 잡고 있습니다. 타입을 작성하는 데 시간을 많이 쏟고 사용할 때에는 타입을 집합의 관점에서 바라보고 사용

blog-wp.hwahae.co.kr

 

https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html#%EC%9C%A0%EB%8B%88%EC%96%B8-%ED%83%80%EC%9E%85-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

 

Documentation - Everyday Types

언어의 원시 타입들.

www.typescriptlang.org

 

https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html

 

Handbook - Unions and Intersection Types

How to use unions and intersection types in TypeScript

www.typescriptlang.org