1. 설명

• Union 타입 등의 이유로 타입이 하나로 확실시 되지 않았을 때 확실하게 하는 작업을 narrowing이라고 한다.
• 주로 함수의 파라미터가 union타입일 때 많이 쓰는데 숫자연산을 이유로 파라미터가 반드시 number여야 하는 경우가 그 예이다.

2. 종류

1) if와 typeof 활용

const plusOne = (x: string | number) => {
	if(typeof x === "number"){
    	return x + 1  
    }
  	// 만약 narrowing 없이 x + 1을 했으면 x가 string일 수도 있다고 에러를 낸다
}

2) 객체의 in

type Bird = {
 	fly: true 
}
type Fish ={
 	swim :true 
}
const fn = (animal: Bird | Fish) => {
  if("fly" in animal){
  	animal.fly  
  }
}

3) !

• null과 undefined이 Union타입으로 껴있는 경우에 개인적으로 사용했었다.
• 함수가 null을 받으면 안되는데 넘어가는 변수가 null일수도 있는 경우 "!"를 추가해서 반드시 값이 있다는 표시를 해줬었다.
• 그런데 반드시 있는 것으로 보여지게 하는 문법이라서 실제로 값이 없는 경우에는 문제가 될 수 있는 듯 하다.

4) instanceof

const 제목 = document.getElementById("title")

if(제목 instanceof Element){
 	제목.innerHTML="hihi" 
}

5) Optional Chaining

const 제목 = document.getElementById("title")

if(제목?.innerHTML){
 	제목.innerHTML="hihi" 
}

const 버튼 = document.querySelector("#button")

버튼?.addEventListener("click", ()=>{

})

6) assertion

① 설명

• Union타입 중 특정 타입으로 확실히 하는 방법 중에서 일일이 if씌우고 narrowing하기 싫으면 assertion의 방법도 있다.

const 함수 = (x: number|string) => {
 	let array: number[] = [];
  	array[0]= x as number;
  	// assertion 없었으면 string일 수도 있다는 에러를 띄웠을 것이다.
}

함수(1, 2, 3)

• as 기준으로 왼쪽에 있는 변수를 오른쪽 타입으로 덮어 씌워 달라는 뜻이다.

② 설명

let name: string = 'choi'
name as number;
// 이건 불가함

• assertion은 지정된 Union 타입들 중 그 중 하나의 타입으로 확정할 때 사용하는 것이다.
• 즉 타입이 a,b일 때 그 중 하나로 특정할 때 사용하는 것이지 a에서 b로 바꾸는 용도가 아니라는 것이다.

③ 문제점

const 함수 = (x: number|string) => {
 	let array: number[] = [];
  	array[0]= x as number;
  	// assertion 없었으면 string일 수도 있다는 에러를 띄웠을 것이다.
}

함수("1", 2, 3)
// 이렇게 문자를 넣은 경우 에러인 것을 캐치 못함

• 원래는 타입스크립트가 연산 시 타입검사를 엄격하게 하기에 설령 number가 포함된 Union타입이라고 해도 확실한 number가 아닌 한 에러를 띄운다.
• 따라서 as는 무슨 타입이 들어올지 확실하게 알 때 써야한다.
• 그런데 확실하게 알지는 못하고 쓸 것 같으니 타입스크립트 쓰는 것 아닌가?
• 그래서 그냥 assertion보다는 if와 typeof 등 다른 방법을 사용하는 것이 나은 듯 하다.