webpackerでTypeScriptの型チェックをする

READMEにも書いている通り、型チェックはoptionalになっています。それをこうやったよ、という記事です。
https://github.com/rails/webpacker/blob/master/README.md#typescript

ドキュメントには webpack/base.js に書いてねってあるんだけど Rails.envにはbaseなんてないので、webpack/base.js がRails.envとどう絡んでくるのかよくわからなかった。 そして、const { merge } = require("@rails/webpacker"); で取れるmergeはnot functionだったりでコピペでは動かなかった。
おそらくフロントエンドマンにはわかるハイコンテキストな状態なのだと思う。知らんけど。

掲題のことをやるためにこうやったよ

yarn add fork-ts-checker-webpack-plugin でパッケージを入れて、 config/webpack/development.js を以下の通りに書き換えればOK。

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')
const { merge } = require('webpack-merge')
const ForkTSCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

module.exports = merge(environment.toWebpackConfig(), {
  plugins: [new ForkTSCheckerWebpackPlugin()],
})

この状態にしてから、webpackを動かすと型チェックをしてくれて型が合わないとエラーになった。よかったですね。

あとがき

フロントエンドのしきたりみたいなものが全然わからないのでドキュメントに書いている揺らぎっぽいものがあるとそれで全くできなくなる!以前にwebpackを使ったことがあったので出力内容から起きていることを予想して対処できたけど、webpackerが初フロントエンドだったら絶対に対処できなかった。初見に優しくない。