TIL 46 | Union • Intersection Type

✌Union Type

• | 연산자 이용하여 타입을 여러 개 연결하는 방식을 유니온 타입 정의 방식이라고 부른다.
• JavaScript OR 연산자(||)와 같이 A이거나 B이라는 의미의 타입.
• any를 사용할 경우, JavaScript로 작업하는 것이다.
• 유니온 타입(Union Type)을 사용하게 되면 TypeScript 장점을 살려서 코드를 작성할 수 있다.

// Any
function getName(name: any) {
  console.log(`result name ${name}`);
  return name;
}

// Union
function getAge(age: string | number) {
  if (typeof age === 'string') {
    console.log(`result age string ${age}`);
  }

  if (typeof age === 'number') {
    console.log(`result age number ${age}`);
  }
}
getAge('21');

🚨 Union Type 주의할 점

• 유니온 타입은 OR, 인터섹션은 AND라고 생각하면 안된다.
• 인터페이스(interface)를 같은 타입을 다룰 경우 아래의 논리적 사고 주의해야한다.
• 함수를 호출 할 때 매개변수로 속성이 정의된 객체를 받으면 어느 타입이 오는 지 알수가 없기 때문에, 어느 타입이 오던 공통된 타입의 방향으로 오류를 안나게 하는게 것이 좋다.

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

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

function introduce(someone: Person | Developer) { 
  someone.name; // 정상 동작
  someone.age; // 타입 오류
  someone.skils; // 타입 오류
}

👌 구별된 유니온

• 유니온 구성원을 구별할 수 있다.
• 아래의 코드에서 type 라는 속성은 모든 유니온 구성원에 존재하는 리터털 타입이다.
• === ,!== 또는switch를 사용하면 TypeScript가 특정한 리터럴을 가진 객체를 대상한다는 것을 타입을 좁히기 실행한다.

interface Bird {
  type: 'bird';
  flyingSpeed: number;
}

interface Horse {
  type: 'horse';
  runningSpeed: number;
}

type Animal = Bird | Horse;

function moveAnimal(animal: Animal) {
  let speed;
  switch (animal.type) {
    case 'bird':
      speed = animal.flyingSpeed;
      break;
    case 'horse':
      speed = animal.runningSpeed;
  }
  console.log('Moving at speed : ' + speed);
}
moveAnimal({ type: 'bird', flyingSpeed: 10 });

✌ Intersection Type

• & 연산자 이용하여 모두 만족하는 하나의 타입을 인터섹션 타입이라고 부른다.
• 코드를 보기 전에 아래의 사진을 보면 이해가 더 빠를 거 같다.
• 인터페이스 타입을 정의한 후에 & 연산자 이용하여 인턱섹션 타입을 정의할 수 있다.

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

interface Developer {
  name: string;
  skills: string[];
}

type Com = Person & Developer;

const D1: Com = {
  name: 'viva',
  age: 21,
  skills: ['html', 'css'],
};
console.log(D1); // { name: 'viva',....}

Reference

타입스크립트 핸드북 →(SITE)