TypeScript基础学习 vue-element-admin js版本项目中引入ts混用（4）

参考：
在vue-admin-element中植入TypeScript

1、安装typescript 、vue-property-decorator、vue-class-component、ts-loader

因为最新的ts-loader 9 不支持 webpack 4，所以安装低一点的版本

npm install typescript  vue-property-decorator  vue-class-component  @vue/cli-plugin-typescript @vue/eslint-config-typescript --save-dev
npm install ts-loader@8.2.0 --save-dev

2、配置vue.config.js

module.exports = {
 configureWebpack: {   
    resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },   
    module: {       
      rules: [   
        {   
          test: /\.tsx?$/,   
          loader: 'ts-loader',   
          exclude: /node_modules/,   
          options: {
            happyPackMode: true, // 打包相关，这个要加不然的打包会报错，坑死我了
            appendTsSuffixTo: [/\.vue$/],   
          }   
        }       
      ]   
    }   
  } 
}

3、新建tsconfig.json放在项目根目录

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

4、src目录下新建shims-vue.d.ts文件和shims-tsx.d.ts文件

shims-vue.d.ts是为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，
加这一段是是告诉 ts，vue 文件是这种类型的。
这一段删除，会发现 import 的所有 vue 类型的文件都会报错。

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

shims-tsx.d.ts 文件允许你使用.tsx文件，同时jsx在IDE中启用语法支持以编写JSX样式的 TypeScript代码。

import Vue, { VNode } from 'vue';

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

5、覆盖jest.config.js文件

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue',
    'ts',
    'tsx'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.tsx?$': 'ts-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  collectCoverage: true,
  collectCoverageFrom: [
    'src/utils/**/*.{ts,vue}',
    '!src/utils/auth.ts',
    '!src/utils/request.ts',
    'src/components/**/*.{ts,vue}'
  ],
  coverageDirectory: '<rootDir>/tests/unit/coverage',
  coverageReporters: [
    'lcov',
    'text-summary'
  ],
  testURL: 'http://localhost/',
  globals: {
    'ts-jest': {
      babelConfig: true
    }
  }
}

6、修改.eslintrc.js文件(添加对ts文件语法支持)

如果不用eslint可以不用加

extends: ['plugin:vue/recommended', 'eslint:recommended', '@vue/standard','@vue/typescript']

7、最后修改根目录下的main.js的文件后缀为main.ts

然后把

import App from './App'

改为

import App from './App.vue'

不然会识别不到vue文件，在ts文件中引入vue文件时必须加上**.vue**后缀

8、运行测试

<template>
    <div>
    <el-button type="primary" @click="msgBtn">{{msg}}</el-button>
    <el-card shadow="always">
      {{test}}
    </el-card>
    </div>
</template>

<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";

export default Vue.extend({
  components: {
    // TableCom
  },
  data() {
    return {
      msg:'typescript'
    };
  },
  created(){
    console.log('created',this.msg)
  },
  mounted() {
    console.log('mounted')
  },
  computed:{
    // test: {
    //   // 需要标注有 `this` 参与运算的返回值类型
    //   get(): string {
    //     return this.msg
    //   },
    //   set(val: string) {
    //     this.msg = val
    //   }
    // }
    test(): any {
      return this.msg
    }
  },
  watch:{
    msg(val:any){
      console.log('watch',val)
    }
  },
  methods:{
    msgBtn(ev:any){
      this.msg = "更改了typescript"
      console.log('点击事件',ev)
    }
  }
})

</script>

点击后