React-TypeScriptへ移行しむずしかったこと

ReactをTypeScriptで記述した際に難しかったことについて

初めましてQiita初投稿です。

初心者がReactをTypeScriptで記述した際に難しかったことについてまとめてみました。

複雑なデータの型定義

外部のAPIからデータを取得する際に取得するAPIのデータの型の定義に苦戦しました。

{
  0: {
    id: 1,
    name: 'sample',
    text: 'Hello World'
  }
}

このようなデータの型の定義の仕方に苦戦しました。

私はTypeやinterfaceを用いて型の定義をしてみようとしていましたが、上手くできませんでした。

type.ts

type ChildData = {
  id: number;
  name: string;
  text: string;
}

type ParentData = {
  [data:string] : ChildData
}

stack overflowで解決策をいただきました。

このように複雑なデータの型は分解して定義をするのが良いと分かりました。

Reactのイベントの型

Reactでイベントを扱う場合には型が必要だと知らずにはじめたので最初は戸惑いました。

sample.tsx

  const addState = (e: React.ChangeEvent<HTMLInputElement>) => {
    setState(e.targer.value)
  }

React.ChangeEvent<HTMLInputElement>について最初は分かりませんでした。

現在はイベントに対して型が必要だと理解しています。DOMのイベントの型を定義しているという認識です。

tsconfig.json

初めてtsconfig.jsonを見たときは意味が分かりませんでした。
TypeScriptの設定を記述するファイルだと認識しています。
まだ理解できていないところが多いです。現在はtsconfig.jsonを編集せずに開発をしていますが、今後はanyを使えないように設定して開発をしてみたいと考えています。