
今回は、



という悩みを解決すべく、Nuxt.jsにTypeScript環境を構築する方法を、6STEPで解説していきます。
この記事で理解できること



Nuxt.jsとは?
Nuxt.jsがそもそも何かわからない方は、こちらの記事で詳しく解説しています。
5分くらいこの記事を眺めてから、戻ってきてください。


TypeScriptとは?
TypeScriptとは、一言でいうと「JavaScriptに強い型付けを導入した言語」です。
JavaScriptの性質も多く受け継いでいますが、自分自身触っていく中で一番インパクトを受けたのはこれでした。
分からない方にすこし解説すると、まずJavaScriptは動的型付け言語です。
つまり作った変数に数字を入れても、文字列を入れても問題ないです。
しかし大規模なプロジェクトになって、ほかの方が書いたコードを触るとき、この変数が厳密に何を指しているのか分かりません。
そういった場合にはあらかじめ変数を作るときに、厳密に決めてしまった方があとから書き直しやすいです。
つまり「なんでも入れていいですよー」な変数より、「これしか入れてはいけません」な方が、大規模なプロジェクトには向いているということですね。
自分はTypeScriptを使った大規模なプロジェクトに入ったことはありません。
でも実際に、大規模でもなく多人数でもない、個人開発でもその恩恵ははっきり分かりますよ。
だって1週間前に書いたコードなんて自分でも忘れてますもの。



Nuxt.jsにTypeScriptの環境構築をしてみよう!
6STEPで完了します。
【STEP2】TypeScriptを導入しよう!
【STEP3】nuxt.config.jsファイルに登録しよう!
【STEP4】tsconfig.jsonを作成しよう!
【STEP5】vue-shim.d.tsを作成しよう!
【STEP6】package.jsonをアップデートしよう!
【STEP1】Nuxtプロジェクトを作成しよう!
まずNuxtプロジェクトを作っていきましょう。
<プロジェクト名>はなんでも大丈夫です。
npm init nuxt-app <プロジェクト名>
設定は、すべてデフォルトで大丈夫です。
【STEP2】TypeScriptを導入しよう!
Nuxt.jsのTypeScriptサポートは3つのパッケージからなっています。
これらをインストールしましょう。
npm install --save-dev @nuxt/typescript-build @nuxt/types
npm install --save @nuxt/typescript-runtime
【STEP3】nuxt.config.jsファイルに登録しよう!
インストールできたら、nuxt.config.jsファイルのbuiildModulesセクションに、モジュールを登録しましょう。
buildModules: ['@nuxt/typescript-build']
【STEP4】tsconfig.jsonを作成しよう!
TypeScriptの設定ファイルtsconfig.jsonを、ルートディレクトリに新規作成し、編集しましょう。
{
"compilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@types/node",
"@nuxt/types"
]
},
"exclude": [
"node_modules"
]
}
【STEP5】vue-shim.d.tsを作成しよう!
vue-shim.d.tsファイルをルートディレクトリ、もしくはtypesディレクトリに新規作成して、編集しましょう。
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
vue-shim.d.tsファイルは、TypeScriptでコンポーネントを作るときに必要なファイルです。
初めて見る形式のファイルで戸惑いますね。。。
【STEP6】package.jsonをアップデートしよう!
最後に、package.jsonのscriptsセクションにある、”dev”, “build”, “start”, “generate”をすべて、
としてください。
これでNuxt.jsでのTypeScript環境の構築が完了しました。
確認のために
npm run dev
でローカルサーバーを立ち上げてみます。
ブラウザで確認すると、しっかり動作していますね。



まとめ:TypeScriptで実際にコーディングしてみよう!










コメント