react typescript

React+TypeScript+jQueryの共存(4)


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

TypeScriptにしたらref属性もうまくとれない!

今まではref属性を使って、this.refs.nameとかでref属性で特定した要素のname属性の値はなんだろな?って取得することができました。
ところが、TypeScriptにしたらなんかうまくいきません。
調べてみると、

という具合にやり方を書いてくれている記事があったのですが…

すみません、自分のソースを良く見たら、そもそもref属性を見ないといけないところなんてありませんでした。
前回参考にしていたTag.tsxのTagコンポーネントは、こんな感じ。

それが、こう。

(´ε`;)ウーン…

apiURLに代入するためのURL文字列を作っているところ。
this.refs.tag.nameとかやらなくっても全然良くて、親から渡されたidをそのまま使えばいいだけでした。
無駄なことしてましたね。
ref属性消してもコンパイル通るし(;´Д`)

というわけで私のソースは参考にならないので、ref属性を使いたくて困ってる方は上記の記事リンクを参考にしてみてください。

おそらく今jQueryで書いているところをすべてReactに置き換えたりする場合、その過程でref属性が必要になってくるのかな?という予想。

map()に渡されるデータの型定義が必要

さてもう一つの問題ですが、こちら。

かんたんに言うと、

この行でエラーが出ます。

dataってなんだよ!って言われます。

これはTagListコンポーネントをいくら睨みつけてもダメで、dataを渡している親コンポーネントを修正する必要があります。
TypeScriptを導入する前のソースでは、親となるSiteHeaderコンポーネント(SiteHeader.jsx)で、getInitialStateしていました。

それをTypeScriptに置き換えたのだから、TypeScriptの書き方にしないといけないですね。SiteHeader.tsxを修正します。

constructor()の中でdataを初期化しています。
ほかのところで出てくるイベントのthisをbindしている記述が一緒に入っていますが、これは前回の記事でやったやつです。

大事なのは

ここですね。

ということで、TagListコンポーネント自体はそこまで変更ありません。
exportの仕方が変わったのと、map()の無名関数の引数tagに型を定義(やっぱりany!)しただけです。

ここまでやったのと同じような修正を全体にかけます。
骨が折れますね…(;´Д`)
既存プロジェクトに導入するのは無謀でしたかね。

自前のjsファイルをtsファイルに変更

あと残るはcommon.jsです。
これはjQueryのようなライブラリと違って、便利な型定義ファイルがありません。
まあ、当たり前なんですが…

こんなふうにして自分で型をつけていかないといけませんね。

ここまでやればもうコンパイルも通る!
別に共存させるつもりでやったわけじゃないんですが、結果的にReact+TypeScript+jQueryが共存したソースができあがりました。
あとはanyをばら撒いたところらへんをちゃんと型定義するとかしないと。

とりあえずGitHubに置きました。

React使ってSPAを作るよではLaravelを使ってるんですが、このリポジトリにはLaravelの関連ファイルが上がってないので、ローカルで動かしたい場合はLaravel入れておいてくださいね。

こんなのもできたようなので、これもminamiで試してみたいです…

スポンサードリンク

菜摘

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

コメントを残す

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