타입스크립트 - TodoList 만들며 정리

 

 

 

// test.ts

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

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

  return data;
}

비동기 코드를 할때에는 API 콜이 언제 어디서 어떻게 올 지 모르기 때문에 명시적으로 타입을 지정해줘야 함.

그래서 `const data`에 타입 Todo[] 로 어노테이션 해주는 것

이러면 data의 타입을 Todo[]로 받아 볼 수 있음

 

 

 

 

props를 받을 때 갑자기 헷갈리기 시작

function TodoItem({ id, title, completed }: Todo) {
  return (
    <>
      <div>id: {id}</div>
      <div>title: {title}</div>
      <div>completed: {`${completed}`}</div>
    </>
  );
}

사실 헷갈릴 내용은 아닌데 처음써보는 타입스크립트라 그런지 괜히 헷갈리더라..

단순하게 구조분해 할당을 준 것 뿐인데..

그래서 구조분해 할당을 사용하지 않았을 때의 코드를 생각하고 작성해봤다.

function TodoItem(props: Todo) {
  return (
    <>
      <div>id: {props.id}</div>
      <div>title: {props.title}</div>
      <div>completed: {`${props.completed}`}</div>
    </>
  );
}

이렇게 보니 생각보다 편안한 느낌이랄까..? ㅋㅋㅋㅋ

코드를 짤때 이렇게 짜지는 않겠지만 이해하는 지금 이 순간에는 이렇게 한번씩 바꿔서 이해하는 것도 방법일 것 같다.

 

 

제네릭

  const [todoList, setTodoList] = useState<Todo[]>([]);

  useEffect(() => {
    getTodos().then((data) => setTodoList(data));
  }, []);

지금은 `useState<Todo[]>([])`에서 제네릭으로 useState에 Todo[]를 넣어주겠다하여 오류가 뜨지는 않지만

`useState([])` 이렇게 제네릭을 주지 않는다면 `setTodoList(data)`에 data 부분에 오류가 나는 것을 볼 수 있다.

"'Todo[]' 형식의 인수는 'SetStateAction<undefined>' 형식의 매개 변수에 할당될 수 없습니다.
'Todo[]' 형식에서 '(prevState: undefined): undefined' 시그니처에 대한 일치하는 항목을 제공하지 않습니다."

 

useState에 아무런 초기값을 추가해주지 않고 제네릭으로 어떤 값을 받을지도 표기해주지 않아서 undefined라는 타입만 받아서 오류가 나는 것이다.

참고로 useState() 초기값을 빈칸으로 냅두면 state값인 todoList도 undefined 타입을 받게 된다.

 

 

 

인자로 특정 타입에 대한 계산이 필요한 경우

const handleDelteTodo = async (id: Todo["id"]) => {
    await fetch(`http://localhost:4000/todos/${id}`, {  // 이 id의 Todo를 삭제해라
      method: "Delete",
      body: JSON.stringify(newTodo),
    });
    setTodoList((prev) => prev.filter((todo) => todo.id !== id));  // setTodos에 이전 값에서 이번에 넣어준 id와 다른 값들만 지우는 코드
  };

위와 같이 접근하는 경우 Todo가 가진 "id" 타입을 할당해 줌

 

 

하나만 제거하는 유틸리티 타입 `Omit`

const toggleTodo = (id: Todo["id"], completed: boolean) => {};

// 타입에서 titl만 빼고 가지고 오게 설정 가능
const toggleTodo = ({ id, completed }: Omit<Todo, "title">) => {};

 

 

 

 

위의 내용들은 아직 타입스크립트 입문이라 헷갈려서 정리해봤다. 언젠간 익숙해지겠지만..