Adding TypeScript to a Rails + Webpacker + Vue project
These instructions assume you already have a Rails 5.2 project using Webpacker 4 with Vue 2 and Vuex 3. I'll show you how to add TypeScript to the project, and type-safe your Vue components, including single-file components (SFCs). This document will not teach you TypeScript syntax or type theory. It also assumes your code already works without TypeScript. You shouldn't use this article to, for example, get started with Vuex, because I'm leaving out lots of necessary boilerplate code and focusing just on TypeScript changes.
If you want to see a commit on a project accomplishing this migration, visit https://github.com/RISCfuture/AvFacts/commit/666a02e58b4626a074a03812ccdd193a3891a954.
rails webpacker:install:typescript. This should modify
config/webpack/environment.js(leave those changes), add
config/webpack/loaders/typescript.js(leave those files), and add some other files in `a