TypeScript

오늘은 타입스크립트의 다른 문법에 대해서 알아보자.

enum

• enumeration 의 줄임말
• 특정 값들의 열거

숫자형 enum

• 기본적으로 enum 은 0부터 시작해서 내부적으로 요소들에 숫자가 들어간다.
• 수동으로 요소들의 숫자를 넣어줄 수 있다.
• enum에서는 어떤 값이 어떤 요소와 매칭되는지 알아낼 수 있다.

예시1

enum exam1 {
  a,
  b,
  c,
  d
}
console.log(exam1.a,exam1.b,exam1.c,exam1.d) // return 0,1,2,3

예시2

enum exam2 {
  a = 4,
  b = 21,
  c,
  d
}
console.log(exam2.a,exam2.b,exam2.c,exam2.d) // return 4,21,22,23

예시 3

enum exam3 {
  a,
  b,
  c,
  d
}
const x : exam3 = exam3.a // x=0 
const x : exam3.c | exma3.d = exam4.c // x=2

예시 4

enum exam4 {
  a,
  b,
  c,
  d
} 
console.log(exam4[2]) // return c
console.log(exam4[0]) // return a

문자형 enum

• enum 값 전부 특정 문자 또는 다른 enum 값을 넣어줘야함
• 문자형 enum 은 숫자형과 다르게 하나의 enum 값을 숫자로 넣어줘도 다음 enum 값이 다음 숫자가 되지 않는다.

예시1

enum exam1 {
  a = "apple",
  b = "banana",
  c = "cabbage",
  d = "dragon fruit"
}
console.log(exam1.a,exam1.b,exam1.c,exam1.d) // return apple,banana,cabbage,dragon fruit

예시2

enum exam2 {
  a = 120,
  b = "banana",
  c = "cabbage",
  d = "dragon fruit"
}
console.log(exam2.a,exam2.b,exam2.c,exam2.d) // return 120,banana,cabbage,dragon fruit

복합형 enum

• 권고하지 않는 형식
• 유지보수의 어려움

예시

enum exam {
  a = 120,
  b = "banana",
  c = 184,
  d = "dragon fruit"
}
console.log(exam.a,exam.b,exam.c,exam.d) // return 120,banana,184,dragon fruit

Union

• 해당하는 값이 A 이거나 B 이다 라는 의미의 타입 (A | B)
• JS의 || 연산자와 같음

예시

const printOut = (input : string | number) => {
  console.log(input);
}
printOut("문자열") // return "문자열"
printOut(20) // return 20
printOut(true) // error - input 의 타입은 string or number 로 타입 지정이 되어있기 때문에 boolean 타입을 넣으면 에러가 난다.

Type Alias (타입별칭)

• 어떤 객체나 배열 등 타입을 많이 써주어야 하는 변수에서 사용이 가능하다.

예시1

const hero : {name:string, power:number, height:number} = {
  name : 'SuperMan',
  power : 1000,
  height : 190
}
const printHero = (hero: {name:string, power:number, height:number}) => {
  console.log(hero.name, hero.power) // return 'SuperMan' , 1000
}

위 예시처럼 hero 라는 변수는 name:string, power:number, height:number 값을 가지는 객체인데, 이를 함수에 파라미터로 넣어줄 때 마다 굉장히 불편하게 객체의 타입을 써줘야한다.
이런 상황일때에 아래 예시2처럼 type alias 를 사용하면 굉장히 편해진다.

예시 2

type HeroType = {
  name : string,
  power : number,
  height : number
}
const hero : HeroType = {
  name : 'SuperMan',
  power : 1000,
  height : 190
}
const printHero = (hero: HeroType) => {
  console.log(hero.name, hero.power) // return 'SuperMan' , 1000
}