타입스크립트 (TypeScript) - Type Alias(타입 앨리어스), Enum(이넘), Union Type(유니온 타입)

출처 : 구글이미지

01. Type Alias (타입 앨리어스)

 타입 앨리어스, 타입 별칭이라고 하는데 인터페이스와 비슷하다. 인터페이스도 속성을 정해주고 타입으로 사용하듯, 타입 앨리어스도 인터페이스와 동일하게 타입으로 사용할 수 있다. 타입 별칭의 경우에는 새로운 타입값을 생성하는 것이 아니라, 정의한 타입에 대해서 참고할 수 있는 이름을 붙이는 것과 같다.

type Num: number;
const point: Num = 990;

type Message: string;
const talk: Message = "Hello Stranger!";

// 객체 타입 선언
type Game {
  genre: string;
  company: string;
  rating?: number;
};

const diablo: Game = {
  genre: "RPG",
  company: "Blizzard"
}

타입은 다음에 계속 기록될 유니온 타입이나, 이전에 기록했던 튜플 타입도 지정할 수 있다.

type Result = "A" || "B" || "C" || "D" || "F";

type Rank = 1 || 2 || 3 || 4 || 5;

type Obj = {x: 10} || {y: -10};

type Function = (() => String) || (() => Void);

// 인터페이스를 유니온 타입으로 지정
type Clothes = Top || Bottom || Shoes || Acc;

type Tuple = [string, number];

원시값 뿐만아니라, 다양한 타입을 지정할 수 있다. 그렇다면 인터페이스와 차이는 무엇일까?

 

인터페이스의 경우에는 extends나 implements로 상속이나 확장이 가능한 반면 타입앨리어스는 불가능하다. 하지만 타입 앨리어스의 경우에는 유니온이나 튜플을 지정할 수 있기 때문에, 그런 타입을 사용해야 하는 경우에는 유리하다. 계속해서 유니언 타입을 기록해보자!

---

02. Union Type (유니언 타입)

유니온 타입은 자바스크립트의 OR연산자 ||를 사용하는 타입니다. 위에서 타입앨리어스 때 사용했었다. Result는 A, B, C, D, F중에 하나라는 의미로 사용이 된다.

// 함수에서의 유니온타입
function add(num: number || string) {
  if(typeof num === string) return 10 + Number(num);
  else return 10 + num;
};

num변수는 숫자가 될수 있고, 또는 문자열이 될 수도 있다. 문자열인 경우에는 문자를 숫자로 변경해서 더해준 값을 반환한다. 그렇다면 &을 활용하는 타입은 없을까? 바로 Intersection Type이다. &을 활용해서 타입의 정의를 하나로 합치는 방식이다.

interface Zicova {
  main: string;
  price: number;
};

interface Goobne {
  main: string;
  location: string;
}

type Chicken = Zicova & Goobne;

//Chicken의 타입은
{
  main: string;
  price: number;
  location: string;
}

---

 

03. Enum(이넘)

이넘은 특정 값들의 집합을 의미한다고 한다. 뭔가 목록을 나열해서, 숫자나 문자와 같은 값을 부여해서 사용하기도 한다.

enum Direction {
  East, // 0
  West, // 1
  South, // 2
  North, // 3
}

enum Direction {
  East = 1,
  West, // 2
  South, // 3
  North, // 4
}

선언은 위와 같이 한다. 만약에 초기값을 주지 않으면 첫번째 부터 0, 차례대로 1씩 증가하게 되고 아래와 같이 초기값을 주게 되면, 초기값 부터 1씩 증가한다.

enum Direction {
  East, // 0
  West, // 1
  South, // 2
  North, // 3
}

let dong: Direction = Direction.East;
console.log(dong); // 0

enum Direction {
  East = 7,
  West = 14, 
  South = 21,
  North = 22, 
}

let nam: Direction = Direction.South;
console.log(nam) // 21

당연히 문자열을 값으로 넣어서 사용할 수 있다. 또한 복합적으로 숫자와 문자열을 혼합해서 생성을 할수도 있다!

 

공부.. 공부..