React × Typescript 型定義（見返し用）

型定義の方法

各場面の型定義の方法。

エイリアスを使った型定義

ステートへ型定義

//オブジェクトのエイリアスを定義
type TodoType = {
  "userId": number,
  "id": number,
  "title": string,
  "completed": boolean
}

//定義したエイリアスをStateに設定
const [todos, setTodos] = useState<Array<TodoType>>([]);

フェッチデータ取得時の型定義

//オブジェクトのエイリアスを定義
type TodoType = {
  "userId": number,
  "id": number,
  "title": string,
  "completed": boolean
}

  const getFetchData = () => {
    axios.get<Array<TodoType>>("https://jsonplaceholder.typicode.com/todos").then((res) => {
      setTodos(res.data);
      console.log(res.data);
    })

propsへの型定義

type TypeTodo = {
    "userId": number,
    "title": string,
    "completed": boolean
}

export const Todo = (props : TypeTodo) => {
    const {title , userId , completed} = props;
    const completedMark = completed ? "完":"未";

    return <p>{`[${completedMark}]ID:${userId}, 名前：${title}`}</p>
}

随時追記します。