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

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

---

아이템 3

오버로드

• 신기한 함수 오버로딩

// tsConfig: {"noImplicitAny":false}

function format(input: number): string; // 숫자 형식
function format(input: string): string; // 문자열 형식

function format(input: any): string {
  if (typeof input === "number") {
    return `Number: ${input}`;
  } else if (typeof input === "string") {
    return `String: ${input}`;
  } else {
    throw new Error("Unsupported type");
  }
}

const formattedNumber = format(42); // "Number: 42"
const formattedString = format("Hello"); // "String: Hello"

아이템 4

• 구조적 타이핑!! 덕 타이핑! 🦆
  • 타입 체커의 타입에 대한 이해도가 사람과 다르다

구조적 타이핑 문제 예시: 개발자의 의도와 다르게, 아래 코드에서 에러가 발생하지 않음

type 맛_단계 = 1 | 2 | 3 | 4 | 5;

// 마라탕과 탕후루를 정의하는 인터페이스
interface 탕후루 {
  재료: string[];
  단맛: 맛_단계;
}

function 마라탕만들기(마라탕: 탕후루) {
  console.log("재료로 마라탕 만들기:", 마라탕.재료);
  // 마라탕 만드는 로직
}

function 탕후루만들기(탕후루: 탕후루) {
  console.log("재료로 탕후루 만들기:", 탕후루.재료);
  // 탕후루 만드는 로직
}

// 마라탕 재료와 매운 정도
const 마라탕재료 = ["소고기", "두부", "버섯"];
const 마라탕요리 = {
  재료: 마라탕재료,
  매운맛: 5,
  얼얼맛: 5,
  단맛: 1 as 맛_단계,
};

// 탕후루 재료와 매운 정도
const 탕후루재료 = ["딸기", "샤인머스캣", "돼지고기"];
const 탕후루요리: 탕후루 = {
  재료: 탕후루재료,
  단맛: 5,
};

// 마라탕과 탕후루 만들기
마라탕만들기(마라탕요리);
탕후루만들기(탕후루요리);