Typescript - 실습

• 타이핑(typing): 타입이 정의되지 않은 코드에 타입을 입혀주는 행위

• 변수에 임의의 타입을 정의하기 위해서는 any를 작성해야한다.
  (tsconfig.json의 설정 옵션중 "noImplicitAny": true를 설정한 경우)

타입 정의하기 위한 간단한 실습 진행

타입이 정의되지 않은 코드에서 tsconfig.json의 설정 옵션중 "noImplicitAny": true를 설정한 뒤,

타입을 정의하는 연습

• 답

/* eslint-disable prettier/prettier */
let todoItems: { id: number; title: string; done: boolean }[];

// api
function fetchTodoItems(): { id: number; title: string; done: boolean }[] {
  const todos = [
    { id: 1, title: '안녕', done: false },
    { id: 2, title: '타입', done: false },
    { id: 3, title: '스크립트', done: false },
  ];
  return todos;
}

// crud methods
function fetchTodos(): object[] {
  const todos = fetchTodoItems();
  return todos;
}

function addTodo(todo: { id: number; title: string; done: boolean }): void {
  todoItems.push(todo);
}

function deleteTodo(index: number): void {
  todoItems.splice(index, 1);
}

function completeTodo(index: number, todo: { id: number; title: string; done: boolean }): void {
  todo.done = true;
  todoItems.splice(index, 1, todo);
}

// business logic
function logFirstTodo(): object {
  return todoItems[0];
}

function showCompleted(): object[] {
  return todoItems.filter((item: { id: number; title: string; done: boolean }) => item.done);
}

// TODO: 아래 함수의 내용을 채워보세요. 아래 함수는 `addTodo()` 함수를 이용하여 2개의 새 할 일을 추가하는 함수입니다.
function addTwoTodoItems(): void {
  // addTodo() 함수를 두 번 호출하여 todoItems에 새 할 일이 2개 추가되어야 합니다.
  const todo = { id: 4, title: 'ㅎㅇ', done: false };
  addTodo(todo);
  addTodo({ id: 5, title: 'ㅎㅇ2', done: false });
}

// NOTE: 유틸 함수
function log(): void {
  console.log(todoItems);
}

todoItems = fetchTodoItems();
addTwoTodoItems();
log();

다른 코드에서 타입을 지정하는건 어렵지 않았는데
todo.done에서 에러가 발생하여서 조금 시간이 걸렸다.

하지만 타입스크립트 답게 에러 메세지의 내용이 명확했다.

todo에 done이라는 메서드가 없다는 것

그 말인 즉슨 todo 객체에 done이라는 키를 인식하고 있지 않아서 발생한 에러였다.

앞에서 공부한대로 타입을 object로만 정의하지 않고,
object의 세부 키와 값의 타입까지 지정해주니 에러가 발생하지 않았다.