“新”与隐式类型

Question

我正在参加 Udemy 课程来学习 Angular。在本课程中，我们正在制作一个显示食谱并让您将食谱中的物品添加到购物清单的应用程序。我创建了一个模型来描述 TypeScript 中的一种成分，然后我将它们放在一个数组中。

代码如下所示：

这是模型（简短而简单）

export class Ingredient {
    constructor(public name: string, public amt: number) {}
}

这是它在组件中的使用位置：

export class ShoppingListComponent implements OnInit {
  ingredients: Ingredient[] = [
    { name: 'Apples', amt: 5 },
    { name: 'Tomatos', amt: 3 },
  ];

我的问题是：讲师使用new 声明数组中的对象，如下所示：new Ingredient('Apples', 5) 但我想知道的是，new 关键字是否必要？ ingredients 数组被显式键入到成分中，所以不会强制放入数组中的任何对象符合成分类吗？无论哪种方式，当我启动它时，我的应用程序上的数据都会显示相同。而且我知道打字有效，因为如果我将{ foo: 'bar' } 扔到数组中，webpack 会拒绝编译。

用new 调用构造函数和像我一样写出对象有区别吗？

Answer 1

正如 Jon 所提到的，TypeScript 使用结构类型。所以你所做的“看起来”像是一种成分，但实际上不是类的一个实例。

如果你做某事，例如向类添加方法或 getter/setter，你的代码将会中断。

例如，尝试向您的 Ingredient 类添加一个方法：

export class Ingredient {
    constructor(public name: string, public amt: number) {}

    doubleAmount() {
      return this.amt * 2;
    }
}

您会看到您的数组随后会产生输入错误。

如果您像这样进行声明，它不会产生错误：

ingredients: Ingredient[] = [
  new Ingredient('Apples', 5),
  new Ingredient('Tomatoes', 3),
];

因此，即使您的对象“匹配”成分类定义并且将被 TS 视为成分（只要它们继续匹配），它们不是成分类的实例。

有意义吗？