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

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

---

아이템 31: 타입 주변에 null 값 배치하기 Push Null Values to the Perimeter of Your Types

예시: null 관련된 관계를 가진 결과값 리턴

• 문제 코드

// @strictNullChecks: false
function extent(nums: Iterable<number>) {
  // num배열이 비어있을 수 있음
  let min, max; // undefined, undefined
  for (const num of nums) {
    if (!min) {
      // falsy가 아니라 undefined를 체크해야 한다
      // => 0일때 덧씌워짐
      min = num;
      max = num;
    } else {
      min = Math.min(min, num);
      max = Math.max(max, num);
    }
  }
  return [min, max];
}

• 개선 코드

function extent(nums: Iterable<number>) {
  let minMax: [number, number] | null = null;
  // 사용하기 더 수월한 코드
  // 타입스크립트가 null 값 사이의 관계를 이해할 수 있도록 했다 (두 값이 다 존재하거나, null임)
  // 단일 객체로 설계를 개선했다
  // null체크가 제대로 동작한다
  for (const num of nums) {
    if (!minMax) { // null이냐!
      minMax = [num, num];
    } else {
      const [oldMin, oldMax] = minMax;
      minMax = [Math.min(num, oldMin), Math.max(num, oldMax)];
    }
  }
  return minMax;
}
...
const [min, max] = extent([0, 1, 2])!; // null 단언 자제하자!
const span = max - min;  // 정상
...
const range = extent([0, 1, 2]);
if (range) { // null 체크~
  const [min, max] = range;
  const span = max - min;  // 정상
}

null과 null이 아닌 값의 비빔밥

• 네트워크 요청의 경우?
  • 필요한 데이터가 준비된 다음 클래스를 만든다(데이터를 가공한다)
  • null 상태에 대한 경우의 수가 많다면?? => null 체크 난무, 버그 양산
• null인 경우가 필요한 속성은 Promise로 바꾸면 안된다
  • 코드가 복잡해지고, 모든 메서드가 비동기로 바뀌어야 한다
  • 데이터를 로드하는 코드를 단순하게 하지만 데이터를 사용할 때 코드가 복잡해지기도 한다

예시

동기적으로 처리하는 코드

interface UserProfile {
  id: number;
  name: string;
  email: string | null; // 이메일이 null일 수 있음
}

// 📌 사용자 프로필을 비동기적으로 반환하는 async 함수
// Promise를 반환
async function getUserProfileAsync(userId: number): Promise<UserProfile> {
  const users: UserProfile[] = [
    { id: 1, name: "Alice", email: "alice@example.com" },
    { id: 2, name: "Bob", email: "bibim@example.com" },
    { id: 3, name: "Jack", email: null },
  ];

  return users.find((user) => user.id === userId); // undefined 인 것부터 에러
  // {id: -1, name: null, email: null} 같이 초기값 만들면? 복잡해짐
  // `|| null`로 처리하는 것이 코드를 단순히하고, 개발자와 타입 체커가 연관관계를 이해하기 쉽도록 한다.
}

(async function () {
  const userB = await getUserProfileAsync(3);
  if (userB?.email) {
    console.log(`User email: ${userB.email}`);
  } else {
    console.log("User email not available");
  }
})();

Things to Remember

• Avoid designs in which one value being null or not null is implicitly related to another value being null or not null.
  • 한 값의 null 여부가 다른 값의 null 여부에 암시적으로 관련되도록 작성하지 말자 (찔리는 점 있음)
• Push null values to the perimeter of your API by making larger objects either null or fully non-null. This will make code clearer both for human readers and for the type checker.
  • API 작성 시에는, 반환 타입을 큰 객체로 만들어 전체가 null이거나 null이 아니도록 작성해 명료하게 하자.
• Consider creating a fully non-null class and constructing it when all values are available.
  • 모든 값이 준비 되었을 때, 클래스 생성하도록 하자.

📌 Using fully non-null APIs and classes is preferable to using null values in them.
``