TypeScript 在Vue中的实践

基础总结
数据类型

boolean 、number、string、null、 undefined、 Symbol
undefined 和null 类型的数据只能被赋值undefined 和null， 但是这个类型是所有类型的子类型
void 空类型
    // undefined和null是所有类型子类型，都可以赋值
    let num: Symbol = undefined;ss
    let num: number = undefined;
    // undefined类型， 只能给undefined
    let u: undefined = undefined; 
    let n: null = null;

any和类型推断

// 在ts中，变量在声明的时候，如果没有定义其类型，会被识成默认类型 
   let str;
   str = 'I am strgting';
   str = 1024;
   // 未定义类型，直接赋值
   let num= 124; 
   // 等同于 let num:number = 124, 在后面代码如果赋予num一个string会被报错
   

多个可能属性

  //只能访问可能属性的共有属性
    function getLength(param: string| number) {
        return param.length;
    }
    // 会报错， 因为 length不是 sting和number类型的共有属性
    // 技巧--》 使用类型别名
    type possibleType = string | number;
    function getLength(param: possibleType) {
        return param.length;
    }

接口的概念
在ts中，interface包括对行为的抽象，由类去实现（implements）
也包括对对象轮廓的描述
对象interface -》动态属性
必选参数和可选参数的类型是动态属性类型的子集，所有在动态属性类型设置的时候要设置上所有类型

   interface userinfo {
    "memberId": number,
    "uName": string,
    "employeeId": string,
    "datetime": string,
    "platformList"?: Array<platform>,
    [propName: string]: string | number | Array<platform> | undefined
  }

只读属性的约束力
注意点： 只读属性的约束力在于第一次给对象赋值的时候，而不是给属性赋值的时候 readonly和 const的区别： const是变量， readonly是属性

接口-》抽象方法的实现

export interface ISRequest {
fetch(url: string, arg?: Object, callback?: Function): Promise;
}

export class SafeRequest implements ISRequest {
public async fetch(url: string, arg, callback?: Function): Promise {
return new Promise((resolve, reject) => {

    })

}

用接口表示数组

 interface NumberArray {
        [index: any]: number
    }
    let numArr: NumberArray = [1, 2, 3]

函数的类型
可选参数, 必须在必选参数后面
参数默认值

function buildName(firstName: string, lastName?: string) {

}

添加默认值的参数识别为可选参数
剩余参数
类型断言
// <类型>值
// 值 as 类型
复制代码
疑惑–》 声明文件
当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。

声明文件在哪里？
与npm包绑定在一起
npm包的维护者并没有提供声明文件， 只能由其他人将声明文件发布到@types里面
自己写个声明文件
npm包的声明文件 和全局变量的声明文件
在 npm 包的声明文件中，使用 declare 不再会声明一个全局变量，而只会在当前文件中声明一个局部变量。只有在声明文件中使用 export 导出，然后在使用方 import 导入后，才会应用到这些类型声明。 ######declare global 使用 declare global 可以在 npm 包或者 UMD 库中扩展全局变量的类型

内置对象
内置对象查询–》点击
ESMAScript提供了Boolean、Error、Date、RegExp

interface obj = {
param: Function
param: Promise
}

枚举–》 数据的双向映射

enum companyList= {1: ‘aaa’, 2: ‘bbb’}
var companyList = {
1: ‘aaa’,
2: ‘bbb’,
aaa: 1,
bbb: 2
}

Vue in Typescript
三大利器
vue-component-class
方法可以直接声明为类成员方法。
可以将计算属性声明为类属性访问器。
默认data被当作类属性
data ， render 和vue的生命周期的钩子直接是类成员的方法，保留这些命名，不要冲突
对于其他的配置项，例如prop、componets等传递给装饰器函数

import Vue from ‘vue’;
import Component from ‘vue-componet-class’;
Component.resgisterHooks([
‘beforeRouteEnter’
])
@Componnet({
props: {

},
components: {
    
}

})
export default class App extends Vue {
// aa = ‘’;
// 类型推断aa是个string， 后面aa只能赋值aa类型
// 所以最好使用先声明后

//  data

public tableModelItems: Array;
constructor() {
super();
this.tableModelItems = [];
}
// computed
public get filterTableData() {
return this.tableData.filter((i: any) => i.refundStatus === 0).length

// 方法
// 声明周期

// 此时需要路由函数的生命周期钩子咋办
beforeRouteEnterf() {
    next() // 一定要写，否则玩不下去，为什么？
}

}

}