为什么要在 ionic 3 中创建视图模型？答案

【问题标题】：why should i create a view model in ionic 3?为什么要在 ionic 3 中创建视图模型？
【发布时间】：2019-02-21 17:47:47
【问题描述】：

我不明白我是不是对我的模型做错了什么，或者只是我对它的理解不够好，我正在使用 ionic 3 创建应用程序，在其中我正在为来自我的 api 的数据创建视图模型消费。

所以说我有一个获取项目列表的获取请求，并且我有一个类似这样的项目的接口

export interface Item{
    item_ID:number;
    item_Name:string;
}

有一个 api 将获取上述格式的项目并订阅获取请求将返回我上面显示的项目对象中的数据，我可以正常访问属性，如果我更改返回，我不明白来自 api 的数据，例如将 item_price 添加到从 api 返回的 json 并将返回的数据分配给接口对象，无论我的定义如何，都会将属性添加到它，我在这里做错了吗？还是我错过了什么？

提前致谢！

【问题讨论】：

该接口用于帮助 TypeScript 中的类型安全。它不会改变数据对象的形状以匹配界面。
@DanielWSrimpel 从你所说的我得到我应该将它定义为一个类而不是一个接口？我正在学习一门教授离子的课程，这就是它创建我不理解的视图模型的方式，所以这就是我问的原因。感谢您的帮助！
第 4 点 - angular.io/guide/styleguide#style-03-03 建议使用数据模型接口而不是类。
@EssamEid 如果您不想保留从服务返回的对象的所有属性，最好的办法是使用 RxJS map 运算符将对象更改为形状你要的那个。类与接口不会改变你的行为。

标签： angular typescript ionic3

【解决方案1】：

TypeScript 仅在编译时（嗯，类型检查时）添加类型安全。基本上，如果你这样做了

const a: string = 1 + 2

TypeScript 会向你发出尖叫，但它仍会生成以下有效的 JavaScript：

const a = 1 + 2

浏览器很乐意将3 分配给a——它并不关心，甚至知道您声明的是TypeScript 代码中的字符串。您的浏览器只能看到 JavaScript，并且无法在 JavaScript 中定义静态类型，因为它是一种松散类型的语言。

在您的示例中，您尝试教 TypeScript 响应会是什么样子，因此您说它将具有 item_ID 和 item_Name。但是当 TypeScript 被编译成 JavaScript 时，这些信息就会丢失——JavaScript 会接受任何类型的对象，并且不会关心你在 TypeScript 中使用了什么接口。

换句话说，这样做：

const respose: MyInterface = await fetch('data').somehow()

表示您确定 API 端点将返回 MyInterface 的形状——如果没有，TypeScript 无法帮助您。因此，如果您的 API 没有返回 MyInterface，而是其他内容，则您的代码不会发生任何变化，并且当您 console.log 返回的值时，您将看到它的本质（API 返回的内容），并且不是你通过接口指定的。

【讨论】：