Vue.js

Nuxt.js 2.4のTypeScript導入手順

投稿日:

Nuxt.jsが2.4にバージョンアップしてTypeScriptを公式にサポートしたので、NuxtでTypeScriptを使用する際の環境構築を書いていきます。

作業手順

まずはTypeScriptを導入するにあたり、全体の作業の流れを確認していきます。
以下の通りです。

  1. プロジェクト作成
  2. 必要なパッケージの導入
  3. 不要なパッケージの削除
  4. scriptsのコマンド修正
  5. パッケージ再インストール
  6. テスト起動(tsconfig.json作成)
  7. tslint.json作成
  8. nuxt.config.jsのTypeScript化
  9. index.d.ts(型定義ファイル)の作成
  10. vueファイルのTypeScript化

「nuxt-ts」がいろいろやってくれているおかげで、以前のようにwebpackを頑張って書いたりなどしなくても大丈夫になりました。

実際にTypeScriptをNuxtへ導入する

では実際にTypeScriptをNuxtのプロジェクトへ導入をしていきましょう。
基本的には、NuxtのGithubのTypeScriptのexampleを参考(https://github.com/nuxt/nuxt.js/tree/dev/examples/typescript)に作成しています。

プロジェクト作成

まずはプロジェクトを作成します。
すでにプロジェクトがある場合は「必要なパッケージ導入」から作業をすれば問題ないはずです。
「create-nuxt-app」を使用して作成していきます。

npx create-nuxt-app <プロジェクト名>

今回は、プロジェクト名「nuxt-typescript」で作成しました。
いくつか質問されるので、答えていけばプロジェクトが作成されます。
※今回はテストやデザインフレームワークは必要ないので全て「none」で作成しています。

必要なパッケージの導入

TypeScriptを使用するにあたり必要なパッケージは以下です。

  • nuxt-ts
  • vue-property-decorator
  • @types/webpack
  • tslint-config-standard

これらをインストールしていきます。
プロジェクトフォルダに移動して以下のコマンドを実行します。

npm install nuxt-ts vue-property-decorator @types/webpack --save
npm install tslint-config-standard --save-dev

不要なパッケージの削除

「nuxt-ts」を導入したことにより不要となるパッケージを削除します。
「package.json」の中から、「nuxt」と「nodemon」を削除しましょう。

scriptsのコマンド修正

「package.json」のscriptコマンドも変更する必要があるので以下のように変更します。

  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint": "tslint --project"
  },

このコマンドはNuxtのTypeScriptのexampleのまんまです。

パッケージ再インストール

「package.json」を変更したので、「node_modules」フォルダを削除して、以下のコマンドを実行します。

npm install

テスト起動(tsconfig.json作成)

以下のコマンドを実行し、テスト起動します。

npm run dev

このコマンドを叩くと「tsconfig.json」がないので作成するかと聞かれるので「yes」で作成します。
作成された「tsconfig.json」を編集します。
「compilerOptions」の中に「"experimentalDecorators": true,」を追記します。

{
  "extends": "@nuxt/typescript",
  "compilerOptions": {
    "baseUrl": ".",
    "experimentalDecorators": true,
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ]
  }
}

tslint.json作成

「tslint.json」がないので、プロジェクトフォルダ直下に「tslint.json」を作成します。

{
  "defaultSeverity": "error",
  "extends": [
    "tslint-config-standard"
  ],
  "rules": {
    "prefer-const": true
  }
}

nuxt.config.jsのTypeScript化

「nuxt.config.js」を「nuxt.config.ts」に変更します。
そして、ファイル内容を変更します。
変更箇所は、「build」の内容をTypeScriptへ変更します(54〜58行目)。
それに伴い、そこで使用する型をimportします(1、2行目)。

import { Configuration } from 'webpack'
import { Context } from '@nuxt/vue-app'

const pkg = require('./package')

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.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: [
  ],

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config: Configuration, { isClient, isDev }: Context) {
      if (isClient && isDev) {
        config.devtool = 'source-map'
      }
    }
  }
}

index.d.ts(型定義ファイル)作成

プロジェクト直下にvue様に型定義ファイルを作成します。

declare module "*.vue" {
  import Vue from "vue"
  export default Vue
}

vueファイルのTypeScript化

「script」に「lang="ts"」を追記します。
中身はTypeScriptへ変更します。

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Logo from '~/components/Logo.vue'

@Component({
  components: {
    Logo
  }
})
export default class Home extends Vue {}
</script>

以上で、Nuxt.jsでTypeScriptを使用することができる様になります。

-Vue.js
-

Copyright© freamap ブログ , 2020 All Rights Reserved.