[TypeScript] 타입스크립트 인터섹션 타입(Intersection Type)

▶타입스크립트 인터섹션 타입(Intersection Type)

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

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

위 코드는 Person 인터페이스의 타입 정의와 Developer 인터페이스의 타입 정의를 & 연산자를 이용하여 합친 후 Capt 이라는 타입에 할당한 코드입니다.

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

{
  name: string;
  age: number;
  skill: string;
}

 

저번 글에서 유니온 타입을 알아보았을 때 함수의 파라미터에 유니온 타입으로 인터페이스 2개를 넘겨주면

공통된 속성에 대해서만 반응하는 것을 보았었습니다.

 

하지만 그 유니온 타입 부분을 인터섹션으로 바꿔주게 되면 에러가 나지 않습니다.

왜냐하면 모두 만족하는 속성이라고 정의했기 때문인데요.

 

아래와 같은 2개의 인터페이스가 선언되어 있다고 했을 때,

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

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

파라미터에 유니온으로 정의

파라미터에 인터섹션으로 정의

 

🔎 유니온과 인터섹션의 차이

1️⃣ 유니온 타입 

아래와 같이 someone은 Developer 인터페이스와 Person 인터페이스 둘 중 하나를 만족하도록 유니온 타입을 이용하여 정의 했습니다.

function askSomeone(someone: Developer | Person) {
	// ...
}

함수를 사용할 때에는 인자를 Developer의 규격에 맞게 혹은 Person의 규격에 맞게 넘겨주면 됩니다.

→ 둘 중 하나의 규격에 맞게 넘겨주자. 둘을 섞어서 넘기면 안됨XX

askSomeone({ name: 'doeunn', skill: 'typescript' }); // Developer의 규격에 맞게
askSomeone({ name: 'ldojj', age: 26 }); // Person의 규격에 맞게

 

2️⃣ 인터섹션 타입

아래와 같이 someone은 Devloper와 Person 인터섹션의 성분을 모두 만족하도록 인터섹션 타입을 이용하여 정의 했습니다.

즉, 다시말해서 someone은 Devloper의 성분과 Person의 성분을 동시에 모두 만족해야 합니다.

function askSomeone(someone: Developer & Person) {
	// ...
}

함수를 이용할 때에는 겹치는 성분과 겹치지 않는 성분 모두 전부다 인자로 넘겨주어야 합니다.

→ 그냥 모두다 인자로 넘겨주자

askSomeone({ name: 'doeunn', skill: 'typescript', age: 23 });

만약 Developer의 규격에만 맞게 인자를 넘겨주려고 하면

에러가 발생하게 됩니다.