背景

由于项目性质，前端Model管理一直是一个痛点，最近因为支付业务前端传参问题导致支付失败（原因是后端参数校验为字符串，前端不同的逻辑代码会有传数字和字符串两种情况导致接口报错用户无法完成支付流程）。所以引入Ts变得非常重要起来。

项目是基于Nuxt.js搭建的，本文将记录Nuxt.js如何引入Ts。

官方示例

Nuxt.js引入Ts官方已经给出示例，我们要做的是根据官方示例来完成Ts引入 示例入口

依赖

先安装支持ts对应的三个依赖,由于nuxt.js的版本为2.13.0，所以 @nuxt/types也可以装2.13.0

npm install --save-dev @nuxt/typescript-build @nuxt/types@2.13.0

警告

只有nuxt.js大于等于2.10才支持 @nuxt/types从2.13.0开始才保持与nuxt.js版本一致

配置

需要将 @nuxt/typescript-build 加入到nuxt.config.js中的buildModules中

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

并且创建一个tsconfig.json文件

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

还需要创建一个vue-shim.d.ts文件来声明Vue文件提供的类型

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

安装一下 @nuxt/typescript-runtime，它在生产环境中需要

npm i @nuxt/typescript-runtime

如果您正在使用ESlint，则需要安装 @nuxtjs/eslint-config-typescript

npm i -D @nuxtjs/eslint-config-typescript

然后通过编辑.eslintrc.js开扩展ESlint配置

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

编辑package.json

"lint": "eslint --ext .ts,.js,.vue ."

问题

安装完以上步骤后，构建项目时报了一些postcss的错误，但是目前暂时没有时间鼓捣postcss，所以在构建期间排除postcss。在nuxt.config.js中加入

...
...
...
    build:{
        postcss:null,
    }
...
...
...