vue2.0(基于vue-cli3)引入ts

背景

vue3.0已经面世，但现有项目还是以2.0为主，本着熟悉和了解一下ts的目的，于是决定在现有的一个基于vue-cli3的vue2.0项目中引入ts试试水。在网上搜索了一下关于vue2.0引入ts的文章和教程，基本上大同小异，决定在此归纳总结一下。

小贴士：本文不涉及基于类的 Vue 组件即在.vue文件使用ts相关内容，因为我不会。。。(具体原因见最后总结部分)

引入方式一

1.安装依赖

1. @typescript-eslint/eslint-plugin
2. @typescript-eslint/parser
3. @vue/eslint-config-typescript
4. typescript
5. ts-loader

2.vue.config.js添加配置

  configureWebpack: config => {
   // 扩展文件类型
    config.resolve.extensions = [
      '.tsx',
      '.ts',
      '.mjs',
      '.js',
      '.jsx',
      '.vue',
      '.json',
      '.wasm'
    ]
    // 添加ts加载rules
    config.module.rules.push({
      test: /\.tsx?$/i,
      use: [{
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }],
      exclude: /node_modules/
    })
  }

3.添加ts配置文件tsconfig.json(与vue.config.js同级)

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noImplicitAny": false,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

4.添加ts模块声明文件xxx.d.ts（src目录下，文件后缀为“.d.ts”）

示例：shims-vue.d.ts（让ts能将 .vue 当成模块识别，同时ts通过import引入.vue文件时，文件需要加‘.vue’后缀）

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

5.配置eslint

.eslintrc.js

module.exports = {
  // 关键配置
   plugins: ['@typescript-eslint'], // 新增
   extends: [
    'plugin:vue/essential',
    '@vue/typescript' // 新增
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser', // 新增
  }
}

或者 package.json

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript"  //新增
    ],
    "parserOptions": {
      "parser": "@typescript-eslint/parser" // 新增
    },
    "rules": {}
  },

引入方式二

vue-cli3项目根目录下，执行命令vue add typescript，根据提示选择自己所需选项
我的选择：

注意点：执行完成后会默认生成一个helloword.vue的示例组件和重写app.vue,所以需要删除示例组件以及还原app.vue的内容

两种方式区别

依赖

两种方式新增的依赖基本相同，方式二中用@vue/cli-plugin-typescript代替了ts-loader
@vue/cli-plugin-typescript详情

mian.js

方式二默认将main.js重命名为main.ts，同时项目入口文件为main.ts

一些想法

虽然vue2.x官方文档提供了基于类的 Vue 组件相关方法，但个人感觉此类改动在实际项目中过于繁琐，得不偿失。所以vue2.0可以只针对现有项目中的js文件部分做引入，一方面完善代码 ，另一方面熟悉ts相关的知识。