ts结合vue的使用

Ts算是一个未来的趋势叭，主要总结下常用的用法。

静态检测

public value: string = '1231312312'
private firstname: string = 'kim'
private lastname: string = 'king'
handleWatch(val: string): void {
    console.log(val)
}

对于那种复杂的结构要接口去限制

interface Result<T> {
    ok: 0 | 1,
    data: T[]
}

private res: Result<string>;

这边还用到了一个范型 ，范型就是说类型是动态传的

工厂模式

ts中使用vue会频繁用到装饰器，比如

import { Component, Vue, Prop, Emit } from "vue-property-decorator";

@Component
export default class SInput extends Vue {
    @Prop() private value!: string;
}

什么是装饰器函数，就是说把后面传入的内容，做一种转换然后输出。就像一个工厂，拿到原料生成对应的产品一样。这边的 @Component就是把后面的一部分的类转成一个组件，这边细心的人肯定注意到为什么有些后面还加个括号。加个括号可以理解为装饰器添加了一些新的配置参数，也就是说成了一个新的装饰器。
再比方说

//  相当于this.$emit('input',  event.target.value)
@Emit()
input(event: any): string {
    return event.target.value
}

@Watch('value', {deep: true})
handleWatch(val: string): void {
    console.log(val)
}

Getter Setter

更有那种面向对象的感觉了是不是，比如要实现Vue中的computed

private firstname: string = 'kim'
private lastname: string = 'king'
get fullName(): string {
    return this.firstname + this.lastname
}

生命周期Hook

生命周期hook肯定是很常用的，ts中写起来更加的简单了（个人观点）

constructor() {}
created() {
    console.log('created')
}

mounted() {
    console.log('mounted')
}

constructor() 早于crate() 这个应该很好理解，是不是先要声明data