[ 인프런 - 타입스크립트 입문_기초부터 실전까지 ] 7. 타입 추론 / 타입 단언 / 타입 가드

인프런 장기효(캡틴판교) 님의 [ 타입스크립트 입문 - 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다.

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의

---

타입 추론 (Type Inference)

- 변수를 선언하거나 초기화 할 때 타입이 추론된다. 

- 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어난다.

- 아래 코드에서 x의 타입을 지정하지 않아도 number로 간주된다. 

let x = 2;

---

Best Common Type

- 몇 개의 표현식을 바탕으로 하여 타입을 추론하는데, 그 때의 가장 근접한 표현식을 Best Common Type 이라고 함

let arr = [0, 1, true, "hi"];

---

타입 단언 (Type Assertion )

- 컴파일러에게 특정 타입의 사용을 강제할 수 있다.

- value as type 문법을 사용해 타입 단언을 한다. 

- DOM API 조작에 많이 사용된다.

let a;
let b = a as string;

const div = document.querySelector("div") as HTMLDivElement;

---

타입 가드 (Type Guard)

- 특정 스코프 내에서 값의 타입을 좁힐 수 있다. 

 

- name 과 skill을 프로퍼티를 가지는 인터페이스 Developer와 name과 age를 프로퍼티를 가지는 인터페이스 Person이 있다.

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

interface Person {
  name: string;
  age: number;
}

const introduce = (): Developer | Person => {
  return { name: "tony", skill: "no", age: 20 };
};

let tony = introduce();

- 타입 가드를 사용하지 않고, 타입 단언만 사용하면 if 조건문이 복잡하고 같은 코드를 반복하게 된다.

if ((tony as Developer).skill) {
  let skill = (tony as Developer).skill;
  console.log(skill);
} else if ((tony as Person).age) {
  let age = (tony as Person).age;
  console.log(age);
}

- 타입 가드 함수를 정의하여 사용하면 if 조건문이 간단하고 재사용이 쉬워진다.

- isDeveloper 함수는 target이 Developer 이면 true를 반환하고, Person이면 false를 반환한다. 

const isDeveloper = (target: Developer | Person): target is Developer => {
  return (target as Developer).skill !== undefined;
};

if (isDeveloper(tony)) {
  console.log(tony.skill);
} else {
  console.log(tony.age);
}