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

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

---

아이템 42: 모르는 타입의 값에는 any 대신 unknown을 사용하기 Use unknown Instead of any for Values with an Unknown Type

unknown

• 함수의 반환값과 관련된 형태
• 변수 선언과 관련된 형태
• 단언문과 관련된 형태

예시: parseYAML 함수

function parseYAML(yaml: string): any {}

interface Book {
  name: string;
  author: string;
}
const book: Book = parseYAML(` // 반환값을 원하는 타입으로 할당해서 사용 
  name: Wuthering Heights
  author: Emily Brontë
`); // any => Book

// 호출한 곳에서 타입 선언을 생략하게 되면? book 변수는 암시적인 any 타입이 된다.
// 런타임 오류 발생!!
const book = parseYAML(`
  name: Jane Eyre
  author: Charlotte Brontë
`); // any
console.log(book.title); // No error, logs "undefined" at runtime
book("read"); // No error, throws "book is not a function" at runtime

// unknown을 return하는 것이 안전하다👍
// unknown 그대로 값을 사용할 수 없기 때문에, Book으로 타입 단언을 해야 한다.
// 단언? 애초에 Book 타입을 기대하고 함수를 호출함
function safeParseYAML(yaml: string): unknown {
  return parseYAML(yaml);
}
const book = safeParseYAML(`
  name: The Tenant of Wildfell Hall
  author: Anne Brontë
`);
console.log(book.title);
//          ~~~~ 'book' is of type 'unknown'
book("read");
// Error: 'book' is of type 'unknown'

• 부분 집합이면서 상위 집합이 되기 때문에 any는 타입 시스템과 상충되는 면이 있다.
  • 타입 체커는 집합 기반이기 때문에 무용지물이 된다.

any & unknown & never

| 특징 / 타입 | 어떤 타입이든 할당 가능 | 어떠한 타입으로도 할당됨 | | ----------- | ----------------------- | ----------------------------------- | | any | O | O (예외: never에만 할당 불가) | | unknown | O | X (unknown과 any에만 할당 가능) | | never | X | O |

let valueAny: any;
let valueUnknown: unknown;
let valueNever: never;

// 어떤 타입이든 할당 가능
// ⭕️ any
valueAny = 123; // O
valueAny = "string"; // O
valueAny = true; // O

// ⭕️ unknown
valueUnknown = 123; // O
valueUnknown = "string"; // O
valueUnknown = true; // O

// ❌ never
valueNever = 123; // X
valueNever = "string"; // X
valueNever = true; // X

// 어떠한 타입에도 할당됨
let num: number;

num = valueAny; // O (예외: `never`에만 할당 불가) // num의 타입은 number
num = valueUnknown; // X (number에 unknown을 할당할 수 없다.) // num의 타입은 number
num = valueNever; // O (예외 없음) // num의 타입은 number

• 어떤 타입에도 never가 들어갈 수 있다는 것이 신기하다. (집합 관점)

예시: 변수 선언

• 어떠한 값의 타입을 모르는 경우, unknown을 사용한다.

// 뭐든 들어감. grab-bag
interface Feature {
  id?: string | number;
  geometry: Geometry;
  properties: unknown;
}

// 배열 요소의 타입을 모르는 경우
function isSmallArray(arr: readonly unknown[]): boolean {
  return arr.length < 10;
}

// 어떤 값이 들어올 지 모르는 경우
function processValue(value: unknown) {
  if (value instanceof Date) {
    value;
    // ^? (parameter) value: Date
  }
}

// 사용자 정의 타입 가드: unknown 좁히기용
function isBook(value: unknown): value is Book {
  return (
    typeof value === "object" &&
    value !== null &&
    "name" in value &&
    "author" in value
  );
}
function processValue(value: unknown) {
  if (isBook(value)) {
    // 사용자 정의 타입 가드!
    value;
    // ^? (parameter) value: Book
  }
}

// 제너릭을 잘못 사용하지 말고, unknown을 반환하자.
// 아래 코드의 제너릭은 타입 단언이나 마찬가지의 기능이다.
function safeParseYAML<T>(yaml: string): T {
  return parseYAML(yaml);
}

타입 캐스팅 / 단언문 사용 시

• 기능적으로 동일하다.
• 다만 나중에 단언문을 분리하는 리팩터링 등을 고려하여 unknown 사용하기

declare const foo: Foo;
let barAny = foo as any as Bar; // ❌
let barUnk = foo as unknown as Bar; // ⭕️

unknown과 유사한 타입: object 또는 {}

• 범위가 넓지만, unknown보다는 좁다.
  • {}는 null과 undefined를 제외한 모든 값을 포함한다. (빈 객체가 아님. 타입임)
  • object는 모든 비기본형(non-primitive) 타입
    • 객체, 배열 포함

type ABC = {};
const abc: ABC = "abc";

type DEF = object;
const def: DEF = ["def"];

• unknown 타입 도입 전에는 {}가 일반적으로 쓰였다. 최근에는 unknown을 주로 사용하고, 정말 null과 undefined가 아닐 때만 {}를 사용할 수 있음

Things to Remember

• The unknown type is a type-safe alternative to any. Use it when you know you have a value but do not know or do not care what its type is.
  • unknown은 any 대신 사용할 수 있는, 안전한 타입이다. 어떤 값의 타입을 알지못하면 unknown을 사용한다.
• Use unknown to force your users to use a type assertion or other form of narrowing.
  • unknown을 사용해서 사용자가 타입 단언문이나 타입 체크를 사용하도록 강제할 수 있다.
• Avoid return-only type parameters, which can create a false sense of security.
  • 타입 단언이나 마찬가지인 제너릭 사용 조심 (안전한 타입이라고 착각할 수 있다.)
• Understand the difference between {}, object, and unknown.
  • {}, object, unknown 타입의 차이점 알기