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

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

---

PPT 코드 정리

function registerCallback(callback: () => void) {
  if (callback) {
    callback();
  } else {
    console.log("No callback provided.");
  }
}

const button = document.getElementById("myButton");

registerCallback(() => {
  button &&
    button.addEventListener("click", (e) => {
      e.stopPropagation();
      console.log("Button clicked!");
    });
});

/**
 * - 오류가 발생할까요?
 * - 어떤 위치에서 발생할까요?
 * - 이유는 무엇인가요?
 * */
// 경우 A
function 둘_나누기_A(input) {
  return input / 2;
}
console.log(둘_나누기_A("10"));

// 경우 B
function 둘_나누기_B(input: number) {
  return input / 2;
}
console.log(둘_나누기_B("10"));

// 경우 C
function 둘_나누기_C(input: number) {
  return input / 2;
}
console.log(둘_나누기_C("10" as any));

function calculateArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
  } else if (shape.kind === "square") {
    return shape.width ** 2;
  } else {
    throw new Error("Unknown shape kind");
  }
}

function calculateArea(shape: Shape): number {
  if ("radius" in shape) {
    return Math.PI * shape.radius ** 2;
  } else if ("width" in shape) {
    return shape.width ** 2;
  } else {
    throw new Error("Unknown shape kind");
  }
}

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"
console.log(formattedNumber, formattedString);

any: 문제야 문제

interface UserData {
  id: string;
  name: string;
  height: string;
}

interface DataProvider {
  fetchData: (userId: string) => any;
}

class UserApi implements DataProvider {
  private data: any;

  constructor() {
    this.data = {};
  }

  setData(data: UserData) {
    this.data = data;
  }

  fetchData(userId: string) {
    // 네트워크 요청~
    // 실제 시나리오에서는 사용자 ID를 기반으로 API에서 사용자 데이터를 가져올 것
    return {
      id: userId,
      name: "김유저",
      height: "180.5",
    };
  }
}

const userApi: DataProvider = new UserApi();
const fetchedUserData = userApi.fetchData("유저아이디");
console.log(`User Height: ${fetchedUserData.height.toFixed(2)}`);
// 🚫 런타임 오류: toFixed는 함수가 아님

any: 제네릭

interface UserData {
  id: string;
  name: string;
  height: string;
}

interface DataProvider<T> {
  fetchData: (userId: string) => T;
}

class UserApi implements DataProvider<UserData> {
  private data: UserData | undefined;

  constructor() {
    this.data = undefined;
  }

  setData(data: UserData) {
    this.data = data;
  }

  fetchData(userId: string) {
    // 네트워크 요청~
    // 실제 시나리오에서는 사용자 ID를 기반으로 API에서 비동기로 사용자 데이터를 가져올 것
    return {
      id: userId,
      name: "김유저",
      height: "180.5",
    };
  }
}

const userApi = new UserApi();
const fetchedUserData = userApi.fetchData("유저아이디");
console.log(`User Height: ${fetchedUserData.height.toFixed(2)}`);
// 🚫 런타임 오류: toFixed는 함수가 아님

/ 환율 정보를 표현하는 인터페이스
interface ExchangeRate {
  currency: string;
  rate: number;
}

// 달러를 원화로 환전하는 함수
const exchangeDollarToWon: (amount: number, exchangeRate: ExchangeRate) => number =
  (amount: number, exchangeRate: ExchangeRate): number => {
    if (typeof amount !== 'number' || typeof exchangeRate.rate !== 'number') {
      // 숫자가 아닌 인자가 전달되면 오류 발생
      throw new Error('Invalid input: arguments must be numbers');
    }
    return amount * exchangeRate.rate;
};

// 달러를 유로로 환전하는 함수
const exchangeDollarToEuro: any = (amount: number, exchangeRate: ExchangeRate): number => {
  return amount * exchangeRate.rate;
};

// 환전 정보
const dollarToWonRate: ExchangeRate = { currency: 'KRW', rate: 1150 };
const dollarToEuroRate: ExchangeRate = { currency: 'EUR', rate: 0.85 };

// 환전 함수 호출
console.log(exchangeDollarToWon(100, dollarToWonRate)); // 115000
console.log(exchangeDollarToEuro(100, dollarToEuroRate)); // 85
console.log(exchangeDollarToEuro("100", dollarToEuroRate)); // "100" 문자열이 반환됨