TypeScript 中的接口 [重复]答案

【问题标题】：Interfaces in TypeScript [duplicate]TypeScript 中的接口 [重复]
【发布时间】：2016-06-26 08:01:59
【问题描述】：

我的 angular2 应用程序中有一些接口。其中之一是针对我从远程 API 获取的产品。

我的界面：

export interface Product {
    id: number;
    name: string;
}

在我的服务中获取产品时，我会执行以下操作：

this.http.get(productsUrl).map(res => <Product>res.json());

然后这是在我的应用程序的某个地方订阅的。我刚刚意识到，后端的产品具有更多的属性，而不仅仅是在我的界面中定义的 id 和 name。我教过这会引发某种错误，但似乎我的界面只是被从后端获取的任何内容覆盖了。

例如，我可以通过稍后在我的应用程序中执行 product.price 来获取价格，即使这不是我的界面的一部分（而是获取的 json 中产品的一部分）。为什么会这样？如果只是被覆盖了，接口是什么？

【问题讨论】：

【解决方案1】：

TypeScript 中的接口用于 IDE 中的静态类型检查和自动完成支持，但它们在运行时会被删除。在 JS 中，您可以像往常一样动态添加和删除属性。

如果您将 JSON 转换为一个类，该类也将只包含从 JSON 获取的内容，但不包含类似方法的实现。

【讨论】：

【解决方案2】：

TypeScript 中的接口“...is a powerful way of defining contracts...”。它只是一个合同，声明 - 期望在对象中实现哪些属性。然后你将“任何”对象转换为接口，你不修改这个对象，你只是告诉编译器，你期望其中存在某些属性。

【讨论】：