3.7.2Reactアプリケーションにデータ型を定めたいとき、TypeScriptが標準として使われるようになってきました。本稿では、関数コンポーネントで組み立てたサンプルを、TypeScriptにより型づけしてみます。クラスのコンポーネントをuseState()で関数に書き替える」で、React公式サイトのチュートリアルにもとづいて、コンポーネントはモジュール分けしたうえでフックを組み込んだ作例(○×ゲーム)です(サンプル001)。このReactアプリケーションに、TypeScriptの環境を組み込んで型づけします。Appは、ひな形のReactアプリケーションを環境とともに構築します。create-react-appと入力して、ディレクトリとなるアプリケーション名を添えるのが基本です。TypeScript」参照)[*1]。typescript新たにつくられたディレクトリ(react-typescript)を開いてみると、アプリケーションを組み立てるふたつのモジュール(src/App.tsxとsrc/index.tsx)の拡張子がTypeScript形式の.tsxになっています(図001)。テスト用のモジュール(.test.tsx)やロゴのSVGファイル(logo.svg)は使いません。図001■ReactアプリケーションのモジュールがTypeScript形式でつくられるpackage.jsonファイルには、TypeScriptと型定義が加えられています。},}ひな形のアプリケーションのインストールに用いられたのは、npmでなくyarnです。ローカルサーバーで開くには、アプリケーションのディレクトリ(react-typescript)でつぎのコマンドを打ち込んでください。startひな形アプリケーションのモジュールは、前掲サンプル001に合わせてつぎのようなパスの変更およびファイルの追加を行います。src/App.csssrc/App.tsx→src/components/App.csssrc/components/App.tsxsrc/components/Board.tsxsrc/components/Square.tsxモジュールsrc/index.tsxのコードは、src/components/App.tsxのパスの変更に合わせて、つぎのようにimportを書き替えてください。このモジュールの手直しはこれだけです。型指定しなくても、TypeScriptの型チェックはとおります。'./components/App';上記4つのファイルに、前掲サンプル001のコードをコピー&ペーストしたうえで、TypeScriptファイルについては次項以降で型づけをしてゆきます。その前に動作を確かめたいという場合、TypeScript形式(.tsx)では型チェックが働いて、ローカルサーバーを起ち上げられません。startを実行してください(型づけをするときに.tsxに戻します)。typescriptでなく--typescriptを用いていることがあります。このオプションは非推奨になりました。create-react-appコマンドを実行すれば、つぎのような警告が表示されるはずです。typescript.--typescriptオプションは推奨されず、将来のリリースから除かれます。typescriptをお使いください。関数コンポーネントに型づけするコードの短いモジュールから、順に進めてゆきましょう。src/components/Square.tsxにサンプル001のsrc/components/Square.jsのコードをコピー&ペーストすると、早速関数コンポーネントSquareの引数について、つぎのような警告が示されるはずです(図002)。TypeScriptはデータ型を代入や文脈などから推論します。このコンポーネントの引数についてはそれができずに、すべて受け入れるanyになってしまうということです。図002■関数コンポーネントの引数に警告が示される。Components)」参照)。引数はオブジェクトで、文字列(value)とメソッド(onClick())をひとつずつもちます。Alias)」参照)。オブジェクトリテラルと同じようにプロパティを加え、値の替わりにデータ型を与えてください。Components」参照)。モジュールsrc/components/Square.tsxの関数コンポーネント(Square)を型づけしたのが、つぎに抜き書きしたコードです。エイリアスtypeでオブジェクト(Props)にメソッド(onClick)を定めるには、引数と戻り値の型を与えてください。{};つづいて、モジュールsrc/components/Board.tsxの型づけも基本的に同じです。typeでオブジェクト(Props)の型に定めるArrayのプロパティ(squares)については、つづく<>に配列要素の型を与えます。{};ふたつのモジュールについて、TypeScriptに対応する書き替えはこれだけです。関数コンポーネントのインタフェースReact.FunctionComponent(React.FC)には、JSX要素のテンプレートを返すことも定められています。以下のコード001と002に、それぞれのモジュールの記述をまとめました。アプリケーションモジュールのメソッドに型づけするアプリケーションモジュールsrc/components/App.jsの関数コンポーネントは、function宣言で定めました。引数はありませんし、戻り値もreturnした値から型推論されます。コンポーネントそのものへの型づけは要りません(JSX要素で型指定したい場合にはReact.ReactElementが使えます)。コンポーネントのメソッドや、外に定めた関数については、引数の型を与えるよう求められるでしょう。型に配列を定めるときは、Array<>の中に要素の型を加えてください。{}これでTypeScript形式(.tsx)のモジュールが、すべて型チェックをとおるようになりました。モジュールsrc/components/App.tsxの記述全体は、つぎのコード003のとおりです。併せて、CodeSandboxに以下のサンプル002を掲げますので、各モジュールのコードと動きについてはこちらでお確かめください。Reactライブラリのimportお題のサンプル書き替えはここまでにして、ふたつほど補います。ひとつ目はReactライブラリをimportする構文です。TypeScript形式のコード例で、つぎのように書かれていることがあります。この構文でも構いません。その場合にはtsconfig.jsonのcompilerOptionsで、allowSyntheticDefaultImportsをtrueに定めておかなければなりません。typescriptオプションを添えてつくったひな形アプリケーションにはこの設定が加わっているのです。typeとinterfaceもうひとつ触れておきたいのは、プロパティが備わったオブジェクトを、どう型指定するかです。本稿では型エイリアスtypeで定めました。interfaceによりインタフェースをつくる手もあります。そのほか、複数のモジュールで用いる共通の型を決めるようなときも、インタフェースの方がよいでしょう。拡張はあまり考えず、それで済むのであれば、型エイリアスでも構わないとされています。{};今回のお題では、それぞれのコンポーネントの中だけで使う簡単な型の定めです。型エイリアスtypeで差し支えないでしょう。