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

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

---

문제

• 개념 퀴즈
  • 교재의 개념을 기준으로 O/X, 또는 n지선다 퀴즈
• 변형 예제
  • 교재의 예제를 참고하여 변형한 예제를 만든다.
• 블랙박스 퀴즈
  • 테스트 케이스가 실패한 원인을 찾는다.

아이템 2

Example

• 다음 코드에서 에러가 발생하는 위치와 이유 (1개 이상)?
• 에러와 관련된 tsconfig 속성의 이름은?
  1. noImplicitThis
  2. noImplicitAny
  3. noImplicitReturns
  4. strictNullChecks
• 에러 해결 방법은?

// tsConfig: {"noImplicitAny":true,"strictNullChecks":true}

function registerCallback(callback) {
  callback();

  if (callback) {
    callback();
  } else {
    console.log("No callback provided.");
  }
}

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

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

아이템 3

• 런타임에 동적으로 타입을 판별하는 함수 작성
  • A: 속성 체크
  • B: Tagged Union

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  width: number;

type Shape = Circle | Square;

// Circle일 때는 Math.PI * shape.radius ** 2을 반환
// Square일 때는 shape.width ** 2를 반환
function calculateArea(shape: Shape) {
  🤔
}

// 테스트
const circle: Circle = { kind: "circle", radius: 5 };
const square: Square = { kind: "square", width: 4 };

console.log(calculateArea(circle)); // 78.54...
console.log(calculateArea(square)); // 16

• C: 타입을 클래스로 만들기

class Circle {
  constructor(public radius: number) {}
}

class Square {
  constructor(public width: number) {}
}

type Shape = Circle | Square;

// Circle일 때는 Math.PI * shape.radius ** 2을 반환
// Square일 때는 shape.width ** 2를 반환
function calculateArea(shape: Shape) {
  if (shape instanceof Circle) {
    return Math.PI * shape.radius ** 2;
  } else if (shape instanceof Square) {
    return shape.width ** 2;
  }
}

// 테스트
const circle = new Circle(5);
const square = new Square(4);

console.log(calculateArea(circle)); // 78.54...
console.log(calculateArea(square)); // 16