TypeScript - 간단한 todoList 만들어보기

변수, 함수에서 TS를 사용

// 변수 문법과 똑같음

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

type Age = number;

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

let a: number = 1;

function sum(a: number, b: number): number {
  return a + b;
}

function objSum({ a, b }: { a: number; b: number }): string {
  return `${a + b}`;
}

 

 

비동기 함수에서 TS 사용

( localhost 에 실행된 JSON-Server에 임의로 추가해 준 Todo를 불러오는 로직 )

// 커스텀 타입인 Todo 타입을 선언

type Todo = {
	id: string;
	title: string;
	completed: boolean;
}

 

다음으로 비동기 함수를 작성하는데, 이 함수는 fetch API를 사용하여 데이터를 가져오고, 응답을 JSON 형식으로 파싱한다.

 

TypeScript를 사용하여 함수의 반환 타입을 명시하면, 더 안전하게 코드를 작성할 수 있다.

 

async function getTodos(): Promise<Todo[]> {
  const res = await fetch(`http://localhost:3001/todos`);
	const data = await res.json()
  return data;
}

getTodos().then((res) => console.log(res[0]));

 

Todo 타입을 정의하고, getTodos 함수가 Todo 배열을 반환하도록 명시했다.

 

이렇게 하면 비동기 함수가 any 가 아닌 정확한 타입을 반환하도록 할 수 있다.

 

 

📌 여기부턴 내가 만든 todoList

// 실습을 위해 json-server 사용
// db.json

{
  "todos": [
    {
      "id:": "d1",
      "title": "숙제하기",
      "completed": false
    }
  ]
}

 

구조는 아래와 같다.

 

 

// test.ts

export type Todo = {
  id: string;
  title: string;
  completed: boolean;
};

export async function getTodos() {
  const res = await fetch("http://localhost:4000/todos");
  const data: Todo[] = await res.json();

  return data;
}

 

// App.tsx

import { useEffect, useState } from "react";
import "./App.css";
import TodoList from "./TodoList";
import { getTodos, Todo } from "./test";

function App() {
  const [todoList, setTodoList] = useState<Todo[]>([]);
  useEffect(() => {
    getTodos().then((data) => setTodoList(data));
  }, []);

  return (
    <div>
      <TodoList todoList={todoList} />
    </div>
  );
}

export default App;

 

// TodoList.tsx

import { type Todo } from "./test";
import TodoItem from "./TodoItem";

type TodoListProps = { todoList: Todo[] };

const TodoList = ({ todoList }: TodoListProps) => {
  return (
    <div>
      {todoList.map((todo) => (
        <TodoItem {...todo} />
      ))}
    </div>
  );
};

export default TodoList;

 

// TodoItem.tsx

import { type Todo } from "./test";

type TodoItemProps = Todo;

const TodoItem = ({ id, title, completed }: TodoItemProps) => {
  return (
    <div>
      <div>{id}</div>
      <div>{title}</div>
      <div>{`${completed}`}</div>
    </div>
  );
};

export default TodoItem;

 

 

불러오는 것까지는 되었고 추가, 수정, 삭제도 구현해 봐야겠다.