📃 타입스크립트 입문 08 : 타입 단언 & 타입 가드 알아보기

🎈 타입 단언 알아보기

var a;

이렇게만 선언한 a에 대한 타입은 any가 되고

a = 20;

이렇게 숫자로 대입한 a는 숫자로 추론이 된다.

a = 'a';

얘는 문자열로 추론이 된다.

var b = a;

얘는 원래같으면 맨 처음에 선언된 any가 b에 할당된다.

var b = a as string;

이렇게 as 키워드를 사용하여 후에 타입을 선언하면 선언 한 타입(string)으로 지정된다. 이처럼 타입 단언은 타입스크립트보다 개발자가 타입을 더 잘 알고있다라는 의미로 타입스크립트 너는 신경쓰지 말고 내가 정한 타입에 간주하라... 요런 너낌으로 받아들이면 된다.

 

🎈 DOM API 조작

<div id="app">hi</div>

var div = document.querySelector('div');

if (div) {
  div.innerText
}

웹페이지에 태그를 조작해줄 때 가장 많이 사용하는 API는 querySelector이다. 그리고 위 코드처럼 DIV라는 변수에 담아 태그에 접근하면 알아서 HTMLElement라고 추론해준다. 그리고 if문으로 div가 있는지 확인을 하고 그 다음에 조작을 해주는게 일반적인 타입단언의 패턴이다. div라는 값이 null일 수도 있기 때문에 밑에 호출된 div가 어떤 걸 데려오는지 div가 있는지를 if문을 통해 확인해보는 것이다.

 

그래서 이때,

var div = document.querySelector('div') as HTMLDivElement;
div.innerText;

이렇게 as라는 키워드를 사용하여 미리 HTMLElement로 타입을 단언해주는 것이다. as를 쓰는 시점에는 코드가 돌아갈 때 querySelector가 HTMLElement라고 단언해준다. 

 

🎈 타입 가드 알아보기

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

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

function introduce(): Developer | Person {
  return { name: 'Tony', age: 33, skill: 'Iron Making'}
}

var Tony = introduce();
console.log(Tony.name);

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

인터페이스 선언해주고, introduce라는 함수에 유니온 타입으로 작성하여 Tony를 호출해줬다. 그리고 if문을 사용하여 타입 단언 방식으로 as를 써가며 타입이 있나 없나 확인하는 과정이다. 첫 줄에는 Tony as Developer를 사용하여 디벨로퍼에  skill이 있나 없나 확인을 한 후에 있으면 또 skill이라는 것을 호출해주도록 변수에 담는 이 과정을 반복해서 만들었다. 이렇게 하면 가독성도 떨어지고 여러번 선언해야 된다는 불편한 점이 있어 이것을 보완한 것이 타입 가드이다.

 

🎈 타입 가드 정의

function 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) 

타입가드 함수는 is라는 패턴과 target이라는 키워드를 사용한다. 그리고 skill이라는 값이 있을 때 !== undefined 함수를 사용했다. if문은 토니가 Developer이면 스킬을 제공해준다. 그렇지 않으면 토니는 Person으로 인식하여 age를 제공해준다. if문 첫 줄에는 developer가 토니이고, 밑에줄은 Person으로서의 토니이기 때문에 각각의 필요한 속성을 접근할 수 있다.