前置きNuxt.jsでTypeScriptを導入した環境を構築するのにかなり苦労したので同じことをしようと思う人と自分に向けてまとめておく。最終的なテンプレートはGitHubにあげていますのでご参考に。nuxt-appでNuxtプロジェクトを作る。構成は以下の画像のようにした。APIをいじいじするわけでもないのでAxiosも入れない。Universalアプリケーション作るわけでもないのでSPA。lintはかけたいのでeslintやprettierは今回のプロジェクトで導入した。devで動かしてみる。v2.3.4ではこのような画面が出たら成功。どちらともベースとなるもので事足りるのとそっちの方が機能が多いので別に導入しなくていいと思う。TypeScriptをビルドできるようにするTypeScriptをビルドできるようにWebpackの設定をいじってみる。モジュール*2という形でもWebpackの設定をいじることができる。ない場合は後者の方法を用いるのがいいでしょう。今回のような場合は後者の方法で実装したほうがよさそう。幸いにもNuxt2ではないがTypeScriptのテンプレートがあったのでそれを参考にNuxt2用に実装してみる。modules/typescript.jsとmodulesフォルダとjsファイルを作り以下のコードを記入する。.ts/.tsxをビルドできるようにts-loaderを追加する。})}次にモジュールを読み込めるようにnuxt.config.jsに以下を追記する。['~modules/typescript.js']tsconfig.jsonは以下のようにした。]}vscodeだと以下のようなファイルエラーが出ますが無視して構いません。(理由はよくわからないです...分かる人は教えてくれれば幸いです。コメントにてtsconfing.jsonのcompilerOptionsにoutdirかoutFileを指定するとエラーがなくなるようです。するかまたは存在しないデタラメなフォルダを指定すればいいようです。いう指摘をいただきました。確認はまだしていないのですがこれでそのvscodeのエラーは回避できるようです。VueでTypeScriptが使用できるように型宣言ファイルをtypes/index.d.tsのように作成して以下を記入する。Vue}TypeScriptを使用するpages/index.vueでTypeScriptを使用してみる。ソースは以下のようにした。devをしてビルドしてみよう。localhost:3000に接続してみて以下の画像のようになったら成功。これでTypeScriptの導入は終了した。TypeScriptにlintをかけるTypeScriptを導入したはいいけれども.ts/.tsxファイルや.vueファイル内のscript部分にはlintはかからない。そこでtslintやtypescript-eslint-parserを導入してlintをかけようと思う。今回はeslintを導入しているのとtslintとvueの相性が悪いのでtypescript-eslint-parserを使ってlintをかける。必要となるパッケージを追加する。}]これでTypeScriptにlintがかかるようになった。nuxt-appでeslintとprettierを導入して初期の状態でビルドするとエラーを吐いて導入できなかったのがあった。原因は.vueファイル内のscriptの言語がTypeScriptだと初期のeslintのパーサであるbabel-eslintで解析してしまうためそれを回避するために記事中に書いたTypeScriptにlintをかけるような方法を取らなければいけなかった。エラーを吐かずにすんなりビルドを通した。今までの苦労はなんだったんだろう...。今後のこと家具作った月別アーカイブはてなブログをはじめよう!KashEightさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。