유니온(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);

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

type Hero = {
	name: string;
	power: number;
	height: number;
};

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

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

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

console.log(printHero(hero1));

type Direction = 'UP' | 'DOWN' | 'LEFT' | 'RIGHT';

const printDirection = (direction: Direction) => {
  console.log(direction);
};

printDirection('UP');
printDirection('UP!');