Vue typescript - 数据和自定义类型答案

【问题标题】：Vue type script - data and custom typesVue typescript - 数据和自定义类型
【发布时间】：2021-05-21 08:53:49
【问题描述】：

我有一个类型叫做 student。

export interface Student {
  name: string,
  age: number
}

我想将该类型分配给学生的数据。

data() {
const tommy: Student = {}
return {
  tommy,

}

但是，当我在挂载的钩子中为该数据分配一个字符串时，我没有收到任何警告或问题。

  async mounted() {
    this.tommy= 'Tommy Smith'

如何在 vue typescript 中定义自定义数据类型。

【问题讨论】：

这是有道理的。当您将 tommy 的值分配给对象自身时，您将丢失类型推断。 Vue 不明白这一点。相反，您需要定义组件的属性，tommy 现在将成为一个属性。

【解决方案1】：

您可以选择使用组合 API，您可以按照您的方式使用某个类实例化一个对象： const 汤米：学生；

或者，如果您想继续使用 Options API，您可以使用如下类型断言：

data() {
    return {
      tommy: {name: '', age: 0} as Student
    }
}

还有一个问题：您为 tommy 分配了一个字符串，而应该将该字符串分配给 name 属性：

  async mounted() {
    this.tommy.name = 'Tommy Smith'

【讨论】：