Typescript 기초 학습 9.기초문법7_인자 값 타입선언_타입가드(인프런_Zerocho님 강의 학습 의식의 흐름대로 노트 정리)

인프런 타입스크립트 기초를 통해 공부중이며 제로초님의 유료강좌입니다.

코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만)

 

타입스크립트에 익숙하지않다면 자바스크립트로 먼저 코드를 작성하고 그 후에 타입스크립트로 변환하도록하자.

 

타입스크립트 (Typescript)

 

매개변수를 구조분해할때 타입 작성 방법

// (X)
function test({ a: boolean, b: number}){
    //....
}

// (O)
fuction test({ a, b }: { a: boolean, b: number}){
    //....
}

뒤에 별도로 써야 에러가 나지 않는다.

아래와 같이 쓸 수 있다.

// 호출할때 객체로 인자값을 전달하고
connectCardDOM({ data: player.data, DOM : player.hero, hero: true});

// 구조분해를 이용해 인자를 이렇게 처리한다.
function connectCardDOM({ data, DOM, hero = false }: { data: Card, DOM: HTMLDivElement, hero: boolean}){
    //...
}

만약 너무 길다 싶을때에는 인터페이스로 분리하는 방법이 있다.

개인적인 견해라고 말했지만 인터페이스는 보통 객체를 만들때 사용한다고 한다.

interface A{
	data: Card, 
    DOM: HTMLDivElement, 
    hero: boolean
}

// 인터페이스 A를 타입으로 선언해준다.
function connectCardDOM({ data, DOM, hero = false }: A){
    //...
}

 

 

타입가드

넓은 타입을 좁은 타입으로 좁혀 사용할 수 있다.

아래 예제는 Animal을 implements한 cat과 dog 클래스에서 더 좁은 타입으로 만들기 위해 isCat을 선언한 것을 확인할 수 있다.

true일 경우 data는 cat이 된다.

class dog implements Animal{
    public a: number;
}

class cat implements Animal{
    public a: number;

    // b는 cat 만있음
    pibloc b: string;
}

// cat에는 b가 있어서 cat일 경우 true가 리턴 됨.
// return true일 경우 data is Cat이 된다.
// 이것을 타입 가드라고 한다.
function isCat(data: Animal): data is Cat{
    if(data.b){
        return true;
    }else{
        return false;
    }
}

Animal이라는 큰 클래스가 있다면 그 안에서 cat과 dog를 구분할 수 있다.

예제는 물론 간단히 두개로만 나누었지만 함수가 커지게 된다면 각각의 경우에 대한

타입가드를 만드는 것이 좋다.

위에서 만든 isCat을 사용하는 예제를 보겠다.

class dog implements Animal{
    public a: number;
}

class cat implements Animal{
    public a: number;
    pibloc b: string;
}

function isCat(data: Animal): data is Cat{
    if(data.b){
        return true;
    }else{
        return false;
    }
}

// 이런식으로 사용한다.
btn.addEventListener('click', () => {
    
    // isCat 타입 가드로 data의 타입을 리턴받는다.
    if(isCat(data) && 다른 조건을 추가해줘야 안전){
        //....
    }
});

 

TIP

코딩 스타일
함수 호출할 때 인자 값을 객체로 넣는다면 이점이 뭘까?

test(true, 5);

// true와 5가 무엇인지 가독성이 높아졌다.
test({ start: true, max: 5});

보통 함수 정의부에서 확인을 해야하는 데 호출하는 부분만 봐도 알 수 있다.

인자가 한 없이 늘어났다면 더욱 효과적이다.

test({ start: true, puzzle: true, max: 5, currentIndex : 0 });

하지만 이건 개인적인 부분이라고 한다.