RailsでReact & TypeScriptする（Lintもね）
Packtさんが毎年恒例の5ドルセールをやってくれていたので、TypeScriptの本を眺めています。
ただ眺めていても仕方ないので普段のお仕事に使っているRailsに入れてみます。
（この本はRailsとは関係ありません。念の為）
WebpackerはTypeScriptに対応しているので、ドキュメントが用意されています。
これに沿って進めていきます。
$ ruby -v
ruby 2.5.3p105 (2018-10-18 revision 65156) [x86_64-darwin17]$ rails -v
Rails 5.2.2
環境はこんな感じです。プロジェクトを作ります。
$ rails new rails-react-typescript-example --webpack=react
$ cd rails-react-typescript-example/これでReactが入ったプロジェクトができました。では、TSを入れます。
$ ./bin/rails webpacker:install:typescript
$ yarn add @types/react @types/react-dom$ mv app/javascript/packs/hello_react.jsx app/javascript/packs/hello_react.tsx
ビューから呼び出してみます。
$ ./bin/rails g controller welcome index# config/routes
root 'welcome#index'# app/views/welcome/index.html.erb
<%= javascript_pack_tag 'hello_react' %>
<%= javascript_pack_tag 'hello_typescript' %>$ ./bin/rails s
$ open http://localhost:3000/
hello_typescript が出しているコンソールログも、 hello_react で定義したコンポーネントも無事動いていますね！
TypeScriptに怒られてみる
このままではTSの良さがいまいち感じられないので、試しに怒られてみます。
と、その前に「TSやるならVS Code」みたいな雰囲気があるので入れておきます。
Extensionsは以下の3つをとりあえず。
- Ruby
- Vim
- TSLint
$ code . して hello_react.tsx を開きおもむろにtypo（ name→ nam）すると…
{ nam: string } だとHelloコンポーネントのPropsの型（ { name: string }）とあっていないよ、とリアルタイムで怒ってくれました。ありがとう。
また、 name があっていても型が違っていればもちろんだめです。TypeScriptですからね。
TSLintを入れる
最後に。もはやLintがないとコードが書けない体になってしまっているので、入れておきます。
$ yarn add -D tslint tslint-react tslint-config-prettier# tslint.json
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended",
"tslint-react",
"tslint-config-prettier"
],
"jsRules": {},
"rules": {},
"rulesDirectory": []
}
const を let に変えてみます。
ESLint さんと同様のメッセージで怒ってくれました。いつもありがとう。
今回はこんな感じで終わりです。
既存のJSがそのまま動くのは気軽でいいですね。つぎ僕がrails newする案件があったら入れちゃおうと思います（笑）
ソースコードは一応こちらにあります。
