【公式準拠】Nuxt.js v2.8 系の TypeScript 導入手順 (express による API 実装も考慮)

H.KAMIYAMA
@alclimb

この記事は Nuxt v2.8 用です。
最新の Nuxt v2.9 系は以下の記事を参照してください。
https://westa.io/@alclimb/nuxt-v29-typescript


0. 想定する構成

SPA & SSR ... Nuxt.js(TypeScript)
REST API ... express(TypeScript)

1. 環境

ターミナル
> node -v v10.15.0 > npm -v 6.4.1
最終的な依存関係一覧
"dependencies": { "@nuxtjs/pwa": "^2.6.0", "cross-env": "^5.2.0", "express": "^4.17.1", "nuxt": "^2.8.1", "nuxt-property-decorator": "^2.3.0", "ts-node": "^8.3.0" }, "devDependencies": { "@nuxt/typescript": "^2.8.1", "nodemon": "^1.19.1" }

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

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

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

ターミナル
> npx create-nuxt-app sample1

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

プロジェクト生成時のパラメータは以下の様にほぼ初期状態を指定。
REST API も実装したいので3番目の Use a custom server frameworkexpress を指定。

ターミナル
? Project name > sample1 ? Project description > My delightful Nuxt.js project ? Use a custom server framework > express ? Choose features to install > Progressive Web App (PWA) Support ? Use a custom UI framework > none ? Use a custom test framework > none ? Choose rendering mode > Universal ? Author name > H.KAMIYAMA ? Choose a package manager > npm

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

ターミナル
> cd sample1

3. TypeScript 導入

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

ターミナル
> npm i -D @nuxt/typescript > npm i ts-node > npm i nuxt-property-decorator

nuxt-property-decorator は TypeScript(JavaScript) の class としてコンポーネントを実装するための nuxt 公式ライブラリ

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

nuxt.config.jsnuxt.config.ts に変更する。

(3) tsconfig.json 設定ファイルを作成

まずは、プロジェクトルートディレクトリに空の tsconfig.json を作成。
以下のコマンドで tsconfig.json の設定値が自動的に設定される。

ターミナル
> npm run build

生成された設定値の module 項目をコメントアウト。

tsconfig.json
{ "compilerOptions": { "target": "esnext", // "module": "esnext", // <==== コメントアウト、もしくは commonjs に変更 "moduleResolution": "node", ...

4. サーバー側の処理をTypeScript化

(1) package.json 設定ファイルを編集

package.json -> scripts 内の devstartを以下の様に編集

package.json
"dev": "cross-env NODE_ENV=development nodemon server/index.ts --watch server", "start": "cross-env NODE_ENV=production ts-node server/index.ts",

(2) server/index.js ファイルの編集

まずは server/index.jsserver/index.ts に変更する。

server/index.ts
import express from 'express'; // <==== require から import 文に変更 import consola from 'consola'; // <==== require から import 文に変更 import { Nuxt, Builder } from 'nuxt'; // <==== require から import 文に変更 const app = express() // Import and Set Nuxt.js options let config = require('../nuxt.config.ts') // <==== nuxt.config.js から nuxt.config.ts に変更 config.dev = !(process.env.NODE_ENV === 'production') async function start() { // Init Nuxt.js const nuxt = new Nuxt(config) const { host, port } = nuxt.options.server // Build only in dev mode if (config.dev) { const builder = new Builder(nuxt) await builder.build() } else { await nuxt.ready() } // Give nuxt middleware to express app.use(nuxt.render) // Listen the server app.listen(port, host) consola.ready({ message: `Server listening on http://${host}:${port}`, badge: true }) } start()

5. クライアント側の処理をTypeScript化

(1) pages/index.vue ファイルの編集

script 部分を以下の様に変更。

pages/index.vue
<script lang="ts"> import { Component, Vue } from "nuxt-property-decorator"; import Logo from '~/components/Logo.vue'; @Component({ components: { Logo } }) export default class extends Vue { } </script>

(2) components/Logo.vue ファイルの編集

script 部分を以下の様に変更。

components/Logo.vue
<script lang="ts"> import { Component, Vue } from "nuxt-property-decorator"; @Component({}) export default class extends Vue { } </script>

以上で完了(*'ω'*)/

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