6. Union 타입 / Type Alias

유니온(Union) 타입 : (A || B)

자바스크립트의 OR 연산자 || 와 같은 의미이다. 

const printOut = (input: string | number) => {
	console.log(input);
}

printOut('문자열');
printOut(20);
printOut(true);

| (파이프)연산자를 이용하여 타입을 여러 개 연결하는 방식

 

유니온 타입의 장점

function getAge(age: any) {
  age.toFixed(); // Error
  return age;
}

getAge('20');
getAge(20);

• toFixed함수는 number타입만 사용 가능하므로 any타입과 같이 어떤 데이터타입이든 허가해준다면 에러가 발생하게 된다.

 

function getAge(age: number | string) {
  if (typeof age === 'number') {
    age.toFixed();
    return age;
  }
  if (typeof age === 'string') {
    return age;
  }
}

getAge('20');
getAge(20);

function padLeft(value: string, padding: any) {
  if (typeof padding === 'number') {
    return Array(padding + 1).join(' ') + value;
  }
  if (typeof padding === 'string') {
    return padding + value;
  }
  throw new Error(`Expected string or number, got '${padding}'.`);
}

console.log(padLeft('Hello world', 4)); // "    Hello world"
console.log(padLeft('Hello world', '!!!')); // "!!!Hello world"
console.log(padLeft('Hello world', true)); // Error

---

Type Alias (사용자 정의 타입) 

const hero1: { name: string; power: number; height: number } = {
  name: '슈퍼맨',
  power: 1000,
  height: 190,
};

const printHero = (hero: { name: string; power: number; height: number }) => {
  console.log(hero.name, hero.power);
};

console.log(printHero(hero1));

• 매번 타입을 새로 작성하는 건 번거롭고 재사용이 불가능하다.

 

type 키워드를 사용해보자

// type.ts

export type Hero = {
  name: string;
  power: number;
  height: number;
  gender: "남" | "여";
};

import type { Hero } from './type';

const hero1: Hero = {
  name: '슈퍼맨',
  power: 1000,
  height: 190,
  gender: '남',
};

const printHero = (hero: Hero) => {
  console.log(hero.name, hero.power);
};

console.log(printHero(hero1));