TypeScript (2)

이 글은 https://velog.io/@hyeonjoonpark/TypeScript-1 에서 이어진다

우리는 이전 TypeScript 블로그에서 Union Type(2개 이상의 자료형을 가지는 타입)을 만들 때

let 함수(x :string | number) {
	return x + 1;
}

이렇게 사용한다고 했었다

그러나 이 코드에는 문제점이 있다. 이 함수의 매개변수 자료형은 number 도 아니고 string 형도 아닌 number 또는 string이다

이것이 무슨 말인가?
number 또는 string이라는 새로운 자료형이 하나 만들어졌다라고 생각하면 이해하기 쉽다

이 자료형은 type이 하나로 확정된 것이 아니기 때문에 엄격한 TypeScript는 에러를 띄우는 것이다

이럴 때 사용하는 것이 Narrowing 스킬이다
우리는 type을 지정해주는 코드를 if문으로 작성할 수 있다

let 함수(x :string | number) {
	if(type이 number) {
    	return x+1;
    }
}

그렇다면 type이 number인지 아닌지 어떻게 알 수 있을까?

typeof 연산자에 대해 알아보자

let 함수(x :string | number) {
	if(typeof x === 'number') {
    	return x+1;
    }
}

typeof 연산자가 제일 대표적인 Narrowing 스킬이다.

Narrowing 판정하는 문법

• typeof 변수명

• 속성명 in 오브젝트자료

• 인스턴스 instanceof 부모

이런 것들이 있으니 필요한것을 찾아쓰자

---

Narrowing이 귀찮을 때 쓰는 문법이 있다 Assertion 문법에 대해서 알아보자

Assertion 문법

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

우리는 위에서 말했던 것 처럼 x의 자료형이 불확실 하기 때문에 위 코드는 에러가 뜬다는 것을 알 수 있다. 에러를 없애기 위해서 x를 Narrowing 해야하는데 너무 귀찮을 때 assertion 문법을 사용한다

Assertion이란?

• 타입 덮어쓰기 라는 개념으로 이해하면 쉽다

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

이렇게 x 뒤에 as 자료형을 붙여주면 자료형이 덮어서 사용된다
이렇게 사용하면 if문을 사용할 필요가 없다.

---

as 문법의 용도

1. Narrowing 할때

• Union Type을 하나로 확정할 때
  2.무슨 타입이 들어올 지 100% 확실할 때

> Assertion 문법을 사용하면 TypeScript 안쓸게요 하고 선언하는 거랑 마찬가지이므로
  버그나 에러를 잡아주지 않기 때문에 대부분 Narrowing 스킐을 사용한다

정말 필요할 때만 쓰자!