이 포스팅은 DreamCoding 엘리님의 타입스크립트 강의와 캡틴판교님의 블로그 포스팅 복습하며 작성되었습니다.

Intersection

인터섹션 타입(Intersection Type)은 여러 타입을 모두 만족하는 하나의 타입을 의미합니다.

이전 포스팅에서 보았던 Union타입은 발생할 수 있는 모든 케이스 중 하나만 선택하는 or과 같은 성격이었다면, Intersection은 모든 걸 다 합한, and와 같은 성격을 가집니다.

예제

아래 코드는 인터페이스의 타입 정의 Student와 인터페이스의 타입 Worker를 & 연산자를 이용하여 합친 후 Intern 타입에 할당한 코드입니다.

type Student = {
  name: string;
  score: number;
};

type Worker = {
  employeeId: number;
  score: number;
  work: () => void;
};

type Intern = Student & Worker;

결과적으로 Intern 타입은 아래와 같이 정의됩니다.

{
  name: string;
  employeeId: number;
  score: number;
  work: () => void;
}

이처럼 & 연산자를 이용해 여러 개의 타입 정의를 하나로 합치는 방식을 Intersection 타입 정의 방식이라고 합니다.

Intersection & Union 비교 및 주의할 점

Union 타입과 Intersection 타입이 함수 파라미터에 어떻게 적용되어 활용할 수 있는 지 살펴보겠습니다.

Intersection

function internWork(person: Student & Worker) {
  console.log(person.name, person.score, person.employeeId, person.work());
}

여기서 introduce() 함수의 파라미터 타입을 Person, Developer 인터페이스의 Intersection 타입으로 정의하였습니다. 파라미터로 들어온 person은 Student와 Worker 인터페이스들이 제공하는 모든 속성(name, work, score...)을 사용할 수 있습니다.

// 함수 호출
internWork({
  name: "Sangji",
  score: 1,
  employeeId: 123,
  work: () => {},
});

이처럼 다양한 타입들을 하나로 묶어 사용이 가능합니다.

Union

아래 코드에서는 introduce() 함수의 파라미터 타입을 Student,Worker 인터페이스의 Union 타입으로 정의하였습니다.
❗️여기서 주의할 점은, Intersection 타입과 달리 아래 함수에서는 Student와 Worker 인터페이스의 속성들을 모두 사용할 수 는 없다는 것입니다.

function introduce(person: Student | Worker) {
  person.name; 		// O 정상 동작
  person.age; 		// X 타입 오류
  person.skill; 	// X 타입 오류
}

Union 타입의 or과 같은 성격을 생각하여 Student 또는 Worker 인터페이스가 제공하는 속성들을 모두 사용할 수 있다고 생각할 수도 있지만, 타입스크립트 관점에서는 introduce() 함수를 호출하는 시점에 Student 타입이 올지 Worker 타입이 올지 알 수가 없습니다. 따라서 타입스크립트는 어느 타입이 들어오든 간에 오류가 안 나는 방향으로 타입을 추론하게 됩니다.

결과적으로 introduce() 함수 안에서는 별도의 타입 가드(Type Guard)를 이용하여 타입의 범위를 좁히지 않는 이상 기본적으로는 Student와 Worker 두 타입에 공통적으로 들어있는 속성인 name만 접근할 수 있게 됩니다.