DIL: 이펙티브 타입스크립트

스터디: 월간 CS, https://github.com/monthly-cs/2024-05-effective-typescript
작성일: 2024-06-03
작성자: dusunax

---

5장: any 다루기 Use the Narrowest Possible Scope for any Types

• 타입 시스템 선택적 (option) 이고 점진적 (gradual) 이기 때문에 정적이면서도 동적인 특성을 가짐 동시에 가진다.

선택적 타입 시스템 (Optional Typing)

• 프로그램의 일부에만 타입 시스템을 적용할 수 있다 -> 점진적 마이그레이션
  • 타입 체크를 비활성화시켜주는 any 타입

점진적 타입 시스템 (Gradual Typing)

• 시스템이 부분적으로 타입을 검증하는 방식. 코드의 일부는 동적으로, 다른 일부는 정적으로 타입 검사를 수행할 수 있ek.
• 필요에 따라 점진적으로 타입을 추가할 수 있다. 초기에는 동적 타입으로 시작하고, 점차 정적 타입을 추가하여 타입 안정성을 높일 수 있다.

동적 특성 vs 정적 특성

• 동적 특성
  • 동적 타이핑: 타입을 명시하지 않은 변수나 함수는 동적으로 타입이 결정된다. 즉, 런타임 시에 변수의 타입이 결정되며, 다양한 타입의 값을 가질 수 있다.
  • 타입을 명시하지 않은 부분은 런타임에 동적으로 타입을 결정
  • 동적 타입 언어의 장점인 간결한 문법과 빠른 개발 사이클을 유지. 유연함!
• 정적 특성
  • 정적 타이핑: 타입을 명시한 변수나 함수는 정적으로 타입이 결정된다. 즉, 컴파일 시에 타입이 고정되며, 해당 타입의 값만을 가질 수 있다.
  • 컴파일 타임에 타입 오류를 발견하고 수정
  • 타입을 명시함으로써, IDE에서의 자동 완성, 코드 리팩토링, 타입 안전성 등의 혜택

아이템 38: any 타입은 가능한 한 좁은 범위에서만 사용하기 Use the Narrowest Possible Scope for any Types

함수와 any

• 매개변수에만 사용하기
• 함수의 반환 타입은? any가 반환되어 함수 바깥에 영향을 미치는 것을 방지하기 위해 반환 타입을 명시하는 것이 좋다.

function f1() {
  const x: any = expressionReturningFoo(); // ❌ 🤧
  processBar(x);
}
function f2() {
  const x = expressionReturningFoo(); // better.
  processBar(x as any);
  // 함수의 매개변수에만 사용된 표현식이므로 다른 코드에는 영향을 미치지 않기 떄문
  // @ts-ignore, @ts-expect-error를 사용해서 any를 사용하지 않고 오류 제거도 가능. (런타임 오류 가능성)
}

객체 속성과 any

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

const config: Config = {
  a: 1,
  b: 2, // 다른 속성은 타입 체크
  c: {
    key: value as any, // 필요한 속성의 값만 any
  },
};

Things to Remember

• Make your uses of any as narrowly scoped as possible to avoid undesired loss of type safety elsewhere in your code.
  • 의도치 않은 타입 안정성의 손실을 피하기 위해서, any를 최대한 좁게 사용할 것
• Never return an any type from a function. This will silently lead to the loss of type safety for code that calls the function.
  • 당신이 any를 반환한다면... 함수를 호출한 곳에서 타입 안정성을 아무도 모르게 조용히 잃게 된다....💀
• Use as any on individual properties of a larger object instead of the whole object.
  • 전체 객체 any를 사용하지 말고, 개별 속성에 적용할 것

아이템 39: any를 구체적으로 변형해서 사용하기 Prefer More Precise Variants of any to Plain any

• any는? 자바스크립트에서 표현할 수 있는 모든 값의 범위
  • 숫자, 문자열, 배열, 객체, 정규식, 함수, 클래스, DOM 엘리먼트, null, undefined
  • any보다는 더 구체적으로 표현할 수 있는 타입이 있다!

예시: any 보다는 any[]

• 함수 내의 array.length 타입 체크
• 함수의 반환 타입이 any 대신 number
• 함수가 호출될 때, 매개변수가 배열인지 체크

function getLengthBad(array: any) {
  // ❌
  return array.length;
}
getLengthBad(/123/);
getLengthBad(null);

function getLength(array: any[]) {
  return array.length; // This is better !
}
getLength(/123/); // 오류
//        ~~~~~
// Argument of type 'RegExp' is not assignable to parameter of type 'any[]'.
getLength(null); // 오류
//        ~~~~
// Argument of type 'null' is not assignable to parameter of type 'any[]'.

• 이중배열은? any[][]
• 값을 알 수 없는 객체다?
  • {[key: string]: any} && Record<string, any>
    • 구체적인 키와 값의 타입을 동적으로 정의
  • object
    • 비기본형 non-primitive 타입을 포함하는 object 타입, 키를 열거할 수 있지만, 속성에 접근할 수 없다
    • 객체의 구조나 프로퍼티에 대해 타입 검사를 할 수 없다.
      • 왜냐? 구체적인 키-값 쌍을 나타내지 않기 때문
• 객체이지만 속성에 접근할 수 없어야 한다면? unknown => 이후 아이템 42에 두둥둥장 예정

function hasAKeyThatEndsWithZ(o: Record<string, any>) {
  for (const key in o) {
    if (key.endsWith("z")) {
      console.log(key, o[key]); // key를 통해 속성에 접근
      return true;
    }
  }
  return false;
}

function hasAKeyThatEndsWithZ(o: object) {
  for (const key in o) {
    if (key.endsWith("z")) {
      console.log(key, o[key]);
      //               ~~~~~~ Element implicitly has an 'any' type
      //                      because type '{}' has no index signature
      // {} 형식에 인덱스 시그니처가 없으므로 요소에 암시적인 any가 있음
      return true;
    }
  }
  return false;
}

함수의 타입과 any

type Fn0 = () => any; // 매개변수 없이 호출 가능한 모든 함수
type Fn1 = (arg: any) => any; // 매개변수 1개
type FnN = (...args: any[]) => any; // 모든 개수의 매개변수 === Function
// args가 배열 형태임을 알 수 있다.
const numArgsBad = (...args: any) => args.length; // any를 반환한다
const numArgsGood = (...args: any[]) => args.length; // nubmer를 반환한다

Things to Remember

• When you use any, think about whether any JavaScript value is truly permissible.
  • any를 사용할 때, 모든 자바스크립트 값이 정말로 허용되어야 하는 지 생각하기
• Prefer more precise forms of any such as any[] or {[id: string]: any} or () => any if they more accurately model your data.
  • 그냥 any보다 정밀한 형태를 모델링하기.
  • any를 사용한 구체적인 형태: any[], any[][], {[id: string]: any}, Record<string, any>, () => any

아이템 40: 함수 안으로 타입 단언문 감추기 Hide Unsafe Type Assertions in Well-Typed Functions

• 외부 타입 정의는 간단하지만, 함수 내부 로직이 복잡한 경우!
  • 내부에 타입 단언을 사용하고, 외부로 드러나는 타입 정의를 정확히 명시
  • 프로젝트에 타입 단언문이 드러나 있지 않도록 감추기

내일 이어서 계속.....