Nuxt + Typescript最佳实践1：支持TypeScript

最近项目用了nuxt，又想用typescript，于是摸索了很久有了这篇文章

说明：最新版的脚手架已经支持创建TypeScript项目了，直接命令行创建接口

nuxt官方有typescript的教程:https://typescript.nuxtjs.org/。

我们需要安装三个依赖包：

• @nuxt/types
  包含 Nuxt 的 TypeScript 的一些类型定义。
  这个包已经在 @nuxt/typescript-build 以及 @nuxt/typescript-runtime 引入了，如果已引入上面两个包，无需再显式的引入了。
• @nuxt/typescript-build
  能让 Nuxt 在 layouts, components, plugins 和 middlewares 中使用 TypeScript。
• @nuxt/typescript-runtime
  暂时不需要，先不做介绍

警告
这些包只支持 Nuxt 2.10 or 更高版本.

安装

官方推荐yarn安装，实际上我在windows上用npm安装是有问题的

yarn add --dev @nuxt/typescript-build

然后在nuxt.config.js中的 buildModules 中加入 @nuxt/typescript-build

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

然后在根目录创建一个tsconfig.json的文件，这个是typescript的配置，内容可以如下：

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom",
      "dom.iterable" //这里是新增项
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

为了使用typescript的最新语法，我们将target字段设置成了 es2020,
为了使用装饰器将experimentalDecorators设置成了true

为了能让typscript识别vue文件你也需要在根目录加入vue-shim.d.ts文件

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

然后将package.json里面的scripts命令改一下

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .ts,.vue ."
  },

最后将我们的文件除了(server/index.js和nuxt.config.js)都改成.ts类型

执行命令

yarn dev

就可以在本地启动啦！