@vue/cli typescript插件使用指南

步骤

使用 yarn add 安装 @vue/cli-service 对应版本的 @vue/cli-plugin-typescript
- 例如:"@vue/cli-service": "~4.5.0" 使用 yarn add -D @vue/cli-plugin-typescript@^4 安装
使用 vue invoke typescript 运行插件
插件提供的配置项
- Use class-style component syntax?
  - 是否使用类组件
  - 类组件是通过 typescript 提供的装饰器实现了通过写一个类来写 vue 组件的方法，对 typescript 有更好的支持。
  - 但是官方配套的库并不能完美解决 typescript 的支持，需要 vue-tsx-support 提供额外支持
  - 新项目建议不选择，直接使用 composition API，虽然它也需要 vue-tsx-support 提供支持，但是这种代码组织方式更解耦
- Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
  - 是否在 typescript 编译后使用 babel
  - typescript 具备转换 ts 到指定某 es 版本的能力，但是不具备 babel 提供的其他转换代码的能力。
  - 例如：typescript 虽然能够把 jsx 转换为 javascript，但是转换的结果不能满足 vue 的要求，依然需要 babel 进行二次转换
  - 建议开启
- Convert all .js files to .ts?
  - 是否转换所有的 js 为 ts 文件，建议选择否。对于旧项目而言，这种操作会导致大量的 ts 文件类型报错
- Allow .js files to be compiled?
  - 是否允许编译 js，让 ts 编译 js 文件
- Skip type checking of all declaration files (recommended for apps)?
  - 跳过所有类型文件的检查，因为类型文件通常是外部库提供的，检查这些类型文件将会降低编译速度
运行插件后续钩子
- typescript 插件会根据当前项目插件安装情况修改文件
  - 当前项目同时安装了 eslint 插件的话，会修改 .eslintrc.js 文件
  - 会修改 main.js 为 main.ts
  - 会增加 shims-tsx.d.ts 和 shims-vue.d.ts 等文件，详情见下文的文件解析
- 如果项目中已经安装了 eslint 插件，由于增加了对 typescript 的格式检查支持，eslint 的钩子会被调用
  - 建议在格式化之前暂存文件，然后恢复被格式化的文件

其他配套操作

别名

使用 tsconfig-paths-webpack-plugin，把 tsconfig.json 中配置的别名同步到 webpack 中

// vue.config.js
{
  chainWebpack: (config) => {
    config.resolve
      .plugin("tsconfig-paths")
      .use(require("tsconfig-paths-webpack-plugin"));
  },
}

jsx

3.0 比较不一样

module.exports = {
  presets: [
    '@vue/app'
  ]
}

4.0、5.0 由 @vue/cli-plugin-babel 提供支持
- 默认使用 Babel 7 + babel-loader + @vue/babel-preset-app
- @vue/babel-preset-app 由以下库对 Vue JSX 语法提供支持
  - @babel/plugin-syntax-jsx 支持 babel 解析 jsx 语法
  - @vue/babel-preset-jsx 提供了 jsx 支持的语法，但由于 Babel 7的 bug，并非所有功能都支持
    - 配置
      - compositionAPI 在 setup 中返回渲染函数需要单独打开，下面代码中提供了配置方法
    - 异常
      - vOn: 暂时未能使用
      - vModel 当自定义组件具有 model 属性时会出现错误，例如：el-form
    - 组成库
      - @vue/babel-sugar-composition-api-inject-h、@vue/babel-sugar-composition-api-render-instance 支持 compositionApi 在 setup 方法中返回渲染函数
        
        compositionApi 函数式组件const Test = (props, { refs, emit, ... }) => { return () => Hello World! ; }
      - @vue/babel-sugar-functional-vue 支持函数式组件及以函数的方式写简易组件
        
        函数式组件export const A = ({ props, listeners, children, data, ... }) => {props.msg}
        
        以函数的方式写简易组件，变量名不同export const b = ({ props, listeners }) => {props.msg}
      - @vue/babel-sugar-inject-h 给 jsx 函数自动注入 h 函数
      - @vue/babel-sugar-v-model 支持 vModel 语法
      - @vue/babel-sugar-v-on 支持 vOn 语法
      - @vue/babel-plugin-transform-vue-jsx 支持其他的一些语法，包括domPropsInnerHTML等
      - @vue/babel-helper-vue-jsx-merge-props

module.exports = {
  presets: [
    [
      "@vue/cli-plugin-babel/preset",
      {
        jsx: {
          compositionAPI: true,
        },
      },
    ],
  ],
};

composition-api

安装并引用 composition-api，一种 vue 官方提供的，更好代码组织方式，支持 ts，支持 vue2。
部分文档
- getCurrentInstance 获取当前组件实例，用来代替 this

ts支持现状

内置元素
- .vue 文件
  - .vue 文件中 vscode 1.66.2 和 vetur 0.35 支持内置元素属性的输入提醒，但是输入错误没有报错
- jsx 模式
  - jsx 中需要使用 vue-tsx-support 外部库支持
自定义元素
- prop
  - .vue
    - .vue 文件 vetur 0.35 支持提醒，但不支持类型检查
    - vetur 0.35 提供 vetur.experimental.templateInterpolationService 测试功能，用于为 template 中的绑定之获取 js 特性和类型。需要配合

@vue/cli typescript插件使用指南

步骤

其他配套操作

别名

jsx

Hello World!

composition-api

ts支持现状