Nuxt + TypeScriptでセットアップを行います。

ディレクトリ構造はsrc/に主要なファイル群を配置しています。

導入

$ yarn add --dev @nuxt/typescript-build @nuxt/types @nuxt/typescript-runtime

nuxt.config.ts 内の buildModules に @nuxt/typescript-build を追加します。

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

Vueファイルの型を提供

Vue ファイルの型を提供するために以下ファイルを作成してください。

src/types/shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue'

  export default Vue
}

tsconfig.jsonを設定

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "noUnusedParameters": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "allowJs": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": "./src",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "typeRoots": ["/src/types"],
    "types": [
      "@types/node",
      "@types/webpack",
      "@nuxt/types",
      "@nuxt/vue-app",
      "@nuxtjs/axios"
    ]
  },
  "strict": false,
  "include": [
    "src/**/*.ts",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
}

Lint

$ yarn add -D @nuxtjs/eslint-config-typescript

.eslintrc.jsに設定を追加

module.exports = {
  extends: [
    '@nuxtjs/eslint-config-typescript'
  ]
}

Vuexを使用する場合

Vuexを使用する場合は、vuex-module-decoratorsを使用する。

Vuex で TypeScript を使用する

さらに、以下公式を参考にセットアップしてください。

Nuxt TypeScript ストア クラス