【公式準拠】Nuxt.js v2.10 系の TypeScript 導入手順

H.KAMIYAMA
@alclimb

全体の流れとしては、通常の js 版 Nuxt のプロジェクトを生成したのちに、プロジェクトを TypeScript 化します。

1. 環境

shell
> node -v v10.16.3 > npm -v 6.9.0
最終的な依存関係一覧
"dependencies": { "nuxt": "^2.10.2" }, "devDependencies": { "@nuxt/typescript-build": "^0.3.4" }

2. Nuxt.js のプロジェクトを生成

まずは Nuxt 公式ガイド (https://ja.nuxtjs.org/guide/installation ) を参考に JavaScript 用のプロジェクトを生成する。

(1) npx create-nuxt-appコマンドでプロジェクトを作成

公式に記載がある通り以下のコマンドでプロジェクトを作成。

shell
> npx create-nuxt-app sample1

(2) プロジェクトのパラメータ指定

プロジェクト生成時のパラメータは以下の様にほぼ初期状態を指定。

shell
create-nuxt-app v2.11.1 ✨ Generating Nuxt.js project in sample1 ? Project name > sample1 ? Project description > My ultimate Nuxt.js project ? Author name > H.KAMIYAMA ? Choose the package manager > Npm ? Choose UI framework > None ? Choose custom server framework > None (Recommended) ? Choose Nuxt.js modules > None ? Choose linting tools > None ? Choose test framework > None ? Choose rendering mode > Universal (SSR) ? Choose development tools > jsconfig.json (Recommended for VS Code)

(3) カレントディレクトリを移動

shell
> cd sample1

3. TypeScript 導入

Nuxt TypeScript 公式ガイド (https://typescript.nuxtjs.org/guide/setup.html ) を参考に Nuxt.js プロジェクトを TypeScript 化する。

(1) nuxt の TypeScript 化に必要な関連ライブラリをインストール

shell
> npm install --save-dev @nuxt/typescript-build

(2) nuxt.config.js 設定ファイルを編集

nuxt.config.jsbuildModules@nuxt/typescript-build を追加する必要があります。

nuxt.config.js
export default { buildModules: ['@nuxt/typescript-build'] }

(3) tsconfig.json ファイルを追加

tsconfig.json ファイルを追加。

tsconfig.json
{ "compilerOptions": { "target": "esnext", "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" ] }

@nuxt/typescript-build には @nuxt/types が付属しているため、個別にインストールする必要はありません。

プロジェクトに jsconfig.json ファイルがあれば削除しても問題ありません。

これで、レイアウト、コンポーネント、プラグイン、ミドルウェアで TypeScript を使用するように設定されました。


最後に確認のために以下のコマンドでデバッグ実行して http://localhost:3000 にて動作が確認できれば完了です。

shell
> npm run dev
WRITER
H.KAMIYAMA
@alclimb
SERIES
この記事に連載はありません。
READ NEXT
COMMENTS
コメント機能は開発中です。実装完了まで今しばらくお待ちください。