타입 확정하는 narrowing & assertion

저번에 number | string 이렇게 타입을 지정하고 연산을 하면 number인지 string인지 몰라서 엄격한 타입스크립트에선 에러가 나는걸 볼 수 있었다.

여기서 narrowing을 활용하면 해결할 수 있다.

function 내함수(x :number | string){
   return x + 1  //에러남 
}

이걸

function 내함수(x :number | string){
  if (typeof x === 'number') {
    return x + 1
  } 
  else if (typeof x === 'string') {
    return x + 1
  }
  else {
    return 0
  }
}

이렇게 typeof로 number인지 string인지 if문으로 narrowing을 해줘야한다.

예제로

function 내함수(x :number|string) {

	let array :number[] = [];
        if (typeof x === 'number') {
            array[0] = x;
        }
}

이런 식으로 x가 숫자인지 문자인지 모르는데, 숫자만 가득한 어레이에 넣고 싶을 때, typeof로 number만 넣어달라고 하면 된다.

 

narrowing에는

typeof 변수
속성명 in 오브젝트자료
인스턴스 instanceof 부모

이렇게 여러가지 타입을 단정지을 수 있으면 narrowing으로 인식한다.

 

만약, array를 narrowing 하려면

Array.isArray(teacher.subject)

이렇게 Array.isArray를 이용하면 된다.

 

이제, assertion문법을 알아보자.

assertion은 타입 덮어쓰기라고 생각하면 된다.

function 내함수(x :number|string) {

	let array :number[] = [];
    	array[0] = x as number;
}

이렇게 as number이라고 쓰면 x가 number타입으로 인식된다.

간단하다고 assertion만 쓰면 혼난다고 한다.

assertion의 용도는

1. narrowing할 때만 사용 즉, string이라는 타입을 as number이렇게 써서 변경하는게 아니다.

2. 무슨 타입이 들어올지 100% 확실할 때만 써야한다. 아님 에러남 문자를 넣어도 숫자로 취급하기에 버그 캐취를 못함

그래서 그냥 비상용으로 써보도록 하자.

 

옛날에는 as 대신 <>썻음

이름 as string

<string>이름