整理タイプスクリプト入門#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();

実習

noImpliceAnyを閉じる

答えを作成

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;
}

タイプを個別に定義せず、戻りタイプを直接定義します。

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