타입스크립트로 투두리스트를 만들어보자

yarn create react-app my-app --template typescript
투두리스트 설치

npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom
기존에 만들었던 파일을 타입스크립트로 변환할시 사용

npm i @types/uuid

model.d.ts

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement // 여기 써줘야함
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

---

model.d.ts를 만들자.
여기는 d는 declare를 뜻함,
  
declare interface TodoToDo(아무렇게나 지으면됨) {
  id: string;
  title: string;
  contents: string;
  isDone: boolean;
  // initialState의 type을 정해주자
}

// interface는 확장이 가능, type보다 더 좋음

const App: React.FC = () => {
  //0. React.FC 제거여부 확인
  const [todos, setTodos] = useState<TodoToDo[]>(initlalState);
// <TodoToDo[]>는 model.d.ts의 배열이다. 
  return (
    <div>
      <Header />
      <Input setTodos={setTodos} />
      <TodoList todos={todos} setTodos={setTodos} isActive={true} />
      <TodoList todos={todos} setTodos={setTodos} isActive={false} />
    </div>
  );
};

export default App;

input.tsx

interface setTodosProps {
 setTodos: React.Dispatch<React.SetStateAction<TodoToDo[]>>;
}

1. interface setTodosProps(아무이름 짓기){
 props로 받아오는걸 적어보자
  setTodos: React.Dispatch<React.SetStateAction<TodoToDo[]>>;
  setTodos는 배열이기 때문에, <TodoToDo[]>를 써줘야함
}


const Input = ({ setTodos }: setTodosProps) => {