Reactの型定義

Reactの基礎とTypeScriptの基礎をある程度学んだが、Reactのどのような場面でTypeScriptを使うのかがいまいちよくわからないので、そこら辺を理解するために書き殴ります。

React.VFC

ファンクションコンポーネントを定義するための型。以下のように記述する

const App: React.VFC = () => {
  return(
    <div></div>
  )
}

export default App;

「この関数はReactのファンクションコンポーネントですよ」
みたいな意味。

propsの型定義

propsの型定義は、React.VFCの型にジェネリクスを指定する形で定義する。

//propsの型
type Props = {
  text: string
}

export const Child: React.VFC<Props> = (props) => {
  return(
    <div>{props.text}</div>
  )
}

//親のファイル

import { Child } from "./Child";

const App: React.VFC = () => {
  return (
    <div>
      <Child text="子供に渡すテキスト"/>
    </div>
  );
}

export default App

「この関数はReactのファンクションコンポーネントで、propsとしてstring型の値を受け取りますよ」
みたいな意味。
上の例で言えばComponentのpropsにstring型以外の値を受け取るとエラーが出る。

export const Child: React.VFC<{text: string}> = (props) => {
  return(
    <div>{props.text}</div>
  )
}

そんなに型が多くない時はこんな感じでもかけるらしい。

useStateの型定義

useStateの型定義はuseStateを宣言する時に型を指定する。
useStateには初期値を入れると型推論が効くので、初期値から方が明確にわかる時は無理にアノテーションをする必要はなく

import { useState } from 'react'

type UserData = {
  id: number;
  name: string;
}

export const StateSample: React.VFC = () => {
  //初期値から型が明確なので型推論に任せる
  const [count, setCount] = useState(0)
  //stateをnullでリセットする必要がある時はnullでもとれるようジェネリクスを用いて型を指定する
  const [count2, setCount2] = useState<number | null>(0);
  /*stateにオブジェクトを持たせる場合は、
  予め型エイリアスなどで型を定義しておき、その型をジェネリクスで指定する
  初期値はその型の構造を満たしておく必要がある*/
  const [user, setUser] = useState<UserData>({ id: 1111, name: "aiko" });

  return(
    <div>
      <h1>{count}</h1>
      <h1>{user.name}</h1>
    </div>
  )
}