앞 게시물에서 만든, 함수에 숫자 혹은 문자를 집어넣으면 +1 해주는 함수다.
그런데 이 함수는 에러가 나고 있죠.
왜냐하면 string | number 같은 union type에는 일반적으로 조작을 못하게 막아놓았다... 이런 에러를 보게 된다면 타입을 하나로 Narrowing 해주거나 Assertion 해주면 된다.
Type Narrowing
Type Narrowing이란 if문 등으로 타입을 하나로 정해주는 것을 뜻한다.
그래서 아까 함수를 사용할 때,
if문과 typeof 키워드로 현재 파라미터의 타입을 검사해서
"이게 'number' 타입일 때 이렇게 해주시고여~ "string"타입일 때는 이렇게 해주세요"
이런 마음으로 코드를 짜야 정상적으로 사용이 가능하다..
계속 강조하지만 타입스크립트는 타입 애매한 것을 싫어해서 귀찮아도 해야한다.
그리고 또 함수 안에서 if문을 사용할 때 마지막에 else문이 없으면 에러가 난다. return 하지않는 조건문이 있다면 나중에 버그가 생길 수 있어서 에러를 내주는 것인데
"nolmplicitReturns": false, 를 tsconfig.js파일에 추가하면 되지만 굳이 굳이 수정하는 것 보다는 엄격하게 쓰는 것이 좋다.
❗️그리고 꼭 typeof를 사용할 필요는 없고 타입을 하나로 확정지을 수 있는 코드라면 어떤 것도 Narrowing 역할을 할 수 있다.
❗️in, instanceof 키워드도 사용할 수 있다.
Type Assertion
아니면 타입을 간편하게 assert할 수도 있다.
"이 변수의 타입을 number로 생각해주세요" 이런 뜻으로 코드를 짜면 타입스크립트 컴파일러가 눈감아주는 것 이라고 보면 된다.
변수명 as 타입
이런식으로 as라는 키워드를 쓰면 된다.
변수명 as number 라고 쓰면 "나는 이 변수를 number라고 주장한다" 라는 뜻이고 실제로 그렇게 타입을 변경해준다. 그러니까 as를 사용하면 타입스크립트 컴파일러에게 반기를 들 수 있다.
근데 이러려면 내가 함수에 무조건 숫자가 들어온다는 사실을 알고 있어야 안전하게 쓸 수 있는 문법이다.
as 키워드 사용시 특징이 있는데
1. as키워드는 Union type 같은 복잡한 타입을 하나의 정확한 타입으로 줄이는 역할을 한다.(number 타입을 as string 이런식으로 바꾸려고 하면 에러가 난다.)
2. 사실은 그냥 타입 쉴드 임시 해제용이다. 실제 코드 실행결과는 as 있을 때나 없을 때나 거의 동일하다.
🆀 : 위 예시코드에서 a("123") 이렇게 숫자말고 문자를 입력하면 어떻게 될까?
🅰️ : as number라고 지정해 주긴 했지만 number 타입 처럼 + 1 해주진 않는다. 콘솔창에 결과를 출력해보면 '1231'로 출력된다. as는 그냥 주장을 하는 것이지 실제로 타입을 바꿔주진 않는다.
as를 사용하게 되면 간편하지만, 정확한 코드를 만들고 싶다면 narrowing을 쓰자.
as 키워드는 맘대로 타입을 개발자 마음대로 주장하는 역할이기 때문에 엄격한 타입체크기능을 잠시 안쓰겠다는 뜻이다.
as문법은 이럴 때 쓰자.
1. 왜 타입에러가 나는지 정말 모르는 상황에 임시 에러 해결용으로 사용
2. 내가 어떤 타입이 들어올지 정말 확실하게 알고 있는데 컴파일러 에러가 방해할 때..
대부분의 상황에서는 as 보다 엄격하고 좋은 type narrowing으로 해결할 수 있다.
