详解Vue2.5+迁移至Typescript指南

{
 "compilerOptions": {
  "target": "esnext",
  "module": "esnext",
  "strict": true,
  "jsx": "preserve",
  "importHelpers": true,
  "moduleResolution": "node",
  "experimentalDecorators": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "sourceMap": true,
  "baseUrl": ".",
  "noFallthroughCasesInSwitch":true,
  "noImplicitAny":true,
  "noImplicitReturns":true,
  "noImplicitThis":true,
  "types": [
   "webpack-env"
  ],
  "paths": {
   "@/*": [
    "./app/common/*"
   ],
   "_app/*": [
    "./app/*"
   ],
   "_c/*": [
    "./app/common/components/*"
   ],
   "api/*": [
    "./app/service/*"
   ],
   "assets/*": [
    "./app/assets/*"
   ]
  },
  "lib": [
   "esnext",
   "dom",
   "dom.iterable",
   "scripthost"
  ],
 },
 "include": [   // 在此出填写你的项目中需要按照typescript编译的文件路径
  "app/**/*.ts",
  "app/**/*.tsx",
  "app/**/*.d.ts",
  "app/**/*.vue",
 ],
 "exclude": [
  "node_modules"
 ]
}

import Vue from 'vue';

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

//service.js
import axios from '@/libs/api.request'
export default {
  /**
   * 创建账户
   * @param {Object} data
   * @param {String} data.accountType optinal
   * @param {String} data.username
   * @param {String} data.password
   * @param {String} data.gender X | F | M
   * @param {String} data.email
   * @param {Number} data.level
   */

  createAccount(data) {
    return axios.request({
      url: `/api/account/createUser`,
      method: 'post',
      data: data
    }).then((res) => [res, null]).catch((err) => [null, err]);
  },
}

//service.d.ts
interface createAccountParams {
  accountType"htmlcode">

import Vue from 'vue';
import Service from "pathToService/service.d.ts";

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

declare module "vue/types/vue" {
 interface Vue {
  $service: Service
 }
}




得力于typescript中提供的模块补充功能，我们可以在node_modules/vue/types/vue中补充我们需要在Vue上提供的属性。
改写Vue文件


我们需要将原来的vue文件改写成使用vue-property-decorator编写的方式。


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

@Component
export default class MyComponent extends Vue{
  // 声明data
  form: {
    accountType"htmlcode">

export interface Vue {
 readonly $el: Element;
 readonly $options: ComponentOptions<Vue>;
 readonly $parent: Vue;
 readonly $root: Vue;
 readonly $children: Vue[];
 readonly $refs: { [key: string]: Vue | Element | Vue[] | Element[] };
 readonly $slots: { [key: string]: VNode[] | undefined };
 readonly $scopedSlots: { [key: string]: NormalizedScopedSlot | undefined };
 readonly $isServer: boolean;
 readonly $data: Record<string, any>;
 readonly $props: Record<string, any>;
 readonly $ssrContext: any;
 readonly $vnode: VNode;
 readonly $attrs: Record<string, string>;
 readonly $listeners: Record<string, Function | Function[]>;
}



只要正常的在依赖中安装了vue-router vuex就已经通过模块补充的方式将类型添加到了vue实例上。
在一些项目中，vue-router vuex这些依赖不是通过安装在依赖中引入的，而是通过index.html引入的cdn资源文件，这样在开发过程中我们就无法获取其类型。


这个时候我们可以通过安装@types依赖的方式将类型系统补充到项目中,如npm install @types/jquery --save-dev。


不幸的是vue-router和vuex的types包已经废弃了，只能通过手动去github上下载对应版本的vue-router vuex将types文件引入到项目中，你可以像我一样在项目中新建一个types目录，引入需要的类型声明文件。
这样就可以直接在vue实例上访问到$store $router等属性了。


同理当你想要引入其他的组件库上的一些类型文件时，也是这样的方式。
一些需要注意的问题


在vue开发过程中我们会使用this.$refs去访问某一个具体实例的方法，但是这在ts中是访问不到的常见的，比如要想要使用form组件中的validate方法，我们需要给其加上类型断言

this.$refs.form.validate()变为(this.$refs.form as Vue & {validate:Function}).validate()

来告诉编译器this.$refs.form上有validate方法。


因为类型断言前提条件是是当 S 类型是 T 类型的子集，或者 T 类型是 S 类型的子集时，S 能被成功断言成 T，所以需要在类型断言时合并Vue类型。
同时也可以通过vue-property-decorator提供给我们的装饰器一劳永逸的将该refs添加到computed属性上


import { Vue, Component, Ref } from 'vue-property-decorator'
import Form from '@/path/to/another-component.vue'
@Component
export default class YourComponent extends Vue {
 @Ref() readonly form!: Form
}



等同于


export default {
 computed() {
  form: {
   cache: false,
   get() {
    return this.$refs.form as Form
   }
  },
 }
}



这样我们就可以通过 this.form.validate()来做表单校验了
新手容易遇到的一些问题


疑问1：interface和type有什么区别？


type 可以声明基本类型别名，联合类型，元组等类型
eg.type a = string;是被允许的，
interface 会自动声明合并


interface person{
  gender:string
  age:number
}
interface person{
  name:string
}



疑问2: 错误 Property 'hideContent' has no initializer and is not definitely assigned in the constructor.


strictPropertyInitialization属性会在strict设置为true时自动被设置为true。


但这个属性并不合理，它要求每个实例的属性都有初始值，我们在tsconfig将其设置为false就好了。
疑问3: 赋值兼容性




interface person {
  name:string
  age:number
}
interface student {
  name:string
  age:number
  stuid:string
}
let person: person= {
  name:'name',
  age:1
}
let student: student = {
  name:'name',
  age:1,
  stuid:'stuid'
};

person = student //这样是可以的
student = person //这样不允许




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。