typescript 제대로 사용하기

출처: https://ui.toast.com/weekly-pick/ko_20210217

올해 버려야 할 타입스크립트 나쁜 버릇 10가지

원문: https://startup-cto.net/10-bad-typescript-habits-to-break-this-year/

 

 

타입스크립트는 자바스크립트를 사용할 때 협업을 도와주고 버그 발생률도 낮춰주는 고마운 녀석이다

 

어떤 개발자분은 이제는 타입이 없는 자바스크립트로 협업을 할 생각 하면 몸서리가 쳐진다고 할 정도.. ㄷㄷ

 

하지만 타입 스크립트를 사용하지만 잘못 사용하면 "anyscript"가 되어버려서 사용 의미가 사라져 버리기도 한다. 

 

그래서 타입스크립트를 제대로 사용하는 법을 포스팅해두고 나도 적극적으로 지키려고 한다.

 

1. strict 모드를 켜자.

tsconfig.json에서 strict옵션을 true로 맞춰주자

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "strict": true
  }
}

아마 tsconfig에서 따로 설정해주지 않으면 strict옵션이 없을 것이다.

이걸 켜면 엄격하게 타입 체크를 해준다. (이걸 켜놓지 않으면 그냥 타입을 유추하던 것으로 기억함)

 

 

 

2. any타입 사용을 지양하자

만능 해결사 any타입이다

dart에 dynamic 같은 느낌...?

 

보통 구조를 파악하기 힘들 때 any타입을 많이 사용한다..(또는 귀찮아서)

 

하지만 데이터의 구조를 파악하기 힘들다면 any대신 unknown을 사용하는 게 적합하다.

 

any타입을 사용하면 모든 타입 검증을 무력화하기 때문에 타입스크립트를 사용하는 의미가 사라져버리기때문..

 

 

 

3. 제네릭은 온전한 이름을 사용하자

보통 제네릭을 <T> 이런 식으로 많이 사용한다.

그러나 제네릭 타입 변수도 그냥 변수기 때문에 의미를 파악하기 쉽게 이름을 지어주는 것이 좋다

ex) <Content>, <Apple> 등...

 

 

 

4. 타입가드를 사용하자

아래는 추론이 불가능한 타입에 대해 컴파일러에게 강제로 알려주는 코드..

async function loadContents(): Promise<Content[]> {
  const response = await fetch('https://abc.com/contents')
  const contens: unknown = await response.json()
  return contents as Content[]
}

이렇게 사용하면 as SomeOtherType을 tsconfig의 설정을 완화할 필요 없이 빠르고 쉽게 변환할 수 있다

그러나 다른 사람이 코드를 본다면  타입 가드를 사용해서 모든 것을 명시적으로 검증했음을 보장할 필요가 있다.

function isArrayOfContents (obj: unknown): obj is Content[] {
  return Array.isArray(obj) && obj.every(isContent)
}

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

async function loadContents(): Promise<Content[]> {
  const response = await fetch('https://abc.com/contents')
  const contents: unknown = await response.json()
  if (!isArrayOfProducts(contents)) {
    throw new TypeError('Received malformed contents API response')
  }
  return contents
}

 

 

typescript를 제대로 사용하는 몇 가지 방법을 알아봤다.

 

이외에도 글 상단의 링크로 들어가 보면 좋은 정보가 많이 있다.