코딩애플 Typescript - Narrowing 할 수 있는 방법 더 알아보기

김원종·2024년 4월 12일
0

TypeScript 학습

목록 보기
14/28
post-thumbnail

Narrowing 하면서 코드를 구성하는것도 힘든데 특히 undefined 타입일 경우 처리하는것 복잡한 object 자료들 narrowing 하는것 이것들이 가장 잦고 귀찮다. 이것을 쉽게 하는 법을 알아보자.

null & undefined 타입체크하는 경우가 매우 잦다.이렇게 코드를 구성해야하는데 if문을 두개를 사용하자니 너무 번거롭고 코드가 길어진다.

그럴때 이렇게 if문에 && 기호를 사용해서 작성해준다면 만약 a가 undefined 가 들어오면 위 조건식이 undefined가 되어 if문 안 조건이 실행되지 않는다. a가 만약 string이 들어오면 우측의 조건에 들어가 if문 안 코드가 실행이 될것이다. 즉 a 가 undefined면 if문이 실행되지 않고 string이면 if문이 실행된다. 이것도 일종의 narrowing으로 볼수있다. 익숙하지 않으면 안쓰는것도 좋다. if/else문이 더 명확하긴 하다.

만약 이런 코드가 있을때 Fish타임이면 이라는 조건을 걸고싶은데 typeof를 쓰는게 맞을까?
typeof 연산자는 number string boolean object 이럭식으로만 판정이 가능하다. 그렇기 때문에 typeof는 사용할수가 없다. 그럴때는 in 키워드로 object narrowing 이 가능하다.

이런식으로 코드를 작성하면 위 animal이라는 타입에 swim이 들어있는지 체크하게된다. 즉 서로 가진 속성명이 다르면 in을 사용해보도록 하자.

이것과 유사한것은 instance of 가 있다. object 두개가 비슷하면 부모 class가 누군지 물어봐서 narrowing이 가능한것이다.

이런식으로 날짜라는 변수의 부모가 Date인지 체크할수가 있다. 즉 날짜라는 변수가 Date로부터 생산이 되었는지 체크하는 것이다.

이런식인 코드가 있을때 object 타입이 둘다 비슷하게 생겼는데 narrowing을 어떻게 할까? in키워드는 독단적으로 가지고있는 속성이 있어야 사용이 가능한데 현재는 속성도 똑같다. 즉 in키워드는 사용이 불가하다는 것이다.그리고 Date같은 부모class가 없기때문에 instanceof도 사용이 불가능하다. 그럼 뭘 사용해야할까? 굳이 type을 두개로 만든것이 오류이긴 하지만 학습이니 넘어가도록 하자.

비슷한 object 타입일 경우 literal type을 강제로 만들어두면 나중에 도움이 된다. 위에서 Car에는 wheel이라는 조건은 무조건 특수한 string 즉 '4개' 라는 값만 들어올수 있고 아래는 '2개'라는 값만 들어올수 있다. 이걸로 narrowing을 하면 되지 않을까?
이런식으로 특수한 string값을 가지면 그걸 구분자로 삼을수 있을것이다.
즉 비슷한 object타입이 많을때는 literal type을 넣어주는것이다.구분을 위한 고정된 값을 부여해주면 유니크하게 사용할수있다.

요약하면 논리적으로 어떤 타입인지 특정지을수 있다면 narrowing으로 인정해준다.

profile
개린이

0개의 댓글