타입스크립트 연산자, 이넘, 클래스 활용방법 간단 정리

 

 

타입스크립트

🔵 연산자를 이용한 타입 정의

Union Type ('|')

- 한가지 이상 타입을 쓰고 싶을 때 사용 (파이프 '|' 연산자 활용)

- 내부적으로 타입들을 구분할 수 있음 (타입가드에 활용)

* 타입가드 : 특정 타입으로 타입의 범위를 좁혀나가는(필터링) 과정

- 타입스크립트 관점에선 어떤 값이 들어올 지 모르기 때문에 공통의 보장된 속성만 사용 가능

 

(1) 타입가드의 역할

function logAge(value: string | number) {
  console.log(value);
  
  // 타입가드 (number)
  if (typeof value === 'number') {
    // 이 스코프에서는 자연스럽게 number로 인식된다
    console.log(typeof value); // number
  }
  
  // 타입가드 (string)
  if (typeof value === 'string') {
    // 이 스코프에서는 자연스럽게 stirng 인식된다
    console.log(typeof value); // string
  }
  
  // 타입가드 (다른 타입일 경우 error)
  throw new TypeError('string이나 number만 가능');
}

해당 함수는 파라미터가 string과 number의 유니온 타입으로 되어있다.

그래서 함수 내부에서 타입들을 구분하여 처리 할 수 있다.

 

logAge(30);
logAge('서른살');

유니온 타입으로 인해 string과 number 모두 파라미터로 사용이 가능

 

(2) 접근 가능한 속성을 제어

interface A {
  name: string;
  skill: string;
}

interface B {
  name: string;
  level: number;
}

한 가지 속성을 제외하고 다른 인터페이스 A와 B를 정의.

 

function logName (param: A | B) {
  // 접근할 수 있는게 공통된 속성인 name뿐
  console.log(param.name)
}

유니온 타입을 활용하면 공통된 속성에만 접근이 가능하다.

 

logName({ name: '피카츄', level: 100 });  // ==> OK
logName({ name: '피카츄', skill: '공격' });  // ==> OK
logName({ name: '피카츄', skill: '공격', level: 100 }); // ==> OK
logName({ name: '피카츄'}); // ==> 에러. 속성이 A도 아니고 B도 아님

즉, 속성이 A이거나 B여야 접근이 가능하다.

 

 

Intersection Type ('&')

- 모든 속성 접근 가능

- 왜냐면 모든 속성을 포함하는 타입이여야하니까!

 

(1) 모든 속성에 접근 가능

function logName(param: A & B) {
  // 모든 속성에 접근이 가능하다
  param.name
  param.age
  param.skill
}

 

인터섹션 타입으로 인해 모든 속성에 접근이 가능하다.

 

logName({ name: '파이리', skill: '방어' }); // ==> 에러! B 속성X
logName({ name: '파이리', level: 90 }); // ==> 에러! A 속성X
logName({ name: '파이리', skill: '방어', level: 90 }); // ==> OK

즉, 모든 속성에 접근이 가능하기 위해서는 A와 B 둘 다 해당되는 속성을 가져야한다.

 

---

🔵 이넘(Enums)

- 특정 값들의 집합을 의미하는 자료형

 

숫자형 이넘

- 별도의 값을 지정하지 않으면 '숫자형 이넘' 취급

- 물론 숫자로 지정하면 당연히 숫자형 이넘.

enum Pokemon {
	// 별도의 값을 지정안함
    Pikachu,
    Eevee
}

var APokemon = Pokemon.Pikachu;
var BPokemon = Pokemon.Eevee;
console.log(APokemon); // 0
console.log(BPokemon); // 1

 

문자형 이넘

- 드롭다운같이 목록이 필요한 형태에서 이넘을 활용하면 오류를 줄일 수 있음

enum Pokemon {
  Pikachu = '피카츄',
  Eevee = '이브이'
}

var APokemon = Pokemon.Pikachu;
var BPokemon = Pokemon.Eevee;

console.log(APokemon); // '피카츄'
console.log(BPokemon); // '이브이'

 

---

 

🔵 클래스(class)

- class 키워드를 활용한다.

- 생성자(constructor)를 통해 속성들을 초기화해준다.

- extends 키워드를 통해 상속 → 기존 클래스에 추가하기 + 하위클래스 생성자에서 super 필수

- 오버라이드를 통해 상위 클래스에서 정의된 내용을 재정의 가능

 

접근제어자   

public : 어디서든 접근이 가능 (default)

protected : 선언한 클래스와 상속받은 하위 클래스에서만 접근이 가능 ( 암묵적으로 _ 언더바를 붙인다.)

private : 선언한 클래스 내에서만 접근이 가능 ( 공식적으로 # 샵을 붙인다.)

readonly : 읽기 전용. 생성자를 통해 한번 정의가 된 이후에는 변경이 불가능

---

참고 강의 : https://taylog.tistory.com/217

[강의리뷰] 실전 프로젝트로 배우는 타입스크립트 시리즈 강의 후기 (캡틴판교) 😱 타입스크립