nika-blog

any다루기 - 이펙티브 타입스크립트 본문

FE/typescript

any다루기 - 이펙티브 타입스크립트

nika0 2023. 2. 28. 21:06

타입스크립트는 정적이면서도 동적인 특성을 동시에 가지기 때문에, 프로그램의 일부분에만 타입 시스템을 적용할 수 있습니다. 

 

38. any 타입은 가능한 한 좁은 범위에서만 사용하기

인수 안에서 as any 를 사용하는 것이 인수를 const 변수로 선언할 때 any로 타입 선언하는 것도 좋습니다. 
함수의 매개변수에서만 사용된 표현식은 다른 코드에는 영향을 미치지 않기 때문입니다. 

ex. 

  function f1() {
    const x : any = expressionReturnigFoo();
    processBar(x);
  }
  
  function f2() {
    const x = expressionReturningFoo();
    processBar(x as any);
  }

 

* 타입스크립트가 함수의 반환 타입을 추론할 수 있는 경우에도 함수의 반환 타입을 명시하는 것이 좋습니다. 함수의 반환 타입은 절대 any로 반환하지 않는게 좋습니다. 

 

*@ts-ignore 을 any 대신 사용하도 오류를 제거할 수 있느나, 근본적인 원인을 해결한 것이 아니기 때문입니다. 

 

config 객체 전체를  as any로 선언하는 것보다 일부만 하는 것이 좋습니다. 

ex.

const config: Config = {
  a: 1,
  b: 2,
  c: {
    key: value as any
  }
};

39. any를 구체적으로 변형해서 사용하기 

any 대신 any[]를 사용하면 lenght 타입도 체크되고, 배열인지 아닌지도 체크가 가능합니다.

 

객체일 때는 {[key: string]: any} 로 선언할 수도 있습니다. 

 

*object 타입은 객체의 키를 열거할 수는 있지만 속성에 접근할 수 없다는 점에서 약간 다릅니다. 

 

함수 타입인데, 잘 모를 때 

  type Fn0 = () => any; // 매개변수 없이 호출 가능한 모든 함수
  type Fn1 = (arg: any) => any; // 매개변수 1개
  type FnN = (...args: any[]) => any; //모든 개수의 매개변수, "Function" 타입과 동일합니다.

40. 함수 안으로 타입 단언문 감추기 

타입 선언문은 일반적으로 타입을 위험하게 만들지만 상황에 따라 필요하기도 하고 현실적인 해결책이 되기도 합니다. 불가피하게 사용해야 한다면, 정확한 정의를 가지는 함수 안으로 숨기면 좋습니다. 

41. any의 진화를 이해하기

타입의 진화는 타입 좁히기와는 다릅니다. 배열에 다양한 타입의 요소를 넣으면 배열의 타입이 확장되며 진화하는 것과 같습니다. 

일반적인 타입들은 정제되기만 하는 반면, 암시적 any 와 any[] 타입은 진화할 수 있습니다. any를 진화시키는 방식보다 명시적 타입 구문을 사용하는 것이 안전한 타입을 유지하는 방법입니다. 

 

42. 모르는 타입의 값에는 any 대신 unknown을 사용하기

unkown 은 any 대신 쓸 수 있는 타입 시스템에 부합하는 타입입니다. 

any

  • 어떠한 타입이든 any 타입에 할당 가능하다. 
  • any 타입은 어떠한 타입으로도 할당 가능하다. 

unkown

  • 어떠한 타입이든 any 타입에 할당 가능하다.
  • unknown은 오직 unkown과 any 에만 할당 가능하다. 

never

  • 어떤 타입도 never에 할당할 수 없음
  • 어떠한 타입으로도 할당 가능

{} : null 과 undefined를 제외한 모든 값을 포함

object: 비기본형 타입

 

43. 몽키 패치보다는 안전한 타입을 사용하기

전역 변수나 DOM 에 데이터를 저장하지 말고, 데이터를 분리하여 사용해야 합니다. 

내장 타입에 데이터를 저장해야 하는 경우, 안전한 타입 접근법 중 하나를 사용해야 합니다. (보강이나 사용자 정의 인터페이스로 단언)

보강의 모듈 영역 문제 이해하기

44. 타입 커버리지를 추적하여 타입 안정성 유지하기

타입 커버리지 확인 라이브러리 : type-cover-age

npx type-coverage

any의 개수를 추적해서 백분률로 알려준다. 

--detail 플래그 추가 : any 타입이 있는 곳을 모두 출력해준다. 

 

참고: 이펙티브 타입스크립트

http://www.yes24.com/Product/Goods/102124327