Chapter 05無料公開

Todo(タスク)の仕様を考える (その 1)

Kei Touge
Kei Touge
2021.09.24に更新

ひとつの todo をオブジェクトとすると、そのオブジェクトにはタスクの内容を保持するプロパティ(変数)が必要となります。ここでは、これを value プロパティとします。

入力フォームに入力されたテキスト文字列が代入されるので、この value プロパティは string 型 となります。

これから作成される複数の todo のひな型として Todo 型オブジェクト型エイリアスを定義しましょう。

App.tsx
type Todo = {
  value: string;
};

export const App = () => {

https://typescript-jp.gitbook.io/deep-dive/type-system#eiriasutype-alias

ステートとして保持しておくタスクたち(todos 複数)は Todo 型オブジェクトの配列 となります。

App.tsx
export const App = () => {
  const [text, setText] = useState('');
  // 追加
  const [todos, setTodos] = useState<Todo[]>([]);

  return (

useState<> の中に型を指定しておくと、これと型が異なる値をステートに代入することができなくなるため、ステートの型安全性が常に保証されます。

https://typescript-jp.gitbook.io/deep-dive/getting-started/why-typescript