타입스크립트 입문 정리 #4 할 일 관리 애플리케이션을 만들며 배워보기

현재 상태

let todoItems;

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

    return todos;
}

// crud methods
// API를 불러오는 것처럼 작성하기 위해서 만든 함수
function fetchTodos() {
    const todos = fetchTodoItems();
    return todos;
}

function addTodo(todo) {
    todoItems.push(todo);
}

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

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

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

function showCompleted() {
    return todoItems.filter((item) => item.done);
}

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

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

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

일단 간단한 투두 리스트가 이미 구현되어 있는 상태이다. 다만, 현재는 타입스크립트가 아니라 자바스크립트로 구현되어 있다.

그래서 위와 같이 타입을 구성하라는 에러가 발생하는 상태이다.

실습하기

noImplicitAny 끄기

먼저 위와 같이 "noImplicitAny": true 설정을 해준 뒤에 index.ts 파일을 보면,

위와 같이 각양 각색의 에러가 나있다.

any는 자바스크립트에서의 동적인 타입 바인딩과 크게 다를게 없기 때문에 any만 사용하게 되면 타입스크립트를 쓰는 의미가 없다.

답안 작성하기

에러 안나게 한번 index.ts의 내용을 바꿔보자. 나의 경우에는 아래와 같이 나왔다.

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
// API를 불러오는 것처럼 작성하기 위해서 만든 함수
function fetchTodos(): Todo[] {
    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(): Todo {
    return todoItems[0];
}

function showCompleted(): Todo[] {
    return todoItems.filter((item) => item.done);
}

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

    addTodo({
        id: 5,
        title: "타입스크립트 공부",
        done: false,
    });
}

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

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

답안 작성 결과와 몰랐던 것들

내가 바로 써낸 답안이 거의 최종답안이었다.

그래도 설명을 하면서 몇가지 몰랐던 게 있는데,

type으로 타입 정의 가능

// type으로 타입 정의하기
type Todo {
    id: number;
    title: string;
    done: boolean;
}

이렇게 type이라는 키워드로 타입 정의가 가능한지 몰랐다. 그냥 공식문서에서 타입 정의하는 법 치니까 바로 interface가 나오길래 interface로 정의했다.

타입 따로 정의하지 않고 그냥 바로 반환 타입 정의

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

위와같이 작성하면, 바로 반환 타입을 정의할 수 있다.

일단 여러번 쓸 타입이면 위와 같이 작성했을 때, 코드의 중복이 일어날 수 있기 때문에 추천하지 않는다.

한번만 쓰고 말 타입이면 위와 같은 방법도 고려할 수 있지만, 코드의 가독성이 좀 훼손되는 느낌이라 나는 좀 지양할 것 같다.