#4 TypeScript 타입 추론(Inference), 단언(Assertion), 가드(Guard)

타입 추론(Type Inference)

 ts는 타입을 직접 지정해 주지 않아도, 타입추론를 이용하여 자동으로 타입을 지정해 준다.

타입추론을 통해서 나온 타입이 내가 원하는 타입과 다르다면 직접 타입을 지정해 주는 것이 바람직하다.

타입은 최대한 좁은 범위로 설정해 주는 것이 좋다.

타입 단언(Type Assertion)

let unk2: unknown;

const unkBoo = unk2 as boolean

let tmp: number = unk2 as number;

let tmp2: string = <string> unk2

let tmp3: boolean = unkBoo

 타입 단언은 value as type 형태 또는 <>로 작성되며 작성자가 value의 타입을 무조건 type이다 라고 단언하는 것이다. 타임 단언은 컴파일 과정에서만 타입을 변경 시키기 때문에 실제 런타임 환경에서는 에러를 발 생시킬 수 있다.

 타입 선언과 다른 점은 타입 선언한 값은 컴파일 과정에서 타입 체크를 하지만 타입 단언을 한 값은 타입 체크를 실시 하지 않는다

non-null 단언(Non-Null Assertion)

const head: Element = document.getElementById('header');
const head = document.getElementById('header');
const head: Element = document.getElementById('header')!;

 

 첫 번째 줄의 head는 Element라는 타입을 선언해 주었지만 header라는 id를 가진 태그가 존재 하지 않아 null 값이 들어갈 수 있으므로 에러를 발생시킨다. 따라서 두 번째 코드를 작성해야지 "Element | null". 로써 가능한 타입들을 정확히 정의해 준것이다.

하지만 세 번째 줄의 head는 마지막에 "!"(non-null assertion)를 추가해 줌으로써 head에 null값이 절대 들어가지 않는다는 것을 보장한다. 이 "!" 연산자는 eslint에서 사용을 권장하지 않는데, strickNullChecks의 이점을 사용하지 않기 때문이다.

대신 

if (head){
    console.log(head);
}

과 같은 형태로 사용하는 것을 권장한다.

 

타입 가드(Type Guard)

타입 가드는 여러개의 타입이 가능할 때 가능한 타입들을 if문으로 구별하여 타입에 맞게 작동하게 해준다.

 

원시 타입

아래는 원시 타입들을 타입가드 하는법이다.

function guard(a: number | string | boolean): void {
    if( typeof a === 'string'){
        a.charAt(1);
    }
    if( typeof a === 'number'){
        a.toFixed(1);
    }
    if( typeof a === 'boolean'){
        console.log(bool);
    }
}

 

배열

배열의 경우에는 Array.isArray()를 사용하면 된다.

function guard( a: string | number[] ) {
    if( Array.isArray(a)) {
        
    else{
        a.charAt(1);   
    }

 

클래스(Class)

#2 에서 class를 타입으로 사용하는 방법을 배웠다.

이번에는 타입 가드를 이용하여 클래스가 union 된 타입은 instaceof를 이용해 주면 된다.

class A {
    a: number = 10;
}

class B {
    b: string = 'qwe';
}

function aOrB(arg: A | typeof B) {
    if( arg instaceof A){
        console.log(arg.a);
    }
    else{
        console.log(arg.b);
    }
}

 

객체(Object), Interface

객체나 인터페이스는 type이라는 key를 만들어 .type으로 value를 이용하여 구분해 주거나. key값을 이용하여 "in"을 이용하여 구분 할 수 있다.

type A = { type: 'a', aaa: string};
type B = { type: 'b', bbb: string};
type C = { type: 'c'. ccc: string};

function typeCheck(arg: A | B | C){
    if(arg.type === 'a'){
    }
    else if(arg.type === 'b'){
    }
    else{
    }
}

function typeCheck2(arg: A | B | C){
    if('aaa' in arg){
    }
    else if('bbb' in arg){
    }
    else{
    }
}

 

커스텀 타입 가드

커스텁 타입 가드는 직업 타입을 판별해 주는 함수를 뜻한다.

함수의 리턴 부분에 "매개변수 is 타입" 과 같은 형태로 적어주면 타입 가드를 해주는 함수라는 뜻이며, 함수 내용으로 원하는 타입을 구별해 주면 된다.

조건문 안에 커스텀 타입가드를 한 함수를 넣어주면 된다.

type A = { type: 'a', aaa: string};
type B = { type: 'b', bbb: string};
type C = { type: 'c', ccc: string};

function typeCheck(arg: A | B | C): arg is A{
    if((arg as A).aaa){
        return true;
    }
    return false;
}

 

 

 

https://hyunseob.github.io/2017/12/12/typescript-type-inteference-and-type-assertion/