캡틴판교 - 타입스크립트 입문 4강 간단 요약

4강은 실습 풀이라 타입에 대한 이야기보다는 js의 ts변환을 위한 타입 지정에 초점을 맞추었다.

실습풀이 4. 오류해결

object속성에 done이 없다고 나온다.

이건 다음의 코드를 통해 todo의 형식을 유추하여 지정할 수 있다.

todo라는 object는 id와 title, done이라는 3개의 property로 구성되어 있고 따라서 todo의 타입을 구체적으로 정의할 필요가 있다.

아래는 구체적으로 속성까지 타입을 정했을 때의 모습이다.

이렇게 설정하고 나면 밑에 todo를 push하는 부분에서 todo의 타입을 object로만 설정하면 에러가 발생한다.

에러를 확인하면 형식이 맞지 않다고 나온다.

따라서 todo를 단순 object가 아니라 id, title, done이라는 형식에 맞게 변경해주어야 한다.

전부다 타입을 지정해주면 다음과 같이 완성된다.

코드는 다음과 같다

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(): Array<object> {
  return todoItems.filter((item: { done: boolean }) => item.done);
}

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

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

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

실습풀이 5. 중복된 코드 제거 및 인터페이스 소개

위의 코드를 보면 타입 지정에서 중복되는 부분이 상당히 많은 걸 확인할 수 있다.
대표적으로는 이부분

{ id: number; title: string; done: boolean }[]

이럴때 사용하는 것이 바로 type과 interface!

지금 시점에서 type과 interface는 같은 역할을 수행한다. 그래서 일단 interface로 진행할 예정이다.(물론 실제로는 둘 사이의 차이점이 있음)

따라서 중복되는 부분 등을 interface로 수정하면 다음과 같이 완성된다.

코드로는 다음과 같다.

interface Todo {
  id: number;
  title: string;
  done: boolean;
}

let todoItems: Todo[];

// api
function fetchTodoItems(): Todo[] {
  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: Todo): void {
  todoItems.push(todo);
}

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

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

// business logic
// 할 일 목록에서 가장 첫 번째 값을 반환
function logFirstTodo(): object {
  return todoItems[0];
}

function showCompleted(): Array<object> {
  return todoItems.filter((item: { done: boolean }) => item.done);
}

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

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

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