typescript 기초 정리 - 4

타입스크립트 문법 정리

1) any와 unknown타입의 차이점은?

일단 any를 사용할빠에는 unknown을 사용하는게 맞다고 기억해두자.

• any

타입에 any를 선언할경우 그 이후로 타입스크립트가 타입 검사를 포기해버린다.
타입스크립트를 쓰는 의미가 없어짐.

• unknown

unknown을 쓰게되면 타입검사는 한다. as를 이용해 unknown타입을 다른 타입으로 바꿔줘야 한다.

그러면 언제 쓰는거지? -> 내가 지금 당장 타입을 정확하게 모르겠을때 사용한다.

try {

} catch(error) {

}

catch(error << ts에서 이 부분이 unknwon타입으로 내장된다.)
에러같은 경우 어떤 타입이 올지 모르기 때문에
(Axios사용하면 AxiosError가 발생할수도 있고..) 확인 후 as로 타입 지정을 한다.

(error as Error)...
(error as AxiosError)...

1. any는 안쓰는게 best
2. unknwon도 안쓰는게 best
3. 하지만 쓰게 된다면 as로 타입지정을 직접 해줘야 한다.
4. 처음부터 타입 지정을 정확하게 해줘야 나중에 as로 변환시키고, 줄줄이 꼬여버리는 일을 방지할수 있다.
5. 타입이 unknown일때 or 남이 만든 코드의 타입이 틀렸을때 빼고는 as도 지양해야한다.

• 타입스크립트 에러 체크 꿀팁

여러줄일 경우 가장 마지막 문장을 확인하면 대략적으로 알수있다.

2) 타입가드 (타입 좁히기)

타입가드란? 예를들면 함수의 매개변수에 여러가지 타입이 오는 경우에 사용한다.

function numOrStr (a: number | string) {
	if(typeof a === "number") {
    	숫자일때 가능한 작업...
    } else {
    	문자열일때 가능한 작업...
    }
}

원시값인 경우엔 if문과 typeof를 이용해 매개변수의 타입을 걸러주고 각자 타입에 맞는
작업을 해준다.

function numOrArrOrStr (a: number | number[] | string) {
	if(typeof a === "number") {
    	숫자일때 가능한 작업...
    } else if(Array.isArray(a)){
    	배열일때 가능한 작업...
    } else {
        문자열일때 가능한 작업...
    }
}

배열인 경우엔 isArray를 이용해 타입 걸러서 작업해준다.

type A = {type: "a", a:string}
type B = {type: "b", b:string}
type C = {type: "c", c:string}

1) value로 구별하는 방법

function objInspect (a: A | B | C) {
	if(a.type === "a") {
    	type이 "a"일때 가능한 작업...
    } else if((a.type === "b")){
    	type이 "b"일때 가능한 작업...
    } else {
        type이 "c"일때 가능한 작업...
    }
}


2) 예외사항 알아두기

type A = {type: "a", a:string}
type B = {type: "c", b:string}
type C = {type: "c", c:string}

function objInspect (a: A | B | C) {
	if(a.type === "a") {
    	type이 "a"일때 가능한 작업...
    } else if(a.type === "c"){
    	type이 "c"일때 가능한 작업...
    } else {
        --> 이 경우 타입이 never뜸 else에 더 이상의 타입이 존재할수 없으니까..
    }
}

3) key를 이용하여 구별하는 방법
type A = {type: "a", a:string}
type B = {type: "c", b:string}
type C = {type: "c", c:string}

function objInspect (a: A | B | C) {
	if("a" in a) {
    	type이 "a"일때 가능한 작업...
    } else if("b" in a){
    	type이 "c"일때 가능한 작업...
    } else {
        --> 이 경우 타입이 never뜸 else에 더 이상의 타입이 존재할수 없으니까..
    }
}

in을 통해 key를 검사해서 타입 가드를 한다.

객체인 경우엔 위와 같이 key or value를 이용해 타입을 걸러서 작업해준다.
key의 경우에는 in문법을 이용해 검사한다.

• 따라서 타입스크립트를 이용하면서 객체로 무언가를 만들때는 항상 type이라는 속성을 만들어두는게 좋다.

• 만약 type 속성이 없어서 구별이 힘든경우, 빠르게 객체안에 구별되는 key를 찾아서 in문법으로 타입을 구별해준다.