contentTypeScriptを使ってreactのチュートリアルを進めると捗るかなと思った(実際捗る)TypeScriptReactTaiyaqstackblitzこの記事を書いたのは2016年のことでした。いつの間にか日本語チュートリアルが消えたし、結構未だにいいねを押してくださるので更新することにしました。(2018/2/2)reactの本家ドキュメントが日本語化されたため更新します。(2019/4/11)はじめにタイトルみたいなことを考えていました。実際補完が効くのはかなり有効でしたが、チュートリアル通りにいかない点が多々出ました。型)素敵だったのでいいと思いました。追加で使うツール類なし今なら以下で試せます。オンライン版VisualStudioCode的な(コード補完が効きます)具体的変更点https://ja.reactjs.org/tutorial/tutorial.html上記を見ながら作業を進めます。ボタンを押して作業できるようにしましょうそれだけです。ローカルで開発する方法も書いています。これについてもTypeScriptで同じことはできます。コマンドとして以下を使うだけです。"Reactとは何か?"を読み終わりましたよね。Propsを通してデータを渡す。https://ja.reactjs.org/tutorial/tutorial.html#passing-data-through-propsただのJSに於いては、Propsはただのオブジェクトでスキーマレスですが、TypeScriptではスキーマ設定可能で補完できるようになります。エディターで補完を聞かせても今はpropsの中味がchildrenくらいしかありませんよね。以下の様な感じで定義します。パラメータ(この場合はvalue)が足りないとエラーを吐いてくれます。序盤は何が足りないのかわからないので凄く楽ちんになります。onClick={alert('click')}なんぞ書くとTypeScriptは怒ってくださいます。数値型かnullだよって意味です。'X'})}>とかけって言ってきますが、、、、、コンパイルエラーになりますね。valueの定義を思い出して下さい。null;}文字列が許容しない設定になっていました。null;}動くようになりました。Inspectは簡単です。別ウインドウで動作確認ができるのでそこでInspectを使うだけです。Up)ってことみたいですね。はいらない子みたいなので削除します。Board側にStateを持たせます。(より上位のコンポーネントにStateを集めるという考えが最終的にReduxにつながっていくんですよねぇ。して型定義をまとめてみました。チュートリアルの記述を見てみるとまだBoard上でhandleClick()メソッドを定義していないので、コードがクラッシュします。ありますがそもそもTypeScriptではコンパイルエラーになるので挙動を確認することなく問題があることが解ります。型を明示するだけです。書くと、コンパイルエラーになります。手番の処理https://ja.reactjs.org/tutorial/tutorial.html#taking-turnsもうここまで来たら、わかると思います。追加が必要ってことですね。残りあとは特に語ることもないです。チュートリアルを進めて下さい。最終的な結果は以下に置いておきます。https://stackblitz.com/edit/react-ts-tutorial-starter-rapwmd感想JSX(TSX)とTypeScriptの相性最高だと思いました。コンパイラがカスタムエレメントをまるでもとからあるHTMLタグかのようにリアルタイムに指摘してくれるさまは至福のひとときです。今は仕事で主にVue.jsばかり触っていますが、ぜひ仕事でも使ってみたいものです。Taiyaqを作っています。upLoginユーザーは見つかりませんでした。