使用typescript构建Vue应用的实现

@Component({
  data() {
    bar: 1
  },
  methods: {
    say(){
     console.log("say::@Component");
    }
  }
})
export default class App extends Vue {
  public bar: number = 2; // 这里的bar会被@Component中定义的bar覆盖掉
  public say() { // 这里的say()方法会覆盖掉@Component中定义的say方法
    console.log("say::class");
  }
}

还有一点要注意的是，@Component装饰器千万不要漏写，必须在组件类class前修饰

⑧ props属性的写法，使用ts写Vue组件的时候，如果要在组件上定义props属性，那么必须通过@Prop()装饰器，其实就是在定义组件data属性的时候用@Prop()装饰器进行修饰，如果没有通过@Propp()进行修饰，那么定义的属性就是组件的data属性，可以给@Prop()传递一个配置对象，可以定义传递属性的default、required、type等属性，如:

import { Component, Vue, Prop } from 'vue-property-decorator';
@Component // 不要忘了用@Component修饰组件class哟
export default class HelloWorld extends Vue {
  @Prop() public bar!: string; // 这里定义的是props属性
  public foo = "foo"; // 这里定义的是data属性
  @Prop({type: String, default:"foo", required: true}) public foo!: string;
}
</script>

需要注意的是，public foo!: string，这里声明的string类型是不起作用的，要限定父组件传入的foo属性的数据类型，必须在@Prop()装饰器内限定数据类型，否则无效

⑨ @Emit()装饰器的使用，在子组件发射自定义事件的时候通常会通过this.$emit(“say”)的方式，但是typescript提供了一个@Emit()装饰器，用于修饰一个方法，当这个方法被执行的时候，就会在方法执行完成后发射一个同方法名的事件出去，当然，这是在没有给@Emit()传递参数的情况下，如果给@Emit()传递了参数，那么就会发射指定参数的事件，如:

export default class HelloWorld extends Vue {
  @Emit() // 在say()方法执行完成后会发射一个同方法名的say事件
  public say() {
  }
  @Emit("speak") // 这里给@Emit()传递了参数，则会发射speak事件
  public say() {
  }
}

⑩ @Watch()装饰器的使用，其拥有监听组件中数据的变化，就相当于$watch，需要给其传递一个字符串参数，表示其监听的是哪个数据的变化，如:

@Watch("foo") // 监听this.foo的变化
public add(newValue: number, oldValue: number) {
 console.log(`newValue is ${newValue}, oldValue is ${oldValue}`);
}

四、vuex中的变化

vuex中的数据是存放在state属性上的，如果要限定state中数据的属性和类型，那么我们必须在创建store对象的时候定义一个接口限定一下数据类型，如: