javascript Nuxt.js TypeScript Vue.js プログラミング 開発ノウハウ

Nuxt.js + TypeScriptでの環境構築と作業の進め方まとめ

投稿日:


 

(この記事は2019年7月に執筆しました。)
こんにちは、mabuiです。
5月から参画して、1人で実装を進めていたNext.js + TypeScriptのプロジェクトがリリース手前まで進んだので、プロジェクトをこなした上で身についた知見を数回に分けて共有していきます。
 

初回の今回はNuxt.jsのプロジェクトへのTypeScriptの導入方法から、コンポーネントでの型の扱い方、TypeScriptの書き方まで、この記事を通して自走してプロジェクトを進めれるようになることを目標に書いていきます。
 

Nuxt.jsのTypeScriptサポートは2019年7月現在、絶賛進行中のため、頻繁に更新されるNuxt.jsのバージョンによって方法が変わるため、作業を行う場合は公式の更新情報も参考にしてください。 https://ja.nuxtjs.org/guide/release-notes/
この記事ではv2.8.1で説明を進めていきます。
 

今回説明に使用したコードはこちらのリポジトリに置いています。
mabuix/nuxt_template
 

プロジェクトの作成・初期設定

まずはnext公式の足場ツールでプロジェクトを作成します。

 

対話式になるのでEnterで選択していきます。
Nuxt.js modulesとlinting toolsはspaceで両方選択します。

 

下記が選択内容です。

 

全て選択してダウンロードが終われば、プロジェクト作成完了です。

 

作成したプロジェクトディレクトリ配下でyarn devコマンドでアプリを起動して、http://localhost:3000にアクセスできます。

 

次に作成されたnuxtの作業ディレクトリをsrc配下にまとめる設定を行います。
後々プロジェクトが膨らんでくると大変になるので、今のうちにやっておきましょう。

 

nuxt.config.jsにsrcDirを追加します。

これでアプリ起動時に先ほどと同じようにアクセスできるようになります。
 

Jestを導入している場合、jest.config.jsのパスも変更しておきましょう。

これで、yarn testでテストが成功し、カバレッジも取得できる状態になります。
 

ではここからTypeScript用の設定を行なっていきます。
 

TypeScriptの導入

インストール

初めに必要なパッケージをインストールします。

 

次に必要なファイルを作成します。ファイルの中身はアプリ起動時に自動生成されます。

 

設定ファイル変更

次に設定ファイルであるnuxt.config.jsをTypeScript化します。
ファイル名をnuxt.config.tsにリネームし、内容を下記に書き換えます。
 

nuxt.config.js

 

 
nuxt.config.ts

 

コンポーネント変更

ではpages/index.vueコンポーネントをTypeScriptに変更していきます。
2019.7現在、公式でのTypeScript サポートページではvue-property-decorator を使用したクラススタイルでの記述を推奨していますが、予定されていたVueのv3.0でのクラススタイルサポートが諦められて、今後非推奨になる可能性があるため、もう一方のVue.extendを使用した記述を行います。
 

 

 

Scriptタグの言語をtsに変更し、Vueのインスタンスをimportしてextendメソッドでラップするだけで単一ファイルコンポーネント内での型補完が効くようになります。
 

yarn devで起動させてみるとエラーになりました。

 

TypeScriptでモジュールの捜索ができていないようなので、vue拡張子ファイルを認識するよう、TypeScriptの型拡張ファイルをsrc配下に作ります。名前は最後が.d.tsで終わっていれば何でもいいです。
src/shims-vue.d.ts

これでエラー解消されました。
 

さらにvue-routerのように、型定義が不足していてエラーが発生する場合は自前で下記のように定義することが可能です。
mixinで自作したメソッドなんかもこのように定義できます。

 

ESLintの設定

まずtypescript用のパッケージをインストールします。

 

.eslintc.jsファイルのpluginsに@typescript-eslint'を追加し、parserを@typescript-eslint/parserに変更します。

 

package.json内のlintスクリプトを下記に変更します。

これで、ESLintの設定は完了です。
後は.eslintc.jsrulesにお好みの設定を追加してください。
 

ここからはtips的に開発していて必要になってくる内容を書いていきます。
 

コンポーネント内での型定義

コンポーネント内のdataに型を指定するときは下記の様にasを使用します。

ただ、これだとobjectのプロパティに全ての型が適合してしまい不十分なので、TypeScriptで型定義してあげましょう。

これでプロパティに型推論が効きます。
 

型定義を使いまわしたい場合は別ファイルに定義してexportしてあげればOKです
models/contents.ts

 

 

コンポーネントのpropsで、typeで指定できるネイティブコンストラクタObject,Array(TypeScriptの型ではなくvueの型推論機能) のTypeScript型定義を行いたい場合は、propTypeを使用します。

 

その他String等のネイティブコンストラクタを指定したプロパティを参照した時に下記のような型参照エラーが出た場合は、PropOptionsを使うことで解決できます。

 

 

jestの設定

todo
 

環境変数の扱い方

todo
 

-javascript, Nuxt.js, TypeScript, Vue.js, プログラミング, 開発ノウハウ
-, , , , ,

Copyright© , 2019 All Rights Reserved Powered by STINGER.