Webuilder240

Rails6 (Webpacker)でシンプルにTypeScriptだけを使う方法

2020-06-21 10:53:57 +0900

TypeScript Heroku Ruby
イマドキWebpackerだし、TypeScriptだけを導入してほかのフロントエンドフレームワーク導入しないのどうよ？
みたいなのはあるんですが、このブログを進化させていくにあたり、徐々にステップアップしたい気持ちと、正直フロントエンド開発は手を抜きたいな、という理由から、TypeScript「だけ」をRails6に導入したのでその時の作業メモです。

TypeScriptをインストール

TypeScriptだけをインストールするのは簡単です。
rails webpacker:install:typescript
でインストールするだけ。
このときにサンプルの.tsファイルを周辺の設定ファイルがルートディレクトリだったりに作成されます。
とにかくWebpackerは簡単ですね。片手間フロントエンドエンジニアには欠かせないです。
僕の場合は、もともとjavascript/packsにあったapplication.jsをapplication.jsに変更しておきました。

HerokuにDeployする場合の注意点

HerokuにDeployしたときにこんな感じのエラーが発生して、デプロイに失敗しました。
 ERROR in /tmp/build_5fa77ad47efde7b8ef601d9fecb0ca0c/app/javascript/packs/application.ts       
./app/javascript/packs/application.ts       
[tsl] ERROR in /tmp/build_5fa77ad47efde7b8ef601d9fecb0ca0c/app/javascript/packs/application.ts(1,1)
TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node`.              ERROR in /tmp/build_5fa77ad47efde7b8ef601d9fecb0ca0c/app/javascript/packs/application.ts       ./app/javascript/packs/application.ts       [tsl] ERROR in /tmp/build_5fa77ad47efde7b8ef601d9fecb0ca0c/app/javascript/packs/application.ts(2,1)             TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node`.              ERROR in /tmp/build_5fa77ad47efde7b8ef601d9fecb0ca0c/app/javascript/packs/application.ts       ./app/javascript/packs/application.ts       [tsl] ERROR in /tmp/build_5fa77ad47efde7b8ef601d9fecb0ca0c/app/javascript/packs/application.ts(3,1)             TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node`.              ERROR in /tmp/build_5fa77ad47efde7b8ef601d9fecb0ca0c/app/javascript/packs/application.ts       ./app/javascript/packs/application.ts       [tsl] ERROR in /tmp/build_5fa77ad47efde7b8ef601d9fecb0ca0c/app/javascript/packs/application.ts(4,1)             TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node`.

対処法は `@types/node` というものが必要だった見たい。素のままのだと、requireがないらしい。
npm install --save @types/node
してあげてから、Railsのルートディレクトリにある、tsconfig.jsonに下記設定を追加しましょう。

  "compilerOptions": {
    "declaration": false,
     ...
    "types": ["node"],
     ...
  },

これらが設定完了した後、Herokuに再デプロイしたらうまくいきました。

関連しそうなブログ