[TypeScript] any 잘 사용하기 / unknown / any 타입 추적하기

 

any는 남발하지 않는 것이 좋지만 꼭 사용해야한다면 가능한 한 좁은 범위에서 사용하도록 한다.

any는 자바스크립트에서 표현할 수 있는 모든 값을 아우르는 매우 큰 범위의 타입이다. any 타입에는 모든 숫자, 문자열, 배열, 객체, 정규식, 함수, 클래스, DOM 엘리먼트는 물론 null, undefined까지 포함한다.

 

 

 

---

 

 

 

◽ 변수에 사용할 때

// 이렇게 사용하지 않는다.
const f1 = () => {
  const x: any = expresstioReturningFoo()
  useBar(x)
}

// 다른 코드에는 영향을 끼치지 않도록 매개변수에만 사용한다.
const f2 = () => {
  const x = expresstioReturningFoo()
  useBar(x as any)
}

 

◽ 객체에 사용할 때

// 이렇게 전체에 사용하지 않는다.
const config: Config = {
  a: 1,
  b: 1,
  c: {
    key: value
  },
} as any

// 다른 요소는 타입을 체크할 수 있도록 최소한으로 좁혀 사용한다.
const config: Config = {
  a: 1,
  b: 1,
  c: {
    key: value as any
  },
}

 

 

◽ 객체이지만 값을 알 수 없을 때

// 객체이지만 값을 알 수 없다면 이렇게도 사용할 수 있다.
const foo = (item: { [key: string]: any }) => {
  // ...
}

// 이렇게도 사용할 수 있지만, object 타입은 객체의 키를 열거할 수는 있지만 속성에 접근할 수는 없다.
const foo = (item: object) => {
  // ...
}

 

 

💡 any 단언문을 사용해도 될까?

함수의 return 타입에 any를 사용하지 않는다. 함수 내부에서 any를 사용하고, 외부로 드러나는 함수 자체의 타입은 명확한 타입으로 명시하는 것이 더 좋은 방법이다. 제대로 타입이 정의된 함수 안으로 타입 단언문을 감추는 것이 더 좋은 설계이다.

 

 

 

---

 

 

 

◽ any의 진화(evolve)

타입을 지정하지 않았을 때 해당 변수는 암시적 any가 된다. 암시적 any에 어떤 값을 할당할 때 진화가 발생한다.

타입이 자동으로 추론되지만 any를 진화시키는 방식보다는 명시적 타입 구문을 사용하는 것이 안전한 타입을 유지하는 방법이다.

export const range = (start: number, limit: number) => {
  // 타입을 선언하지 않았지만
  const out = []
  for(let i = start; i < limit; i++) {
    out.push(i)
  }
  // number[] 타입이 된다.
  console.log(typeof out); // number[]
}

export const range = (start: number, limit: number) => {
  // 하지만 이렇게 any로 타입을 주는 경우에는
  let out: any
  for (let i = start; i < limit; i++) {
    out.push(i)
  }
  // number[]로 추론하지 않고 any[] 타입이다.
  console.log(typeof out)
}

 

 

◽ 모르는 타입의 값에는 any 대신 unknown을 사용하자

unknown은 any 대신 사용할 수 있는 안전한 타입으로, 어떠한 값이 있지만 그 타입을 알 지 못하는 경우라면 unknown을 사용하면 된다. 

정말로 null과 undefined가 불가능하다고 판단되는 경우에는 unknown 대신 {}를 사용한다.

 

 

💡 Any 타입을 추적해보자

npm의 type-coverage 패키지를 활용하여 내 프로젝트에 any가 몇 개있는지 확인할 수 있다.

$ npx type-coverage

#이 플래그를 붙이면 any 타입이 있는 곳을 모두 출력해준다.
$ npx type-coverage --detail

 

 

 

---

 

 

 

출처

댄 밴터캄, 이펙티브 타입스크립트 (프로그래밍 인사이트, 2021)

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.