[Day 65] TypeScript Type Narrowing & Assertion 문법

grl pwr·2022년 7월 26일
0

📌 Type Narrowing


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

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

첫 줄 코드를 살펴보면 x: number | string이다. '|' 표시는 or이라는 뜻. 그래서 x는 type이 number 또는 string이라는 건데 거기에 조건을 걸어두는 것이다. 만약에 x값이 'number'타입일 경우 이렇게 해주세요. 만약에 x값이 'string'타입이면 이렇게 해주세요. 타입 스크립트는 타입이 애매한 것에 매우 strict하기 때문에 필수로 해야한다. 그리고 타입이 확실하지 않을 때 생기는 부작용을 막기 위한 장치로도 쓰인다고 한다. 이것을 defensive하게 코딩한다고 한다. (애플코딩)

그리고 함수 안에서 if문 마지막에 else {}를 쓰지 않으면 에러가 난다. return 하지 않는 조건문이 있다면 나중에 버그가 생길 수 있어서 에러를 내주는 것. 꼭 typeof를 쓸 필요는 없고 타입을 하나로 확정 지을 수 있는 코드라면 어떤 것도 narrowing 역할 할 수 있다. in, instanceof 키워드도 사용 가능.


📌 Type Assertion


또는 타입을 간편하게 assert 할 수도 있다. "이 변수의 타입을 number로 생각해 주세요'라고 코드를 짜면 타입스크립트 컴파일러가 눈감아준다. 변수명 as string 이런 식으로 as라는 키워드 쓰면 된다.

function myFunction (x: number | string) {
  return (x as number) + 1
}
console.log(myFunction(123))

위 두 번째 줄처럼 x as number 라고 쓰면 x를 number라고 ㅅ주장하는 것이고 그렇게 타입이 변경된다. 확실히 parameter x값으로 숫자가 들어올 경우에만 사용한다.


📌 Type Assertion 특징


  • union type (x: number | string) 같은 복잡한 타입을 하나의 정확한 타입으로 줄이는 역할을 수행
  • 타입 실드 임시 해제용. 실제 코드 실행 결과는 as 있을 때나 없을 때나 거의 동일. 그러면 이제 변수를 숫자로 가정해서 가공할 수 있다
  • as 문법을 쓰면 간편하지만 정확한 코드를 위해서는 narrowing을 사용하자
  • as 키워드는 개발자가 주장하는 것이기 때문에 엄격한 타입 체크 기능을 잠시 안 쓰겠다는 뜻과 동일
  • 가끔 타입을 강제로 부여하는 것을 하나 만들어 사용해야 할 때가 있다. 그럴 때 함수에 데이터를 넣으면 as 타입명을 붙여서 return 하는 함수를 만들어서 사용

📌 As 문법 사용


  • 왜 타입에러가 나는지 모르겠는 상황에서 임시로 에러 해결용
  • 어떤 타입이 들어올 지 확실하게 알고 있는데 컴파일러 에러가 방해할 때
profile
4대륙 개발자

0개의 댓글