Reactでのtypescriptを用いた関数コンポーネントの型定義

はじめに

大学でC言語を使っていたのでtypescriptはjavascriptを厳密に出来るので非常に好きです。しかし多くの人が型推論に頼っており、引数や戻り値の型が分からずに困っていました。そこですべて型定義を行うことにしました。個人的な備忘録も兼ねているので更新するかもしれないのでよろしくお願いします。

方針

・anyは基本的に使わない
・関数コンポーネント（アロー関数）しか使わない
・propsの型は基本的にinterfaceで定義
・定数、変数、引数、戻り値すべてに型を（可能な限り）つける

変数

一応備忘録として載せておきます。配列はCの名残でこちらの記法の方が好きです。

let num: number;
let str: string;
let flag: boolean;
let array: string[]
let multiArray: string[][];

関数コンポーネント

export const App: VFC = (): React.SFCElement<any> => {
      return (<></>);
};

createReactAppのプロジェクトのAppコンポーネントはこうなる。返り値はrender関数にホバーして出てきた型を使ったが、さすがにこれは型推論で良さそう。あとC言語みたいに引数でvoid入れられないかなーと思ったけど調べた範囲では無理だった。void型の引数が存在することになるのかよく分からなかったので、何も書かないことが引数がないということを示すと思った方が良さそう。あとVFCをつける意味は関数コンポーネントであることと、childrenを最初からは持たないことを明示的に示したいからつけている。正直Appにはいらないけど多少冗長でも統一させたい派なのでつけておく。

interface Props {
  str: string[];
  onClick: (index: number) => void;
}
export const component: VFC<Props> = (props):React.ReactElement => {
   return(<></>);
}

propsを持つ関数コンポーネントの場合、interfaceでpropsの型定義を行う。stateを更新する関数などは上のように定義できる。返り値はこれかJSX.Elementになるそう。この返り値も型推論で良さそう。

 todos.map(
          (todo: string, index: number): React.ReactElement => {
            return (
              <div key={todo}>
                <li>{todo}</li>
              </div>
            );
          }

.mapなどもこのように書ける。引数については書いておきたいがやはり返り値はいらないように感じる。

おわりに

関数コンポーネントの返り値の型は書かずに型推論に任せた方がいい。

参考文献

[1]:雰囲気で使わない @types/react
[2]:TypeScript のオブジェクト型リテラルいろいろ
[3]:any型で諦めない React.EventCallback
[4]:【TypeScript】React.VFCとは何ぞや