[발췌] TypeScript에서 고쳐야 할 나쁜 습관 10가지

최근 프로젝트 전체를 JavaScript에서 TypeScript로 변환하는 작업을 하면서 우연히 발견하게 된 아티클인데 좋은 지적인 것 같아서 정리해보았다.

 

1. strict 모드를 사용하지 않는 것

tsconfig.json에 strict 모드를 활성화 시키자.

 

2. Fallback으로 || 옵셔널 오퍼레이션을 사용하는 것

=> ??을 사용하던지 더 나은 방법은 파라미터 레벨에서 fallback을 써주는 것이다.

 

3. any 타입을 사용하는 것

unknown타입을 대신해서 쓰자. any는 타입체크를 비활성화시킨다. 즉, 버그를 확인하기 어려워진다.

 

4. val as SomeType

강제로 특정 타입이라고 컴파일러에 알려주는 방식.

function isArrayOfProducts (obj: unknown): obj is Product[] {
  return Array.isArray(obj) && obj.every(isProduct)
}

function isProduct (obj: unknown): obj is Product {
  return obj != null
    && typeof (obj as Product).id === 'string'
}

async function loadProducts(): Promise<Product[]> {
  const response = await fetch('https://api.mysite.com/products')
  const products: unknown = await response.json()
  if (!isArrayOfProducts(products)) {
    throw new TypeError('Received malformed products API response')
  }
  return products
}

아무리 지금 안전하다고 언제 변경이 될지 알 수 없기 때문에 타입 체크 가능하도록 하는 게 안정적이다.

 

5. 테스트에서 as any

데이터를 mock할 때 재사용 가능하게 만들어라. 가끔 테스트할 때 데이터 로직이 복잡한데 그 중 일부만 사용될 때가 있다. 그렇다고 해서 일부 데이터만 정의하지 말고 웬만하면 재사용가능하게 mock을 만들어주는 게 좋다. (특히 프로퍼티가 변경될지 모르는 상황에서)

 

6. 옵셔널 프로퍼티

한 모델에 옵셔널로 때려박는게 아니라 모델들을 명시적으로 사용에 맞게 잘 구분시키는 것이 좋다.

 

7. 한 글자 제네릭

이해하기 쉽게 설명가능한 단어를 사용하기

 

8. 불린이 아닌 불린 체크

값이 정의되었는지 바로 if로 확인하는 게 아니라 !== undefined로 확인할 것

 

9. 뱅뱅 오퍼레이터

!! <- 이걸 뱅뱅 오퍼레이터라고 하더라. 불린이 아닌 값을 불린으로 바꾸는 것 하지말기 (해석이 난해해진다)

 

10. != null

쓰지 말기. 타입스크립트에서는 null과 undefined를 철저히 구분하는데 null은 실제로 없음을 의미하고 undefined는 아직 정해지지 않음을 의미한다.

 

레퍼런스

startup-cto.net/10-bad-typescript-habits-to-break-this-year/