jsのNuxtをtsに手動変換することで学びが深まった話
はじめに
皆様こんにちは！今回は自社サイトのNuxtプロジェクトがJavaScriptで実装されていたものをTypeScriptに手動変換したので備忘録として手順を書き記しておこうという記事になります。
実施時期
- 2022年2月
バージョン情報
- nuxt: 2.15
手順１: まずは公式サイトをみて手順通りにやってみる
手順2: deplecatedになっているパッケージを指示されたものに差し替える
みなさんがtsに変換しようとしているそのプロジェクトは、その昔実装されたものだと思いますので、eslintまわりなどのパッケージはdeprecatedになっているパッケージも多いはずです。ざっと怪しそうなパッケージのGitHubのREADME.mdを確認しておきましょう。
今回は babel-eslint がdeprecatedになっていたのでREADMEの指示通り、 @babel/eslint-parser へ差し替える作業をしました。
手順3-1: バージョンが古すぎるパッケージをバージョンをアップグレードする
jsからtsに変換する際に色々なエラーが出るのですが、installされているパッケージが古すぎるままだと謎のエラーが頻出します。Vueのコンポーネントをjsからtsに変換した際にでたエラーなのか、それともバージョンが低すぎることで発生している謎エラーなのか見分けがつかなくなるので、Vueのコンポーネントを書き換える前にこちらを対応します。今回はeslintのバージョンが6系だったのですが、8系にあげる作業をしました。
手順3-2: パッケージがnodeのバージョンを求めてきたら、指定のnodeのバージョンまでアップグレードする
手順3-1でeslintのバージョンをあげた際に、必要なnodeのバージョンが14だったのでnodeのバージョンも12から14へあげました。
手順4: jsconfig.jsonの内容をtsconfig.jsonに移す。移し終わったらjsconfig.jsonを削除する。
tsconfig.json自体は手順1で作成されていると思うので、今まで利用していたjsconfig.jsonの内容を書き写していきます。
手順5: コンポーネントをjsからtsに書き換える
公式のドキュメントを参考にしながら、それぞれのコンポーネントのスタイルにあわせてTypescriptの書き方になおしていきます。まずは、簡単なコンポーネントを変換してみて、そもそもTypeScriptが設定できているのかを確認します。
余談「なぜTSで書くときは Vue.extend({}) としなくてはならないのか」
ところで、今回のプロジェクトはOptions APIで実装されていたのですが、なんで TypeScript連携するとき Vue.extend({}) ってしなくてはいけないのか、長年の疑問が下記のURLで解けました。
手順6: プラグインをjsからtsに変換する
Nuxtのコード内で this.$axios みたいな感じで書かれているコードは、Nuxtの機能で読み込まれたプラグインが実行されている形になります。axiosなどの npm install でインストールしたプラグインは公式のドキュメントを参考にtsに対応させましょう。その後、自作したプラグインについてもtsのコードに書き直しましょう。
手順7: 動作確認をする
最後に、yarn run dev でサーバーを立ち上げてサイトの動作確認をします。
おわりに
今回は初めてjsのプロジェクトをtsに変換してみたのであえて全手動で対応してみました。
次回、機会があったらts-migrateを使った書き換えに挑戦してみたいと考えています。
その他注意点
-
Nuxt TypeScriptの公式サイトに記載はないのですが、
nuxt-tsコマンドを利用した際、現在はnuxt-tsコマンドを使わなくてもnuxtコマンドで大丈夫だよとのWARNINGがでたので、 引き続きnuxtコマンドを利用するかたちで問題なさそうです。
Discussion