既存のVue.jsプロダクトにTypeScriptを入れる【webpack4.x+babel7+vue.js 2.x】


Laravel4+blade+jQuery+knockout.,jsの、レガシーなフロントエンド構成から、ひとまず、knockout.jsを排除してVue.jsに書き換える作業をしていたのですが、急遽、「TypeScriptも入れたほうが良くね?」ということになったので、作業メモ。

 

・webpack4.x+babel7+vue.js 2.xの環境については、以下サイトを参考に構築しましたm(_ _)m

【参考サイト】Vuexを使用する基本的なビルド環境を構築する

・class style componentの導入はVue3.0でのTypeScriptの影響を考慮し、見送りました。Vue.extendベースでの開発想定

【参考サイト】Vue.js × TypeScript でclass style componentを廃止した話 

 

npmモジュールのインストール

まずは、TypeScript と、TypeScriptをwebpackで処理するための「ts-loader」を入れます

webpackがまだ入って無いよーって方は、webpackも入れます。

package.jsonに追加されたことを確認します。

■package.json

webpack.config.jsの修正

webpack.config.jsファイルにTypeScript用の記述を追加していきます。(①〜③)

main.jsをmain.tsにリネームする

この状態で、①にある、main.jsをmain.tsにリネームします。

エラーと戦う

準備ができたので、一度 npm run dev 等でコンパイルしてみると、多くのエラーが出ると思うので一つづつ倒していきます

1.Cannot find module

これはTypeScriptから .vue ファイルが読めていないということなので、 webpack.config.jsを以下のように編集します。

webpack.config.js

①option「appendTsSuffixTo」で、vueファイルをtsとして監視するように追加します。

 

また、Cannot find moduleとなっていた.vueファイルでも、TypeScriptを利用するための宣言が必要なので、全て書き換えます。(ついでに、型推論が使えるようにする。)

■.vueファイル(単一ファイルコンポーネント)

<script lang="ts"> とすることで、Typescripを利用する宣言をする。

②Vue コンポーネントオプション内部で TypeScript が型を適切に推測できるように export default していたオブジェクトを Vue.extend() で定義します。

③ Vueがimportされていない場合は、以下のエラーがでるので、importしておく

 

2.Laravel用のvenderディレクトリ配下でめちゃエラーでる

symfonyでエラーが起きてる辛い。なぜそんな関係ないところ見に行ってしまうん・・。

こちらは、tsconfig.jsでvenderディレクトリを対象外にする必要があります。

■tsconfig.js

①excludeを追記する。

3.Cannot find nameめちゃでる。

Laravelのbladeなど、テンプレートエンジン内で書いたグローバル変数や、読み込んだjQueryなどの外部ライブラリ周りで、以下のエラーが大量発生します。

TypeScriptコンパイラは宣言されていない変数にアクセスする処理をコンパイルエラーにし、グローバル変数に依存する処理を検出することができます。

【参考サイト:レガシーなJavaScriptコードをTypeScriptを使って整備したメモ – ryiwamotoのブログ

このような、グローバル変数は最終的には削除していくべきですが、今回は、アンビエント宣言を使用し、ソースコード外で初期化される変数を明示的に宣言します。

■エラーがでてる.vueファイルor .tsファイル

①bladeで宣言している変数を、vue側でアンビエント宣言する

これで、依存しているグローバル変数名とその型を明確にすることができました。

 

dataやpropsの型を付けていく

これで、一旦、TypeScriptの導入と、コンパイルエラーの解消は完了したので、あとはVueコンポーネントのdataなどに型定義をしていきます!TypeScriptの恩恵受けるぞー。お疲れ様でしたー。

 

 

 

この記事がお役に立てたら、是非シェアをお願いします^^