Next.js-TypeScriptでTODOリスト(登録/削除)作成

2021年12月29日

デモ

https://next-ts-memo.vercel.app/

↓↓こちらをTypeScript化したものになります。

コード

コーディング箇所はindex.jsのみです。

import type { NextPage } from "next";
import Head from "next/head";
import { useState } from "react";

import styles from "../styles/Home.module.css";

const Home: NextPage = () => {
  const [todos, setTodos] = useState<string[]>([]);

  const [tmpTodo, setTmpTodo] = useState("");

  const addTodo = () => {
    if (tmpTodo === "") {
      alert("文字を入力してください");
      return;
    }
    setTodos([...todos, tmpTodo]);
    setTmpTodo("");
  };

  const deleteTodo = (index: number) => {
    const newTodos = todos.filter((todo, todoIndex) => {
      return index !== todoIndex;
    });
    setTodos(newTodos);
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>TODOリスト</h1>
        <div className="form">
          <input
            type="text"
            name="todo"
            onChange={(e) => setTmpTodo(e.target.value)}
            value={tmpTodo}
          />
          <button onClick={addTodo}>Add</button>
        </div>
        <ul>
          {todos.map((todo, index: number) => {
            return (
              <li key={index}>
                {todo}
                <button onClick={() => deleteTodo(index)}>x</button>
              </li>
            );
          })}
        </ul>
      </main>

      <footer className={styles.footer}></footer>
    </div>
  );
};

export default Home;

つまづいたところ

8行目

const [todos, setTodos] = useState<string[]>([]);

React HookのuseStateをTypeScriptで使う場合、useStateの型パラメータに配列型を指定してあげる必要があります。

それ以外はほぼそのままですね。