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を使用する。
さらに、以下公式を参考にセットアップしてください。