Next.jsのTypeScript化の方法

ポートフォリオをjsで書いていたが、tsに書くために書き替えた部分を紹介します。
ですが、私自身もTypeScriptの知識が不十分な部分があるので、初心者向けの内容です。

ファイルをjsからtsxに変える

文字通りです。最初に書き換えましょう。
するとエラーが沢山出るので、作り込んだ段階で変えるとメンタルが少しやられます。

Eventに属性をつける

onchageなどでよく使われるeventはそのままだとエラーが出るので、 React.ChangeEvent　を足しましょう。

          <TextField
            id="outlined-basic"
            label="Password"
            type="password"
            variant="outlined"
            className="m-auto w-80"
            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
              setPassword(event.target.value)
            }
          />

こうすることでエラーが無くなります。

const に＜props＞をつける

自分はpropsで渡される要素をtypeを使って型定義をしています。
その後は、:　を付ければOKです。

VFCはTypeScript上だと受けれる恩恵が少ないそうなので、無くても大丈夫です。
参考記事　https://kray.jp/blog/dont-have-to-use-react-fc-and-react-vfc/

type Props = {
  downloadURL: string;
  id: number;
  title: string;
  categori: string;
  netabare: string;
  context: string;
  email: string;
  photoURL: string;
  displayname: string;
  createtime: string;
  likecount: number;
};

// eslint-disable-next-line react/display-name
export const Cardpost: React.VFC<Props> = React.memo(

省略

usestateの型付けを行う

これはuseStateと("")に型を入れると型をつけることができます。

  const [title, setTitle] = useState<string>("");
  const [context, setContext] = useState<string>("");

以上のことをすれば一通りの型付けが完了します。