如何在打字稿中键入对象答案

【问题标题】：How to to type objects in typescript如何在打字稿中键入对象
【发布时间】：2021-12-17 04:25:45
【问题描述】：

我试图弄清楚如何处理的一个相当常见的情况是，某些 API 返回的 json 对象中的类型注释。

spec 说：

除了原语之外，您会遇到的最常见的类型是对象类型。这指的是任何带有属性的 JavaScript 值，几乎是所有属性！要定义对象类型，我们只需列出其属性及其类型。例如，这是一个接受点状对象的函数：

// The parameter's type annotation is an object type
function printCoord(pt: { x: number; y: number }) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });

所以我们应该键入每个参数和嵌套对象？如果我事先不知道响应正文怎么办？如果主体很长并且包含大量嵌套对象和对象数组怎么办？

在后一种情况下，最佳做法或明智的选择是什么？

【问题讨论】：

如果您还不知道类型，那么 TS 无法帮助您解决问题。您可以使用any。另一方面，如果您有样本数据，那么您可以基于该结构创建类型/接口
我的回答被否决了，所以我改变了它，看看用这种新方法是否对你有帮助
@ppicom 答案是正确的。除了事先知道您正在处理什么样的数据外，没有什么可做的。在大型类型中，您可以暂时将 any etc 用于大量数据，但这确实主要是体力劳动
谢谢@ppicom，我相信它确实有帮助
您也可以使用生成器，它们可以帮助您创建可以手动增强的模板，例如json2ts.com，但请记住不要将敏感数据放到网上。

标签： javascript angular typescript

【解决方案1】：

例如，Axios 允许您在调用时指定响应类型。这是通过使用 typescript generics。你可以看一个例子here。

您可以通过将 API 响应粘贴到 https://app.quicktype.io/?l=ts 之类的工具中来快速生成 Typescript 接口，它将您的 JSON 对象转换为 typescript 接口。

请注意，如果您的 API 响应发生变化，您需要确保您的接口能够处理所有变化。

下面是另一个使用原生 'fetch' 方法指定返回类型的示例：How to use fetch in TypeScript

【讨论】：

【解决方案2】：

面对这个问题，没什么可做的。

一些库和服务关心将它们的客户端打包（如 twilio）以便输入。如果情况并非如此，并且您正在针对 API 进行编程（大部分时间是 HTTP），那么您的第一个选择是非常防御性地进行编程。也就是说，不要想当然地认为给定的属性会存在，就好像您使用的是纯 Javascript。

另一种选择是尽最大努力尝试并根据外部服务的文档键入您从外部服务获得的响应。您可以手动完成，或者（我倾向于这样做以避免拼写错误，您可以使用能够将 JSON 响应转换为其相应类型的外部工具。

【讨论】：