vue项目中，不修改之前的文件引入ts

前言

我们项目中，可能回想着将typescript引入进来，但是又苦于项目过于繁杂，不能够简单的全部文件都修改成ts文件，那么这个时候能不能在新加入的vue文件引入ts相关的语法，而不需要修改其它的文件呢？
答案是肯定的。以下是vue-cli3的修改操作。

安装依赖

首先必须要安装typescript 和 相应的loader 转换器 ts-loader，我们把它们先下载安装到当前项目：

npm install typescript ts-loader --save-dev

接着我们需要在vue项目中不仅仅把script的lang改成“ts”方式，我们在项目启动的时候，也要用修饰器运作，vue组件给我们提供了这样的修饰器，vue-property-decorator，我们进行下载安装：

npm install vue-property-decorator --save-dev

这个时候，我们在package.json 文件就可以找到下载的三个文件在依赖devDependencies中

配置vue.config.js

我们接下来需要在vue.config.js中配置一下，这个是为了让项目能够识别ts文件和vue文件中进行loader的转换，如下：

module.exports = {
 configureWebpack: {    
    resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },    
    module: {        
      rules: [    
        {    
          test: /\.tsx?$/,    
          loader: 'ts-loader',    
          exclude: /node_modules/,    
          options: {
            appendTsSuffixTo: [/\.vue$/],    
          }    
        }        
      ]    
    }    
  }  
}  

主要的文件说明配置

// tsconfig.json
{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据 property 进行更严格的推断
    "strict": true,
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

把这个文件放在根目录，跟package.json文件同根，这是告诉项目，所写的ts文件需要遵循什么样的语法和规则。

在src目录下新建vue-shim.d.ts文件

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

最后测试

<template>
	<div>
    <div @click="msgBtn">
      {{test}}
    </div>
	</div>
</template>
<script lang='ts'>
import doit from "./test"
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('doit', doit)
    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>

发觉可以看见页面中显示的内容typescript，如下：

完成混入式的ts添加。

参考文件： https://cn.vuejs.org/v2/guide/typescript.html
https://www.cnblogs.com/zhongchao666/p/11207117.html
https://blog.csdn.net/qq_41860203/article/details/110912759