TypeScriptの導入

[IkumaTadokoro]

サブタスク

• rails webpacker:install:typescript
• Webpack の設定
• Lint周りをTypeScriptに導入させる
• 動作確認

メモ

• https://v3.ja.vuejs.org/guide/typescript-support.html
• 一応Vueの公式ドキュメントだとJetBrains系のエディタはVue + TypeScript環境をデフォルトでサポートしているとある。もし何か不便があればプラグインを導入する。
• Composition API とともに使用する

[IkumaTadokoro]

WebpackerでVue3までの動作確認はできている状態でTypeScriptを導入しようとしているんですが、コンパイルエラーになってしまっており、この原因が解決できませんでした。

 ERROR in ./app/javascript/src/components/HelloWorld.vue?vue&type=template&id=6e980648&scoped=true&ts=true (./node_modules/vue-loader/dist/templateLoader.js??ref--5!./node_modules/vue-loader/dist??ref--15-0!./app/javascript/src/components/HelloWorld.vue?vue&type=template&id=6e980648&scoped=true&ts=true) 3:27
 Module parse failed: Unexpected token (3:27)
 File was processed with these loaders:
  * ./node_modules/vue-loader/dist/templateLoader.js
  * ./node_modules/vue-loader/dist/index.js
 You may need an additional loader to handle the result of these loaders.
 | import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 | 
 > export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
 |   return (_openBlock(), _createElementBlock("p", null, _toDisplayString(_ctx.message), 1 /* TEXT */))
 | }
 ℹ ｢wdm｣: Failed to compile.

Vueのソースは下記の通りで、状況は次の通り。

• lang='ts'をはずした場合は正しく動作する
• lang='ts'がついている場合に、<template>~</template>を一式削除すると、コンパイルがとおる。<script>タグにコンソールログ等を挟んでも正しく実行される。
• lang='ts'のtsの部分を適当な文字列に変えてもコンパイルが通る。
• <template>の記述位置を変えても同じエラーが発生する。

 <template>
   <p>
     {{ message }}
   </p>
 </template>
 
 <script lang="ts">
 import { ref, defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'HelloWorld',
   setup() {
     const message = ref('Hello World')
 
     return {
       message
     }
   }
 })
 </script>
 
 <style scoped>
 p {
   font-size: 2em;
   text-align: center;
 }
 </style>

やったこと列挙

1. WebpackerデフォルトのTypeScriptインストール

• rails webpacker:install:typescript
• Switch from ts-loader to babel-loaderのとおり、現在はts-loaderではなく、babel-loaderを使っているとのこと。Added TypeScript upgrade docs for Webpacker 5.1にのっとり、yarn add babel-preset-typescript-vue後に、['@babel/preset-typescript', { 'allExtensions': true, 'isTSX': true }]を["babel-preset-typescript-vue", { "allExtensions": true, "isTSX": true }]に置換

2. ts-loaderを使用
webpackerのリポジトリを漁ってみたところ、babelに切り替わって以降に「Vue3とTypeScriptがはts-loaderで動いた」という会話が発生していたので、乗っかってみたもののエラー
rails/webpacker#2751
https://dev.to/vannsl/webpacker-vue-3-and-typescript-1i99

• yarn add typescript ts-loader
• config/webpack/loaderにts-loaderの設定ファイルを追記し、config/webpack/environment.jsで読み込む
• tsconfig.jsonを手動で追加する
• webpacker.ymlのextensionsにtsを追記する

3. 2.に加えて、TypeScript系のESLintを導入する
実はTypeScriptをみていないESLintのせいでは？と疑い導入してみる。結果として、エラーは変わらず。

• yarn add --dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
• eslintの設定ファイルを修正

[IkumaTadokoro]

TypeScriptはあとからでも導入できるので、対処は一旦保留にする。