[아티클럽] 올해 버려야 할 타입스크립트 나쁜 버릇 10가지를 읽고

2021년 05월 17일, 22:21

타입스크립트를 할 때 주의해야할 점 10가지

  1. tsconfig.json의 strict 옵션을 꼭 설정한다.

    • 엄격한 룰을 적용시켜놓으면 개발을 하는 과정에서는 힘들지 몰라도 추후 유지보수 과정에서 시간을 절약할 수 있다.

  2. default 값을 정의해서 사용한다.(?? 연산자를 사용한다)

    • 파라미터에 default값을 설정해주거나, ??를 이용해서 null 혹은 undefined인 경우에 default 값을 정의해준다.

  3. any 타입보다는 unknown을 사용한다.

    • any의 경우는 타입 검증을 무력하게 만든다. any의 경우는 type을 체킹해주지 않아도 property에 접근하는 경우 에러가 나지 않지만, unknown은 에러가 난다
    • unknown의 경우는 타입 체크가 필수적이므로 any보다 안전하다.

  4. val as SomeType을 지양하자.

    • type이 실제로 맞는지 아닌지 검증이 이루어지지 않은 경우가 생길 수 있다. 그러므로 타입 가드를 이용해서 타입을 검증을 해주는 것이 더 좋다.

  5. 테스트에서의 as any를 사용하지 말자.

  6. 옵셔널 프로퍼티

     // 나쁜 코드
 interface Product {
   id: string
   type: 'digital' | 'physical'
   weightInKg?: number
   sizeInMb?: number
 }

 // 좋은 코드
 interface Product {
   id: string
   type: 'digital' | 'physical'
 }

 interface DigitalProduct extends Product {
   type: 'digital'
   sizeInMb: number
 }

 interface PhysicalProduct extends Product {
   type: 'physical'
   weightInKg: number
 }

    타입을 사용했을때 가장 큰 장점은 런타임에서 문제가 발생하기 전에 알 수 있다는 점이다.
    좀 더 명시적인 타입을 가질수록 발견되지 않을 수 있었던 버그에 대한 컴파일 타입 검사를 받을 수 있다.

  7. 한 문자 제너릭을 지양하자.

    • 제너릭 타입 변수도 변수다. 이름에 의미가 있으면 더욱 파악하기 쉽다.

  8. boolean이 아닌 것의 boolean 검사

    • 0, ''의 경우 false로 취급되는데, 이러한 상황을 위해서 !== undefined or !== null과 같이 명시적으로 해주면 좋다.(실제로 확인하길 원하는 것이 명확해야한다.)

  9. !!과 같은 형태를 사용 금지하자.

    • 숏코드는 이해가 어렵게 만든다. 또 이러한 경우가 잠재적인 버그를 생성할 수 있다.

  10. != 보다는 !== 엄격한 연산자를 사용한다.

참고