📃 타입스크립트 입문 06 : 유니온 타입과 인터섹션 타입 알아보기

🎈 유니온 타입 :  var seho : string | number | boolean; 

var seho : string | number | boolean; 

여기서 | 는 OR을 뜻한다.

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

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

function askSomeone(someone: Developer | Person ) {
  someone.name;
}
askSomeone({ name: '디벨로퍼', skill: '웹 개발'});
askSomeone({ name: '캡틴', age: 100});

한 가지 이상의 타입을 사용하고 싶을 때 | (파이프)를 사용하면 된다. 유니온 타입은 Developer와 Person의 인터페이스를 생성했을 때 둘 다 공통으로 들어간 name값만 뽑아내준다. 그 이유는  someone에 age나 skill이 타입 검증도 없이 바로 써버리게 되면 안전하지 않아 이 코드상 에러가 날 수 있다고 한다. 쉽게 말해 인터페이스 구조체에 공통된 속성만 제공한다고 보면된다.

function askSomeone(someone: Developer | Person ) {
  // someone.name;
  // someone.skill;
  // someone.age;
}
askSomeone({ name: '디벨로퍼', skill: '웹 개발'});
askSomeone({ name: '캡틴', age: 100});

다른 타입들의 속성을 불러오고 싶다면 이렇게 askSomeone을 두 번 호출해서 각각 지정해주는 타입의 속성들만 골라 호출해줄 수 있다. (skill, age) 

 

🎈 인터섹션 타입 : var capt : string & number & boolean;

var capt : string & number & boolean; 

&는 AND를 뜻한다.

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

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

function askSomeone1(someone: Developer & Person ) {
  // 인터섹션 : Developer 과 Person이 합친 하나의 타입
  someone.name;
  someone.skill;
  someone.age;
}
askSomeone1({ name: '디벨로퍼', skill: '웹 개발', age: 34});

인터섹션은  Developer 과 Person이 합친 하나의 타입으로 ! 공통인 name 뿐만 아니라 skill과 age 속성도 같이 제공해준다. 그래서 호출할 땐 반드시 name, skill, age라는 속성 값들을 한 번에 한 줄로 출력해주어야 빨간 에러가 발생하지 않는다.

 

유니온 타입처럼

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

이런식으로 호출해주면 빨간줄 에러가 생긴다. 

 

---

 

🎈 정리

유니온타입같은 경우에는 공통된 타입만 제공이 가능했던 반면에 인터섹션 코드 같은 경우에는 Developer와 Person이 가지고 있는 모든 속성과 타입을 다 포함한 하나의 타입이라고 정의했기 때문에 에러가 안나고 전부 제공해준다. 하지만 두 가지 중에서 유니온 타입이 훨씬 더 자주 쓰인다는 점을 유의하자.