Typescript 애매할 때 딱 잡아바꾸자!(narrowing과 Assertion) Part2

안녕하세요, 지난 시간 Part1에서 자바스크립트 개념, 쓰는 이유, 몇가지 타입종류에 대해서 알아봤는데요, 

이번에는 "애매모호 것들은 가라!"하는 Narrowing과 as 타입을 사용할 때 등 그 때 사용하는 또 다른 문법들에 대해서 알아보도록하겠습니다. 

 

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

이 함수가 왜 에러가 나는지 아십니까?

이유는 Operator '+' cannot be applied to types 'string | number' and 'number'

string | number 같은 union type 에는 일반적으로 조작을 못하게 막아놨기 때문이죠, 애매모호한 것은 타입스크립트 아안에 있을 수 없으니 타입을 조건식으로 만들어서 Narrowing하거나 Assert 해주는 방법이 있습니다.

 

|Type Narrowing ___typeof

if문 등으로 타입을 하나로 정해주는 방법으로,  

if문과 typeof 키워드로 현재 파라미터의 타입을 검사해서 "이게 'number' 타입이라면 ~게 해주세요."

"이게 'string' 타입이면 이렇게 해주세요." 이렇게 작성합니다.

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

"아니, 뭐.. 이렇게까지 타입정하는 것에 코드줄을 많이 늘려.."라고 생각하실 수 있으나

타입이 확실하지 않을 때 생기는 미래의 상황들을 예방하기 위해 쓰는 문법이라고 생각하시면 좋을 것같습니다.

좋은 코드를 만들기 위해 디풴씨브(defensive)하게 코딩하자구요^-^ 

 

아, 그리고 if문 쓸 때는 else { } 를 꼭 써야하며 return 할 조건문이 있다면 나중에 버그가 생길 수 있어서 에러를 내주는 것인데 "noImplicitReturns": false, 또는 tsconfig.js 파일에서 이걸 추가하면 됩니다. 

 

또한 꼭 typeof를 쓸 필요없고 타입을 하나로 확정할 수 있는 코드라면 어떤 것이라도 Narrowing 역할을 대신 할 수 있습니다.  →in, instanceof 키워드들 가능

 

|Type Assertion

" 이 변수의 타입을 number로 정할 때니 그리 알아" 라는 뜻으로 코드를 짜면 타입스크립트가 일단 상태를 정한 것을 보고 에러없이 컴파일러해줍니다.

 

변수명 as string

이런 식으로 as라는 키워드를 사용하면 됩니다.

function 솔함수(x :number | string){ 
    return (x as number) + 1 
}
console.log( 솔함수(1212) )

위와 같이 변수명 as number이라고 쓰면

"나는 이 변수를 number라고 정할터이니 그리 알아"라고 하는 뜻이며 진짜 그렇게 타입을 변경시켜줍니다. 

 

as 키워드를 사용할 때 특징

- union type 같은 복잡한 타입을 하나의 정확한 타입으로 줄이는 역할을 함

- 타입실드 임시 해제방법으로 사용하는 것이여서 실제 코드 실행결과는 as 있을 때나 없을 때나 거의 동일함

   →

코드 실행 결과가 동일하다? 무슨 말이지?        위의 솔함수에서 만약 솔함수('1212')라고 문자열로 입력하면        실행결과는 number + 1의 결과가 아닌 '1212' 에서 '12121'이 됩니다. 

 

as는 그냥 이렇게 할거야.라는 주장만하는 것이고 실제로는 타입을 바꿔주지 않아서 입니다. 따라서 as는 정말 임시용!이구요, 정확히 코드를 짜려면 narring을 써서 typeof 라든지 in 또는 instanceof 를 사용합시다!

 

 

여기서 as 문법에 대해서 더 알고 가자면 예전 assertion문법은 as키워드 대신 < >를 사용했다고합니다.

let sol: number = 11;

(sol as string) + 1;  → 현재 사용
 <string> sol + 1;    → 예전 사용

 

정리를 하자면, 

 

🍖타입스크립트를 사용하는 중에 타입을 딱 하나로 지정해 줄 수 있는 방법이 있었다. 

narrowing의 typeof 가 있으며 in 과 instanceof 도 typeof 로도 타입을 하나로 확정시킬 수 있다면 사용가능

 

🍖또 다른 방법으로 변수명 as 타입  인데, 이것은 실행결과적으로는 반영이 안되어지는 것.

"엥,, 그럴꺼면 as 왜 있는거야.?"

as문법은 위에 말했듯 임시용이라 했지요?

as 키워드는 코드를 짜다가 왜 타입에러가 나는지 모르는 상황에 해결하기 위해 임시로 주입시켜 사용하는 걸로

사용하시면 될 것같아요. 

 

그리고 타입스크립트에서는 타입도 변수에 담아서 사용할 수 있다는 거 아시나요?

그거에 대해서 다음시간에 정리해보려고해요. 안녕🤠