使用接口声明变量时打字稿的奇怪行为答案

【问题标题】：Weird Behaviour of typescript when declaring variable using interface使用接口声明变量时打字稿的奇怪行为
【发布时间】：2022-01-25 02:20:33
【问题描述】：

我正在使用接口来定义一种变量，并使用一个具有比接口更多属性的类来初始化该变量。请参考以下代码：

interface User {
  name: string;
  id: number;
}

class UserAccount {
  name: string;
  id: number;
  username: string

  constructor(name: string, id: number, username: string) {
    this.name = name;
    this.id = id;
    this.username = username;
  }
}

const user: User = new UserAccount("Suraj", 1, "srs");
// user.username
// I will not be able to access username in above line but when I console it, it will show the value assigned by the class constructor
console.log(user)
// output will be **UserAccount { name: 'Murphy', id: 1, username: 'srs' }**

我的问题是：

为什么在使用类初始化变量时使用接口？
如果我们使用它，那么为什么编译时打字稿没有错误？
最后，如果我们能够分配它 (UserAccount { name: 'Murphy', id: 1, username: 'srs' }) 那么为什么我们不能访问 user .用户名？

【问题讨论】：

标签： javascript typescript class oop interface

【解决方案1】：

（手机打字，稍后可以添加详细信息）

对于初学者，您没有使用该界面。您定义了一个完全不相关的类和一个接口，它们只有相似的名称。

要实际使用该界面，您必须执行以下操作：

类 UserAccount 实现用户 { … }

现在回答你的问题：

创建接口的原因有很多。例如，您可以与代码的不同部分共享接口，让它知道 UserAccount 的样子，而无需创建对类本身的依赖。另一个用户可以定义多个接口，例如“SoundPlayer”和“GraphicsPlayer”，然后让一个类实现一个或两个。这些类可以通过实现“SoundPlayer”来表示音乐播放器，或者通过实现两者来表示多媒体播放器。这也确保了具有相似功能的类“看起来一样”。
不确定你在问什么，但我觉得你在期待某种不会发生的错误，因为你并没有真正实现接口。
您无法访问 user.username，因为它是 UserAccount 类的一部分，而不是接口的一部分。

【讨论】：