Reactで作成したコードをTypeScriptに変換
去年、Reactでいくつかアプリを作成してみました。
こちらのWebアプリケーションをtypescriptに置き換えることでtypescriptの勉強が行えないかと思いたち、
既存のReactで生成したコードをtypescriptに置き換えてみることにしました。
今回は、typescriptに置き換えるにあたり環境構築方法についてまとめておきたいと思います！！
- ■TypeScript環境をインストール
- ■TypeScriptコンパイル環境準備
- ■既存ファイルをTypeScriptに置き換える
- ■TypeScriptへ変換したコードを動かしてみる
- ■作品紹介
- ■最後に
- ■参考
■TypeScript環境をインストール
まずTypeScriptを用いるための環境が必要になるのでこちらをインストールしていきます。
コマンドはこちら。
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
エラー等が発生しなければOK。
これでインストールは完了です。
■TypeScriptコンパイル環境準備
次にTypeScriptで記載されたコードをコンパイルするための設定ファイルを作成していきます。
っと言ってもコンパイル実行に必要なファイルである、
tsconfig.json
は、
npm start
や
npm build
などを実行すると自動生成されます。
このため、TypeScriptを明示的に使用する旨をconfigファイルに追記するのみでOKになります。
追加・編集が必要なファイルはありませんでした。
追加・編集せずにtypescriptが導入できるのは楽で便利ですね。
■既存ファイルをTypeScriptに置き換える
では実際に既存の.jsファイルをTypeScriptに変換していきます。
変換手順は、
①自分が作成した.jsファイルの拡張子を.tsxに書き換えます。
②TypeScript用に型指定などを行っていく
になります。
②ですが、vscodeで
TypeScriptの拡張機能を用いるとエラーを教えてもらえるのでとても便利。
自分は、
JavaScript and TypeScript Nightly
をインストールして、エラー検知や修正案を教えてもらっています。
②で型指定等々はTypeScriptの構文・文法に沿って実施してもらえればOK。
documentインターフェースの型指定だけちょっと迷ってしまったので備忘録として残しておきます。
まずdocumentインターフェースの型指定方法ですが、
javascriptにて、
const TurnMessage = document.getElementById("TurnId");
と記載していたとします。
このコードをTypeScriptに置き換える場合には、
const TurnMessage = document.getElementById("TurnId") as HTMLElement;
と型アサーションを付与することで解決できます。
【型アサーションとは？】
型定義の上書き機能とのこと。
TypeScriptでは、推論・分析により得た型を任意の方法で上書きでき、これを型アサーションと呼ばれるメカニズムによって実行しているとのこと。
※参照
typescript-jp.gitbook.io
ただし、型アサーションは実行途中で無理やり型を指定・変換する行為になりますので多用はしない方がよい(出来る限り使用は避けた方がよい)です。
自分も、documentインターフェースにのみ適用してコードを作成してみました。
■TypeScriptへ変換したコードを動かしてみる
コードをTypeScriptに置き換え終わったら、今まで通り、
npm start もしくは yarn start
を実行すればTypeScriptのコンパイルが実行され、内部的にjavascriptに変換されます。
後はWebブラウザ上で、
http://ipアドレス:3000
のようにアクセスすれば作成したアプリが表示されるかと思います。
■作品紹介
去年作成した〇×ゲームとモグラたたきをtypescriptに置き換えてみました。
コードはgithubに上げておりますのでよろしかったが参考にしてください。
github.com
github.com
■最後に
今回はReactで作成したコードをTypeScriptに変換してみました。
どうしても型アサーションに頼ってしまっている部分があるので、こちらは見直し！！
解決出来たらまたブログに載せたいと思います！！
