타입 확정 - Narrowing & Assertion

크롱·2023년 7월 18일
0

TypeScript

목록 보기
3/25

들어가기 전 연습문제

함수에 숫자 또는 문자를 집어넣으면 자릿수를 세어 출력해주는 함수를 만들어보십시오.
예를 들어 '245' 이런 문자를 입력하면 3이 return 되어야합니다.
숫자도 마찬가지로 9567 이런 숫자를 입력하면 4가 return 되어야합니다.
숫자 또는 문자 이외의 자료가 들어오면 안됩니다.

function count(x: number|string) :number{
  return x.toString().length
  
}

👻해설👻
==>  숫자는 .length를 붙여줄 수 없다!
문자로 무족권 변환해줘야함.

왜 에러가 날까요?😵‍

function fun(x: number|string): void {
  console.log(x+3); //💥💥에러가뜹니다
  현재 여기서 x의 타입이 union (또는) 이기 때문! number|string
}
fun(3)



🌝 Type Narrowing

위의 경우처럼 type이 아직 하나로 확정되지 않았을 경우 type narrowing 써야합니다
여기서 narrowing 이란? 타입을 하나로 정해주는거에요

function 함수(x :number|string){
  let arr :number[] = [];
  if(typeof x === 'number'){  <==타입은 문자열로!
    arr[0] =x;
  }
  console.log(arr) 
}

🌚 Assertion (타입 덮어쓰기)

type narrowing을 주로 써야하지만, assertion 문법도 알아보자.

assertion 문법의 용도
1. type Narrowing
2. 무슨 타입이 들어올지 확실하때 쓰자

function 함수(x :number|string){
  let arr :number[] = [];
  arr[0] = x as number; <== x가 number타입됨! 에러안뜸
  console.log(arr) 
}

위에 2번에서 정말확실할때 써야하는 이유는, 
함수('11') 라고해도 에러가안뜸
즉,버그추적을 못한다.
profile
👩‍💻안녕하세요🌞

1개의 댓글

comment-user-thumbnail
2023년 7월 18일

뛰어난 글이네요, 감사합니다.

답글 달기