docker-composeでRails6開発環境の手順に従って、Rails6の新しいプロジェクトが立ち上がった状態を想定しています。まずは、以下のコマンドでtypescriptをインストールします。
docker-compose exec web rails webpacker:install:typescript
最後に以下のようなメッセージが出ていればOKです。
info All dependencies
├─ ts-loader@8.0.3
└─ typescript@4.0.2
Done in 99.53s.
Webpacker now supports typescript 🎉
サンプルのファイルがapp/javascript/packsに置かれています。
ここにTypeScriptを記述することができます。
app/javascript/packs/hello_typescript.ts
// Run this example by adding <%= javascript_pack_tag 'hello_typescript' %> to the head of your layout file,
// like app/views/layouts/application.html.erb.
console.log('Hello world from typescript');
コメント欄に書いてあるように、レイアウト(erb)の方にタグを追加します。
app/views/layouts/application.html.erb
<%= javascript_pack_tag 'hello_typescript' %>
railsのWebサーバを立ち上げた状態で、なにか適当なページにアクセスすると、webpackerが動き出して、jsファイルを生成してくれていることが確認できます。
web_1 | [Webpacker] Compiling...
web_1 | [Webpacker] Compiled all packs in /railsapp/public/packs
:
web_1 | js/hello_typescript-a311f1059a83d1e0c165.js 4.12 KiB hello_typescript [emitted] [immutable] hello_typescript
web_1 | js/hello_typescript-a311f1059a83d1e0c165.js.map 3.81 KiB hello_typescript [emitted] [dev] hello_typescript
ブラウザのコンソールに「Hello world」が確認出来たらOK！
