素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【Nuxt.js】プロジェクトに後から自前でTypeScriptを導入する方法【yarnでサクッと簡単】

投稿日: 2019年6月17日
最終更新日:

スポンサーリンク

336×280




TypeScriptを導入しよう

Nuxt.jsを使ってアプリケーションを開発する際、TypeScriptを使った静的型付けを行うのが当たり前になってきています。

JavaScript that scales.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Any browser. Any host. Any OS. Open source.

TypeScript – JavaScript that scales.

もちろん、Nuxt.jsはTypeScriptの導入についても手厚くサポートしています。

静的型付けは、とりわけアプリケーションが大きく成長したするにつれて、多くの潜在的なランタイムエラーを防ぐのに役立ちます。

それこそが Nuxt の新しい @nuxt/typescript パッケージがビルトインで TypeScript ツールをサポートする理由です:TypeScript サポート – Nuxt.js

今回も自前でTypeScriptを導入してみましたので、手順をご紹介致します。

手順

前提

Typescriptを導入した際に、lint周りで以下のようなエラーログが出るようになりました。

ちょっと調べてみましたが、いまいち原因が分からなかったので、一旦ビルド時のlint関連を無効にする事で動作確認をとっています。orz

Failed to load plugin @typescript-eslint: Cannot find module ‘eslint-plugin-@typescript-eslint’webpack – Failed to load plugin @typescript-eslint: Cannot find module ‘eslint-plugin-@typescript-eslint’ – Stack Overflow

Nuxt.jsにlintを入れるところは改めて作業をして記事にまとめようと思っています。

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

まずは関連するモジュールをインストールしていきましょう。

@nuxt/typescript

Nuxt.jsの公式TypeScript用のモジュールをインストールします。

ts-node

次に、ts-nodeをインストールします。

こちらは、typescriptのコードをコンパイルする事なく直接node上で実行してくれるものです。
自分でコンパイルする必要が無くなるのはデカイですね。

vue-property-decorator

次は、vue-property-decoratorです。

こちらはVueの記述をデコレーターを使って記述できるようにしてくれるものです

ファイルのTypeScript対応

では、次に既存のファイルをTypeScript化していきましょう。

nuxt.config.js

nuxt.config.jsnuxt.config.tsとリネームしましょう。
ファイルの中身はそのままで問題ありません。

tsconfig.json

次にtouch tsconfig.jsonでファイルを作成しましょう。
こちらのファイルの内容は起動時に自動で記述されるので空の状態で問題ありません。

pages/index.js

次に、index.jsindex.tsにリネームした上で内容を変えていきましょう。

pages/index.vue

次にpages/index.vueを修正しましょう。

確認

これでTypeScript化の準備は出来たので、実際に確認してみましょう。

起動ログに、TypeScript support is enabledが追加され、No type errors foundが出力されたので正常に起動しましたね♪

記述エラー時

試しに以下のようなエラーが発生する状態(String型の変数に数値を代入)にソースを変えると、、、

期待通りチェックしてくれるようになりましたね♪

tsconfig.jsonの内容

tsconfig.jsonは以下のような記述が生成されています。

本日のおすすめ商品

終わりに

以上のように、Nuxt.jsのTypeScript化についても依存関係を追加することで簡単に実現することが出来ました。

JavaScriptを使ったフロントエンドの開発においては、TypeScriptはほぼマストの技術となっていますので、是非試してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , ,

blogenist

Author: blogenist