已有vue项目引入ts

项目配置

安装依赖

• npm i vue-class-component vue-property-decorator —S

• npm i ts-loader typescript tslint tslint-loader tslint-config-standard -D

    vue-class-component：扩展vue支持typescript，将原有的vue语法通过声明的方式来支持ts
  
    vue-property-decorator：基于vue-class-component扩展更多装饰器
  
    ts-loader：让webpack能够识别ts文件
  
    tslint-loader：tslint用来约束文件编码
  
    tslint-config-standard：tslint 配置 standard风格的约束
  

初始化tsconfig

	tsc --init

{
  "compilerOptions": {
     // 编译输出目标 ES 版本
    "target": "es5",
    // 采用的模块系统
    "module": "ESNext",
    // 以严格模式解析
    "strict": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    // 启用装饰器
    "experimentalDecorators": true, // 
    // 如何处理模块
    "moduleResolution":"node"  ,
    // 给错误和消息设置样式，使用颜色和上下文。
    "pretty": true,
    "sourceMap":true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  // ts 排除的文件
  "exclude": ["node_modules"]
}

vue.config.js

webpack 配置

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

新建ts解析.vue

• shims-tsx.d.ts

   // shims-tsx.d.ts  src目录下
   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;
       }
     }
   }
  

• shims-vue.d.ts

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

  添加tslint.json

   {
  		    "extends": "tslint-config-standard",
  		    "globals": {
  		      "require": true
  		    }
   }
  

踩坑点

• 由于webpack和ts-loader版本不兼容，需要降低webapck或者ts-loader版本webpack 4.0
  使用ts-loader 8.2.0版本

• 已有项目引入ts，需要把main.js修改为main.ts（热更新的时候 ts页面找不到引入的文件）

• 类型上不存在属性

• form表单验证

  // Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'  
  // 上面的链接解决不了可以使用下面的方法
  
  const formValidate:any = this.$refs
  formValidate[name].validate(async (valid:boolean) => {
    if (valid) {}
  })
  

• 报错Could not find a declaration file for module xxx