在类中声明对象属性 - Vue答案

【问题标题】：Declare object property in a Class - Vue在类中声明对象属性 - Vue
【发布时间】：2019-05-16 07:48:03
【问题描述】：

在 JS 版本中，我会写成：

export default {
  data() {
    return {
      users: {}
    }
  }
}

但在类样式组件中使用vue-property-decorator：

@Component
export default class Login extends Vue {
  public title: string = 'something'
}

我可以设置字符串/数字，但是如何设置对象呢？

users 对象看起来像这样：

{
  response: {
    users: [
      {
        user_email: '1@example.com',
        user_password: 'password'
      },
      {
        user_email: '2@example.com',
        user_password: 'password'
      }
    ]
  }
}

【问题讨论】：

public users: Record<string, User> = {} 或 public users: Array<User> = [] 取决于您希望用户成为什么
@TitianCernicova-Dragomir，你能解释一下，Record<string, User>，User是一个接口吗？
User 将是您定义的用户的接口（即interface User { id: string, name: string, notPasswordSoDontLook: string }。Record<string, T> 是一种可以使用任何字符串访问的类型，并返回一个User。没有你想在users 中输入的内容有足够的信息，所以我猜测应该是什么类型。

标签： typescript vue.js

【解决方案1】：

const DEFAULT_OBJECT: ObjectType = {
        prop1: "value1",
        prop2: "value2
    };

以下是您声明和初始化对象的方式：

public myObject: ObjectType = DEFAULT_OBJECT;

以下是您接受对象作为道具的方式：

@Prop({ default: () => (DEFAULT_OBJECT) })
public myObject: ObjectType;

在你的情况下，你需要像这样为用户定义一个接口：

interface User {
    email: string;
    password: string;
}

const DEFAULT_USERS: User[] = [
    {
        email: 'a@b.coom',
        password: 'abc'
    },
    {
        email: 'b@b.coom',
        password: 'abc1'
    }
];

然后，在您的组件中，声明您的 users 属性，如下所示：

export default class UserDetails extends Vue {
    public users: User[] = DEFAULT_USERS;
}

【讨论】：

我可以在public users: User[] 然后在constructor 中赋值吗？
您可以使用像 public users: User[] = [] 这样的空数组对其进行初始化，然后在未来的任何时间点（创建/安装的挂钩或任何其他方法）为其分配值。
我只是尝试修改接口类型，例如设置email: number，我没有任何错误。真的有用吗？
如果您更改接口中的数据类型并且如果对象具有该接口的类型具有不同数据类型的值，则会引发打字稿错误。您的编辑器是否向您显示错误取决于打字稿配置。
但是如果数据是从 API 获取的，它怎么知道我收到了什么样的数据（我的意思是编辑器）？