12. 타입 단언 (as) 과 타입 가드 (is)

1. 타입 단언 (as)

• 개발자가 명시적으로 타입을 단언하는 것을 의미합니다.

• 일반 타입스크립트 연산

var a; 
a = 20;
a = 'a';
var b = a; // 맨 처음에 선언된 타입을 b에 할당하게 됩니다. (any)

• 타입 단언

var a; 
a = 20;
a = 'a';
var b = a as string; // 타입을 강제로 단언합니다.

• 실제 사용 사례
  • DOM API 조작할 때 자주 사용하게 됩니다.
  • 실제로 타입스크립트를 실무에서 사용할 때 querySelector로 접근하는 시점에 div가 있다는 보장을 해주지 않습니다.

var div = document.querySelector('div'); // htmldivelement로 추론하게 됩니다.
div.innerText //실무에서는 오류 발생

//그래서 div가 있는지 확인하고 접근하게 됩니다. 이럴때 단언을 사용하게 됩니다.
if(div) {
  div.innterText
}

• 단언을 활용해보기

// 단언 활용해보기
let div = document.querySelector('div') as HTMLDivElement;
div.innerText;

2. 타입 가드 (is)

• 타입가드를 사용하지 않을 때

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

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

function intruduce(): Developer | Person {
  return { name: 'tony', age:28, skill:'hi'}
}

var tony = intruduce();
console.log(tony.skill) // 에러 발생 : 유니온 타입은 공통된 속성만 접근이 가능하기 때문입니다.
console.log(tony.name) // 가능

//skill을 뽑아내고 싶어.. 단언을 하면 보장받을 수 있습니다.
//하지만 가독성도 안좋고.. 중복이 발생합니다...
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);
}

• 타입가드를 사용할 때

function isDeveloper(target: Developer | Person): target is Developer{
  return (target as Developer).skill !== undefined; 
 //skill이라는 값이 있을 때 Developer라고 취급
}

// 타입가드를 정의하고 그것을 활용하면 쉽게 알맞은 속성을 제공해줍니다.
if(isDeveloper(tony)){ // 받은 인자가 Developer이면
  tony.skill
}else{ // 받은 인자가 Developer가 아니면
  tony.age
}