개발/이펙티브 타입스크립트

[이펙티브 타입스크립트+24] 일관성 있는 별칭 사용하기

Junghyun Kim 2021. 8. 28. 01:18
반응형

3장 타입 추론
아이템 24 | 일관성 있는 별칭 사용하기

3줄 요약
1. 일관성 있는 변수 식별자 사용하기.
2. 새로운 변수 별칭보다는 객체 비구조화 고려하기.
3. 

참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다.


이번 아이템에서 이야기하고 하는 바는 식별자를 일관성 있게 사용하자입니다.

일관성있게 사용하지 않은 예시.

타입스크립트에서 이렇게 식별자를 일관성 없이 사용하는 것을 지양하는 이유는 타입 좁히기와 관련이 있습니다.

Point라는 타입에 z 라는 속성이 optinoal 이라고 가정하겠습니다.
이때 별칭을 일관성 없이 사용하면 아래와 같이 에러가 발생합니다.

doSomething(zPo) 라인에서 에러가 발생한다.

타입스크립트 컴파일러가 에러를 내뿜습니다. 
에러의 내용은 아래와 같습니다.

zPo의 타입은 좁혀지지 않았다.

zPo의 타입은 여전히 undefined 타입과 number 타입의 유니온 타입입니다.
그렇다면 point.z의 타입은 좁혀졌을까요?

에러가 발생하지 않는다.

point.z 변수는 zPo의 변수와는 다르게 타입이 number 타입으로 좁혀짐을 확인할 수 있습니다.
이 예시를 통해서 알 수 있듯이 변수 식별자를 일관성 있게 사용하는 것이 중요합니다.
그리고 이러한 상황이 있을 때는 객체 비구조화를 이용하면 일관성 있게 변수를 사용할 수 있습니다.

객체 비구조화를 통한 일관성있는 변수 이름 활용.

 

 

Materials From
1. <이펙티브 타입스크립트>(댄 밴더캄 지음, 장원호 옮김, 인사이트 2021)
2. 타입스크립트 공식 홈페이지 | https://www.typescriptlang.org/

 

Typed JavaScript at Any Scale.

TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.

www.typescriptlang.org

 


참고)
태그된 유니온 타입에서는 비구조화와 관련하여 재미있는 예시가 있습니다.
아래 코드에서 a 함수에서는 개발자의 의도대로 동작하지만 b 함수에서는 개발자의 의도대로 동작하지 않습니다.
왜 그런지 생각해보고 아래 깃헙 이슈에 가서 한번 살펴보는 것을 추천합니다.

https://github.com/microsoft/TypeScript/issues/23613

 

Destructuring breaks tagged union case inference · Issue #23613 · microsoft/TypeScript

TypeScript Version: 2.8.3 Search Terms: union, destructure Code type Message = { type: 'sendMessageToThread', data: { threadId: number, message: string }} | { type: 'createThread', ...

github.com

 

반응형