Typescript - Intersection Type

Intersection Type

인터섹션 타입은 여러 타입을 모두 만족하는 하나의 타입을 의미한다.

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: number;
}
type Capt = Person & Developer;

저번 유니온 타입에서의 예제를 다시 가져와 보자

interface Developer {
    name: string;
}

interface Person {
    name: string;
    age: number;
}

function askSomeone(someone: Developer | Person) {
    someone.name; // <- 접근 가능
    someone.age; // <- 에러 발생
}

유니온 타입에서는 someone이 Developer 이거나 Person이기 때문에
age는 확정적인 속성이 아니라 에러가 발생하고 name 속성에만 접근이 가능하다.

인터섹션 타입의 잘못된 사용

let capt: string & number & boolean; // <- never

capt 변수에 마우스를 호버하면 never라고 뜨는데 string number boolean 타입이 동시에 적용되지 않기 때문이다.

유니온 vs 인터섹션

인터페이스를 바탕으로 유니온 타입과 인터섹션을 사용하였을때에 차이점은 예시를 통해 설명하겠다.

interface Developer {
    name: string;
    skill: string;
}

interface Person {
    name: string;
    age: number;
}

function askSomeone(someone: Developer | Person) {
    someone.name; // <- 접근 가능
    someone.age; // <- 에러 발생
}

askSomeone({ name: '디벨로퍼', skill: '웹 개발'})
askSomeone({ name: '캡틴', age: 100 });

유니온 타입으로 타입을 설정하였을때에는
지정한 타입내에서 위와 같이 두가지의 속성 타입을 사용하여 함수 실행이 가능하다.

하지만 앞서 설명하였듯이 함수 내부 스코프에서는 같은 속성으로 접근이 불가능하여 타입가드를 사용해야한다.

interface Developer {
    name: string;
    skill: string;
}

interface Person {
    name: string;
    age: number;
}

function askSomeone(someone: Developer & Person) {
    someone.name;
    someone.age;
}

askSomeone({ name: '디벨로퍼', skill: '웹 개발', age: 34})

인터섹션으로 타입을 설정하였을때에는
두 인터페이스 타입을 모두 포함한 속성과 타입을 전달해야지만 함수 실행이 가능하다.

반면 함수 내부 스코프에서는 하나의 파라미터로 모든 속성에 접근이 가능하다.