[typescript 기본] 타입가드 is와 타입단언 as

interface 2개를 union타입으로 연결해놓고, return 받는 값으로 뭔가 하고 싶을때

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

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

//union은 공통된 속성만 간주!!!! 따라서 name만 사용가능하고 함수 안에있는 age, skill 은 의미가 없음.
function introduce(): Developer | Person {
    return { name: 'Tony', age: 33, skill: 'marketing'};
}

var tony = introduce();
console.log(tony.skill) //이렇게 찍으면 없다고 나옴...

Developer라는 인터페이스와 Person이라는 인터페이스를 선언해놓고,
introduce라는 함수에 return값의 타입을 Developer 또는 Person이라고 지정해놓았다.
interface2개를 union type으로 해놨으니 안에서는 당연히 공통적인 'name' 만 사용이 가능한데,
tony.skill을 사용하려고 하면 위의 사진처럼 오류라고 표시가 뜬다.

이럴때 return받은 값에서 skill이나 age를 사용하고 싶을 때 타입단언이나 타입가드를 통해서 쓸 수 있다.

 

---

1. 타입 단언으로 사용하기

//interface 2개 선언
interface Developer {
    name: string;
    skill: string;
}

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

// return의 타입은 Developer 또는 Person.
function introduce(): Developer | Person {
    return { name: 'Tony', age: 33, skill: 'marketing'};
}

//tony에 introduce실행해서 받은 return값 담음
var tony = introduce();

// tony는 Developer에 선언된 타입을 사용하겠다. 따라서 skill이 존재하므로 아래는 정상적인 코드.
if ( (tony as Developer).skill ) {
    var skill = (tony as Developer).skill;
    console.log(skill);
}
else if ( (tony as Person).age ) { //Person을 사용하는 introduce() 이기때문에 age가 있음.
    var age = (tony as Person).age;
    console.log(age);
}

포인트는 tony as Developer이다. 타입단언을 통하여 tony는 Developer interface 타입을 사용하겠다고 하였기 때문에 tony.skill은 더이상 오류가 발생하지 않는다. 

하단의 age도 동일하게 Person이라는 인터페이스의 타입을 사용했을때라고 가정했기떄문에 tony.age는 오류가 발생하지 않는다.

 

---

2. 타입 가드로 사용하기

어떤 인터페이스를 사용하고 있는지 확인하는 함수이다.
return값을 is Developer로 만약 return 되는 skill이 undefinded가 아니면 이것은 Developer를 사용했다는 소리라고 볼 수 있다.

 

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);
}

if문을 보면 Devloper 타입을 사용하기 때문에 tony에는 skill이 있을 것으로 간주하고 따라서 tony.skill을 찍어도 오류가 나지 않는 것을 확인할 수 있다.
여기서는 interface가 2개이므로 else 문은 Person 으로 지정된 타입이므로 age가 있다고 생각할 수 있다.
이런식으로 타입가드를 사용할 수 있다.

 

 

** 위에서 사용하는 union을 모른다면 아래 url참고

https://joannashin.tistory.com/45