[typescript] Narrowing & Assertion

조수진·2023년 7월 1일

type이 아직 하나로 확정되지 않았을 경우 Type Narrowing을 사용

Type Narrowing

: if문 등으로 타입을 하나로 정해주는 것

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

함수 안에서 if문 쓸 때는 마지막에 else, else if {} 이거 없으면 에러가 남
return 하지않는 조건문이 있다면 나중에 버그가 생길 수 있어서 에러를 내주는 것
꼭 typeof를 쓸 필요는 없고 타입을 하나로 확정지을 수 있는 코드라면 어떤 것도 Narrowing 역할을 할 수 있습니다.
<Narrowing으로 판정해주는 문법들>
typeof변수
속성명in오브젝트자료
인스턴스instanceof부모

Type Assertion

"이 변수의 타입을 number로 생각해주세요"
이런 뜻으로 코드를 짜면 타입스크립트 컴파일러가 눈감아줌
as 키워드는 맘대로 타입을 개발자 맘대로 주장하는 역할이라 때문에 엄격한 타입체크기능을 잠깐 안쓰겠다는 뜻과 동일함

변수명 as string

이런 식으로 as라는 키워드 씀

function 내함수(x :number | string){ 
    let array :number[] = []
    array[0] = x as number;
}

내함수(123);

[assertion 문법의 용도]
1. 왜 타입에러가 나는지 정말 모르겠는 상황에 임시로 에러해결용으로 사용할 떄
2. 내가 어떤 타입이 들어올지 정말 확실하게 알고 있는데 컴파일러 에러가 방해할 때

< 문제 1 >
클리닝함수( ['1', 2, '3'] ) 이렇게 숫자와 문자가 섞인 array를 입력하면
[1,2,3] 이렇게 숫자로 깔끔하게 변환되어 나오는 클리닝함수를 만들어오고 타입지정

function 클리닝함수(a: (number|string)[]){

	let 클리닝 완료된거 :number[] = [];
    
    a.forEach((b)=>{
    	if(typeof b === 'string'){
          클리닝완료된거.push(parseFloat(b))
        }else {
          클리닝완료된거.push(b)
        }
    })
  
  return 클리닝완료된거

}

console.log(클리닝함수([123,'3']))

parseFloat(string)
: 파라미터로 입력받은 문자열을 실수로 변환 한 값을 리턴함

< 문제 2 >

let 철수쌤 = { subject : 'math' }
let 영희쌤 = { subject : ['science', 'english'] }
let 민수쌤 = { subject : ['science', 'art', 'korean'] }
철수쌤같은 선생님 object 자료를 집어넣으면
그 선생님이 가르치고 있는 과목중 맨 뒤의 1개를 return 해주는 함수를 만들기
그리고 타입지정도 엄격하게!

function 만들함수(x :{subject: string|string[]}){
	if(typeof x.subject === 'string'){
	   return x.subject
    } else if(Array.isArray(x.subject)){
       return x.subject[x.subject.length - 1]
    } else {
       return '없쪄'
    }
}

console.log(만들함수({subject: ['english', 'art']))