react typescript

React+TypeScript+jQueryの共存(2)


React+TypeScript+jQueryの共存(1)の続きです。

TypeScriptでJSXを扱う

環境が作れたら、今までReactで作ってきたJSXのコンポーネントを、TypeScriptで書くためにTSXにしていきます。
とりあえず単純にファイルの拡張子を.tsxに変えちゃいます!
もちろんこれだけだと何も動きません。
でも.tsxファイルがあれば、

とすることで、ビルド&監視ができます。
拡張子が.tsや.tsxのファイルを修正・保存した時点で毎回自動でビルドしてくれるので、エラーの内容も確認できます。

私はJSXやTSXを修正するときは、Atomにプラグインを入れて使ってます。おかしいところがあったら保存しなくても編集した瞬間にヒントが出るので便利です。
(Atomの方でエラーがなくてもビルドが通るとは限らないのがつらいところですが…あくまでも補助機能です)

で、今までだとエントリポイントのapp.jsxは、こんなふうに書いていました。

これが、tsxにしたときはこうです。

モジュールの読み込みがだいぶ変わったのと、コンポーネントを作る時にReact.createClassじゃなくなりましたね。

ReactやjQueryのモジュールをimport

モジュールの読み込みは、いろんな記事を見ていると違う書き方も見かけたのですが、なんだかんだ最後にうまくいったのはこれでした。
私の使っているTypeScriptのバージョンは1.8.10です。
1.6だったり2.0のbeta版を使っている人なんかもいるので、そういった記事の情報がまぜこぜになってしまい、だいぶ混乱しました(;´Д`)

2.0の場合、@typeっていう型定義の方法があって、それが楽ちんらしいので試してみたのですがうまく導入できませんでした。
うまくいかない原因がそもそもほかのところにあるかもしれないんですけど、それを特定できるようなところまで持っていけないので、前回作った環境でTSDを使っています。

jQueryは、index.htmlで読み込んでいるだけではダメで、ここでモジュールを指定してあげないといけません。
「jQueryの型定義ファイル(/typings/jquery)」「本体のjQueryの読み込み(index.html)」と「モジュールの読み込み(Index.tsx)」すべて揃わないとコンパイルも通らないし、あちこちで「$なんてnameは見つからないよ」みたいなエラーが出まくります。

TypeScriptの真骨頂、classと型定義

さて、肝心のJSXがどうなったかというと。

React.Componentから継承して、Mainというclassを作るよって言ってるみたいですね。
<any,any>というのは、<prop,state>の型をそれぞれ指定するところです。

・・・が、

今から型定義を全部やっていくのはつらいので、暫定的にany,any(なんでもアリ)にしちゃいます!

とにかくコンパイルを通して画面を表示できるところまでもっていきたいんです!

ほかのTSXファイルからコンポーネントをもってくる

さて、Index.tsxはできましたが、

このへんで、ほかのTSXファイルからコンポーネントをもってきていますね。
当然、こいつらもTypeScriptに書き換えないといけません。
今回は例として、SiteFooter.tsxの中身を見てみます。

フッタの中身のHTMLはまだ作っていないので、空のfooter要素を生成するだけです。

class SiteFooter extends React.Component<any,any>は、先ほどと同じですね。
よく見ると、頭に export default というのがついています。
まあ見ての通り、このコンポーネントをexportしておいて、Index.tsx側でimportしている、っていうことですね。

かんたんかんたん(`・∀・´)エッヘン!!

もしここまでで試したければ、一度SiteHeaderとMainを消し、SiteFooterとBodyだけにしておいて

しちゃうっていう手もあります。

index.htmlは、こんなふうにReactDOM.render()の対象となるdiv要素と、jQuery本体、common.js、bundle.jsの読み込みが書かれています。

私が実際にやったときはあちこちエラーが出まくってどこをどうするのが正解か、たどり着くまでにすごく時間がかかりましたが…
これで各コンポーネントをまとめてレンダリングするところまでの大枠はできました。

次回以降、classの中身を見ていきます。

React+TypeScript+jQueryの共存(3)

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です