📄 Item39 ~ 43

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

• any 타입의 값을 그대로 정규식이나 함수에 넣는 것을 권장하지 않는다.

// bad!
function getLengthBad(array: any) {
  return array.length;
}

// good!
function getLength(array: any[]) {
  return array.length;
}

• getLength 함수와 같이 작성해야 하는 이유
  • 함수 내의 array.length 타입이 체크됨
  • 함수의 반환 타입이 any 대신 number로 추론됨
  • 함수 호출될 때 매개변수가 배열인지 체크됨
• 함수의 매개변수 구체화 예시

function hasTwelveLetterKey(o: {[key: string]: any}) {
  for (const key in o) {
    if (key.length === 12) {
      return true;
    }
  }
    
  return false;
}

• 함수의 타입에 any 적용하는 예시

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

const numArgsBad = (...args: any) => args.length; // any를 반환
const numArgsGood = (...args: any[]) => args.length; // number를 반환

• any를 사용할 때는 정말로 모든 값이 허용되어야만 하는지 면밀히 검토해야 한다.
• any 보다 더 정확하게 모델링할 수 있도록 any[] 또는 {[id: string]: any} 또는 () => any 처럼 구체적인 형태를 사용해야 한다.

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

• 함수의 모든 부분을 안전한 타입으로 구현하는 것이 이상적이지만, 불필요한 예외 상황까지 고려해 가며 타입 정보를 힘들게 구성할 필요는 없다.
  • 함수 내부에는 타입 단언을 사용하고 함수 외부로 드러나는 타입 정의를 정확히 명시하는 정도로 끝내는 게 좋다.
  • 프로젝트 전반에 위험한 타입 단언문이 드러나 있는 것보다, 제대로 타입이 정의된 함수 안으로 타입 단언문을 감추는 것이 더 좋은 설계이다.

(1) cacheLast 함수 예시

declare function cacheLast<T extends Function>(fn: T): T;

declare function shallowEqual(a: any, b: any): boolean;

function cacheLast<T extends Function)(fn: T): T {
  let lastArgs: any[] | null = null;
  let lastResult: any;
    
  return function(...args: any[]) {
    // ~~~~~~~~~~~~~~~~~~~~~
    // '(...args: any[]) => any' 형식은 'T' 형식에 할당할 수 없습니다.
    if (!lastArgs || !shallowEqual(lastArgs, args)) {
      lastResult = fn(...args);
      lastArgs = args;
    }
    return lastResult;
  }
}

• 타입스크립트는 반환문에 있는 함수와 원본 함수에 있는 함수 T 타입이 어떤 관련이 있는지 알지 못하여 오류가 발생했다.
  • 그러나 결과적으로 원본 함수 T 타입과 동일한 매개변수로 호출되고 반환값 역시 예상한 결과가 되기 때문에, 타입 단언문을 추가해서 오류를 제거하는 것이 큰 문제가 되지는 않는다.

function cacheLast<T extends Function)(fn: T): T {
  let lastArgs: any[] | null = null;
  let lastResult: any;
    
  return function(...args: any[]) {
    // ~~~~~~~~~~~~~~~~~~~~~
    // '(...args: any[]) => any' 형식은 'T' 형식에 할당할 수 없습니다.
    if (!lastArgs || !shallowEqual(lastArgs, args)) {
      lastResult = fn(...args);
      lastArgs = args;
    }
    return lastResult;
  } as unknown as T;
}

(2) 객체 비교 shallowObjectEqual 함수 예시

declare function shallowObjectEqual<T extends object>(a: T, b: T): boolean;

declare function shallowEqual(a: any, b: any): boolean;

function shallowObjectEqual<T extends object>(a: T, b: T): boolean {
  for (const [k, aVal] of Object.entries(a)) {
    if (!(k in b) || aVal !== (b as any)[k]) {
      return false;
    }
  }
    
  return Object.keys(a).length === Object.keys(b).length;
}

• k in b 구문으로 체크했기 때문에 b as any 타입 단언문은 안전하다.
• 객체가 같은지 체크하기 위해 객체 순회와 단언문이 코드에 직접 들어가는 것보다, 앞의 코드처럼 별도의 함수로 분리해 내는 것이 훨씬 좋은 설계이다.

Item41. any의 진화를 이해하기

📌 타입의 진화

• 배열에 다양한 타입의 요소를 넣으면 배열의 타입이 확장되며 진화한다.

function range(start: number, limit: number) {
  const out = []; // 타입이 any[]
  
  for (let i = start; i < limit; i++) {
    out.push(i); // out의 타입이 any[]
  }
    
  return out; // 타입이 number[]
}

• 또한 조건문에서는 분기에 따라 타입이 변할 수도 있다.
  • 만약 noImplicitAny 설정은 끈 경우에는 아래 추론되는 타입이 모두 any로 잡히게 된다.

let val; // 타입이 any

if (Math.random() < 0.5) {
  val = /hello/;
  val; // 타입이 RegExp
} else {
  val = 12;
  val; // 타입이 number
}

val; // 타입이 number | RegExp

• try/catch 블록 안에서 변수를 할당할 때 변수의 초깃값이 null인 경우도 any의 진화가 일어난다.

let val = null; // 타입이 any

try {
  somethingDangerous();
  val = 12;
  val; // 타입이 number
} catch (e) {
  console.warn('alas!');
}

val; // 타입이 number | null

---

✔️ Check Point!

• 타입의 진화는 값을 할당하거나 배열에 요소를 넣은 후에만 일어나기 때문에, 편집기에서는 이상하게 보일 수 있다.
• 할당이 일어난 줄의 타입을 조사해 봐도 여전히 any 또는 any[]로 보일 것이다.

---

• 암시적 any 타입은 어떤 값을 할당할 때만 any 타입의 진화가 일어난다.
  • 그리고 어떤 변수가 암시적 any 상태일 때 값을 읽으려고 하면 오류가 발생한다.
  • 또한 함수 호출을 거쳐도 진화하지 않는다.

function makeSquares(start: number, limit: number) {
  const out = []; // 'out' 변수는 일부 위치에서 암시적으로 'any[]' 형식이다.
  
  range(start, limit).forEach(i => {
    out.push(i * i);
  });
    
  return out; // 'out' 변수에는 암시적으로 'any[]' 형식이 포함된다.
}

• 위 코드와 같이 루프로 순회하는 대신, 배열의 map, filter 메소드를 통해 단일 구문으로 배열을 생성하여 any 전체를 진화시키는 방법을 생각해볼 수 있다.
• 타입을 안전하게 지키기 위해서는 암시적 any를 진화시키는 방식보다 명시적 타입 구문을 사용하는 것이 더 좋은 설계이다.

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

(1) 함수의 반환값과 관련된 unknown

interface Book {
  name: string;
  author: string;
}

function parseYAML(yaml: string): any {
  // ...
}

• 위 parseYAML 함수 예시처럼 함수의 반환 타입으로 any를 사용하는 것은 좋지 않다.
  • 함수를 호출한 곳에서 반환값을 원하는 타입으로 할당하는 것이 이상적이다.

const book: Book = parseYAML(`
  name: Jane Eyre
  author: Charlotte Bronte
`);

• 그러나 함수의 반환값에서 타입 선언을 강제할 수 없으므로, 호출한 곳에서 타입 선언을 생략하게 되면 book 변수는 암시적 any 타입이 된다.

const book = parseYAML(`
  name: Jane Eyre
  author: Charlotte Bronte
`);

alert(book.title); // 오류 없음, 런타임에 "undefined" 경고
book('read'); // 오류 없음, 런타입에 "TypeError: book은 함수가 아닙니다" 예외 발생

• 대신 parseYAML 이 unknown 타입을 반환하게 만드는 것이 더 안전하다.

function safeParseYAML(yaml: string): unknown {
  return parseYAML(yaml);
}

const book = safeParseYAML(`
  name: Jane Eyre
  author: Charlotte Bronte
`);

alert(book.title); // ~~~ 개체가 'unknown' 형식입니다.
book('read'); // ~~~ 개체가 'unknown' 형식입니다.

• 타입 체커는 집합 기반이기 때문에 any를 사용하면 타입 체커가 무용지물이 된다는 것을 주의해야 한다.
• unknown 타입은 어떠한 타입이든 unknown에 할당 가능하지만 unknown 타입은 오직 unknown과 any 에만 할당 가능하다.
  • 반면 never 타입은 unknown 타입과 정반대이다. 어떤 타입도 never에 할당할 수 없지만, 어떠한 타입으로도 할당 가능할 수 있다.
• 한편 unknown 상태로 사용하려고 하면 오류가 발생하여 적절한 타입으로 변환하도록 강제할 수 있따.
  • 함수의 반환 타입인 unknown 그대로 값을 사용할 수 없으므로 타입 단언을 해야 한다.

const book = safeParseYAML(`
  name: Jane Eyre
  author: Charlotte Bronte
`) as Book;

(2) 변수 선언과 관련된 unknown

• 어떠한 값이 있지만 그 타입을 모르는 경우에 unknown을 사용한다.
• 타입 단언문이 unknown에서 원하는 타입으로 변환하는 유일한 방법은 아니다.
  • instanceof를 체크한 후 unknown에서 원하는 타입으로 변환할 수 있다.

function processValue(val: unknown) {
  if (val instanceof Date) {
    val; // 타입이 Date
  }
}

• 또한 사용자 정의 타입 가드도 unknown에서 원하는 타입으로 변환할 수 있다.

function isBook(val: unknown): val is Book {
  return (
    typeof(val) === 'object' && val !== null && 'name' in val && 'author' in val
  );
}

function processValue(val: unknown) {
  if (isBook(val)) {
    val; // 타입이 Book
  }
}

• 또는 아래와 같이 제네릭을 사용할 수도 있지만 타입스크립트에서는 좋은 스타일이 아니다.
  • 타입 단언문과 달라 보이지만 기능적으로는 동일하다.
  • 제네릭보다는 unknown을 반환하고 사용자가 직접 단언문을 사용하거나 원하는 대로 타입을 좁히도록 강제하는 것이 좋다.

function safeParseYAML<T>(yaml: string): T {
  return parseYAML(yaml);
}

(3) 단언문과 관련된 unknown

declare const foo: Foo;
let barAny = foo as any as Bar; // Bad!
let barUnk = foo as unknown as Bar; // Recommend!

• barAny, barUnk 모두 기능적으로 동일하지만, unknown 형태가 더 안전하다.
  • any의 경우는 분리되는 순간 그 영향력이 전염병으로 퍼지지만 unknown의 경우는 분리되는 즉시 오류를 발생하게 되므로 더 안전하다.

(4) 조금 다른 형태의 unknown

• object 또는 {}를 사용하는 방법 역시 unknown 만큼 범위가 넓은 타입이지만, unknown 보다는 범위가 약간 좁다.
  • {} 타입은 null과 undefined를 제외한 모든 값을 포함한다.
  • object 타입은 모든 비기본형(non-primitive) 타입으로 이루어진다. 여기에는 true 또는 12 또는 "foo" 가 포함되지 않지만 객체와 배열은 포함된다.
• unknown 타입이 도입되기 전에는 {}가 더 일반적으로 사용되었지만, 최근에는 {}를 사용하는 경우가 꽤 드물다.
  • 정말로 null, undefined가 불가능하다고 판단되는 경우만 unknown 대신 {}를 사용하면 된다.

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

• 객체에 임의의 속성을 추가하는 것은 일반적으로 좋은 설계가 아니다.
  • 예를 들어 window 또는 DOM 노드에 데이터를 추가한다고 가정해보자.
  • 그러면 그 데이터는 기본적으로 전역 변수가 된다.
  • 전역 변수를 사용하면 은연중에 프로그램 내에서 서로 멀리 떨어진 부분들 간에 의존성을 만들게 된다.
  • 그러면 함수를 호출할 때마다 사이드 이펙트를 고려해야만 한다.
• 타입스크립트 환경에서는 또 다른 문제가 생긴다.

document.monkey = 'Tamarin'; // ~~~ 'Document' 유형에 'monkey' 속성이 없습니다.

• 위와 같은 오류를 해결하기 위해 document에 any 타입을 단언해줄 수 있다.
  • 하지만 타입 체커는 통과하지만 타입 안전성을 상실하고, 언어 서비스를 사용할 수 없게 된다.
• 최선의 해결책은 document 또는 DOM으로부터 데이터를 분리하는 것이다.
  • 만일 분리할 수 없다면 두 가지 차선책이 존재한다.

🔍 interface의 보강(augmentation) 사용

interface Document {
  /** 몽키 패치의 속(genus) 또는 종(species) */
  monkey: string;
}

document.monkey = 'Tamarin'; // 정상

• any 보다 보강을 사용한 방법이 더 좋은 점
  • 타입이 더 안전하다. 타입 체커는 오타나 잘못된 타입의 할당을 오류로 표시한다.
  • 속성에 주석을 붙일 수 있다.
  • 속성에 자동완성을 사용할 수 있다.
  • 몽키 패치가 어느 부분에 적용되었는지 정확한 기록이 남는다.
• 그러나 모듈 관점에서(타입스크립트 파일이 import/export를 사용하는 경우), 제대로 동작하게 하려면 global 선언을 추가해야 한다.

export {};

declare global {
  interface Document {
    /** 몽키 패치의 속(genus) 또는 종(species) */
    monkey: string;
  }
}

document.monkey = 'Tamarin'; // 정상

• 주의 사항
  • 보강은 전역적으로 사용되므로 코드의 다른 부분이나 라이브러리로부터 분리할 수 없다.
  • 애플리케이션이 실행되는 동안 속성을 할당하면 실행 시점에서 보강을 적용할 방법이 없다.
    • ex) 웹 페이지 내의 HTML Element 조작시 속성을 string | undefined와 같이 선언할 수 있어 더 정확할 수 있지만 다루기에는 더 불편해진다.

🔍 더 구체적인 타입 단언문 사용

interface MonkeyDocument extends Document {
  /** 몽키 패치의 속(genus) 또는 종(species) */
  monkey: string;
}

(document as MonkeyDocument).monkey = 'Tamarin'; // 정상

• MonkeyDocument 는 Document를 확장하므로 타입 단언문은 정상이며 할당문의 타입은 안전하다.
  • 또한 Document 타입을 건드리지 않고 별도로 확장하는 새로운 타입을 도입했기 때문에 모듈 영역 문제도 해결할 수 있다.(import 하는 곳의 영역에만 해당)
• 따라서 몽키 패치된 속성을 참조하는 경우에만 단언문을 사요하거나 새로운 변수를 도입하면 된다.
  • 그러나 몽키 패치를 남용해서는 안 되며 궁극적으로 더 잘 설계된 구조로 리팩토링하는 것이 좋다.