2장 기본형 문제

문제

1. this 타입 지정하기

다음 함수는 버튼을 클릭했을 때 active 클래스를 토글합니다.
/이 함수에서 this의 타입을 명시해주세요.

function toggleActive() {
  this.classList.toggle('active');
}
type ToggleFunction = (this: htmlElement, e: event) => void

2. 정확한 이벤트 리스너 타입 지정하기

아래 addListener 함수는 다양한 DOM 요소에 클릭 이벤트를 등록합니다.
listener 파라미터에 정확한 타입을 지정해주세요.
(this는 HTMLButtonElement, 이벤트는 MouseEvent)

const buttons = document.querySelectorAll('button');

type Listener = (this: HtmlElement, e: Event) => void

function addListener(listener: Listener) {
  buttons.forEach((btn) => {
    btn.addEventListener('click', listener as Listener);
  });
}

3. ThisParameterType을 활용해 타입 추출하기

아래 함수의 this 타입만 따로 추출하여 ToggleThis 타입으로 선언해주세요.

function toggle(this: HTMLDivElement, ev: MouseEvent) {
  this.classList.toggle("selected");
}

type ToggleThis = // 여기에 적절한 타입 넣기

4. as keyof로 타입 오류 해결하기

아래 코드에서 발생하는 타입 오류를 해결하려면 어떻게 수정해야 하나요?

type User = {
  id: number;
  name: string;
};

function printUser(user: User) {
  for (const key in user) {
    console.log(`${key}: ${user[key]}`); // 오류 발생
  }
}

5. object vs Object 차이점 설명

다음 중 object 타입의 특징으로 올바른 설명은?

A. 기본형(number, string 등)도 허용
B. 모든 값을 허용
C. 기본형은 허용하지 않음
D. toString 메서드의 반환 타입이 강제된다

6. 구조적 타입 호환 문제 찾기

다음 코드에서 printPerson 함수는 Person 타입을 받습니다.
personWithAddress 객체를 전달할 수 있는 이유를 설명하세요.

  type Person = { name: string; age: number };

  function printPerson(p: Person) {
    console.log(p.name, p.age);
  }

  const personWithAddress = {
    name: "Alice",
    age: 30,
    address: "Seoul",
  };

  printPerson(personWithAddress);

7. 인터페이스 병합으로 인한 런타임 오류 찾기

아래 코드에서 발생할 수 있는 문제를 설명하고 수정 방법을 제시하세요.

interface FormData {
  name: string;
  age: number;
}

function submitForm(data: FormData) {
  console.log(data.entries()); // 문제 발생 가능
}

8. 튜플로 바꾸기

다음 배열은 문자열 또는 숫자를 포함할 수 있지만, 요소 순서와 타입을 고정하고 싶습니다.
적절한 튜플 타입으로 수정해주세요.

const user = ["Bob", 25];

// 타입을 [string, number]로 고정하려면?

9. unique symbol을 이용한 명목적 타입 검사

아래 두 타입은 모두 number지만, 서로 구분되어야 합니다.
이를 unique symbol을 이용해 타입 안전하게 구분해주세요.

type UserId = number;
type ProductId = number;

function getUser(id: UserId) {}
function getProduct(id: ProductId) {}

const id = 123;
getUser(id);
getProduct(id); // 서로 혼동 가능

10. 함수 오버로드 작성하기

아래 logMessage 함수는 다음 두 가지 형태로 사용될 수 있어야 합니다:

logMessage('Hello');                // [info] Hello
logMessage('warn', 'Be careful');   // [warn] Be careful
LogLevel = 'info' | 'warn' | 'error' 타입을 활용해서 오버로드를 정의하고, 구현을 완성하세요.