Nuxt.js+Express.jsにTypeScriptを導入してみた

Nuxt.jsがTypeScriptのサポートを開始！

これは導入しないてはないと思い、導入を決意

ソース

主な環境

• Nuxt.js v2.8.1
• @nuxt/typescript v2.8.1
• Express.js v4.17.1
• ts-node v8.2.0
• nodemon v1.19.1

通常どおり

コマンドラインでプロジェクトの立上げ

yarn create nuxt-app nuxt-express-ts

expressを選択してインストールをします。

TypeScriptの導入

Nuxt Typescript サポート

こちらの通り、下記をインストールしていきます。

yarn add -D @nuxt/typescript
yarn add ts-node

package.jsonも最新に修正していきます。
この時に起動スクリプトもtsに指定してあげます。

package.json

{
  "name": "nuxt-express-ts",
  "version": "1.0.0",
  "description": "My pioneering Nuxt.js project",
  "author": "sauzar18",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "yarn run lint",
    "dev": "cross-env NODE_ENV=development nodemon server/index.ts --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.ts",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.5.4",
    "@nuxtjs/pwa": "^2.6.0",
    "cross-env": "^5.2.0",
    "express": "^4.17.1",
    "nuxt": "^2.8.1",
    "ts-node": "^8.2.0"
  },
  "devDependencies": {
    "@nuxt/typescript": "^2.8.1",
    "@nuxtjs/eslint-config": "^0.0.1",
    "@nuxtjs/eslint-module": "^0.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-config-standard": ">=12.0.0",
    "eslint-plugin-import": ">=2.17.3",
    "eslint-plugin-jest": ">=22.6.4",
    "eslint-plugin-node": ">=9.1.0",
    "eslint-plugin-nuxt": ">=0.4.3",
    "eslint-plugin-promise": ">=4.1.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "nodemon": "^1.19.1"
  }
}

設定ファイル（nuxt.config）を編集

まずはnuxt.config.jsからnuxt.config.tsへ変更

nuxt.config.ts

import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/eslint-module',
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}
export default config

こちらに書き換えます。

その後tsconfig.jsonの空ファイルをルートディレクトリに作成

下記を実行するとtsconfig.jsonが自動的に設定される

yarn nuxt

このコマンドはtsconfigが生成されたら、起動をとめていいです。

起動ファイルのts化

server/index.jsからserver/index.tsへ変更します。

その後importに書き換えをしてあげます。

server/index.ts

import express from 'express'
import consola from 'consola'
import { Nuxt, Builder } from 'nuxt'
const app = express()

// Import and Set Nuxt.js options
import config from '../nuxt.config'
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()

起動ファイルを書き換えたら、ES6以降を使用するために、tsconfig.jsonを修正します。

moduleをコメントアウトにします。

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    // "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ]
  }
}

これで準備ができました。

yarn run dev

起動すると、tsとExpressがうまく動いてくれるはずです。

以前はbackpack.jsを利用していたのですが、nuxt.config.tsがうまく読み込まれない問題がありました。
これに関しては解決方法が見つからなかったので、知っている人いたら教えてください。

解決できました。
下記記事でbackpackの設定方法を記載しております。
Nuxt.js+Express.jsにTypeScriptを導入してみた(backpack.js編)

まとめ

NuxtのTypeScriptのサポートがはじまり、書き換えをし始めてExpressとの連携部分に苦戦したので、今回解決方法が見つけられて良かったです。