打字稿和 REST API 响应答案

【问题标题】：Typescript and REST API response打字稿和 REST API 响应
【发布时间】：2020-09-27 00:41:06
【问题描述】：

让我先说我是 typescript 的新手，但我是一名长期的 JavaScript 开发人员。

我有一个现有的 JavaScript 应用程序，我希望将其转换为 typescript。在 JavaScript 应用程序中，它调用 rest API 来获取数据，然后检查它是否存在，然后有条件地呈现应用程序。在 JavaScript 中，我可以动态检查响应对象上是否存在属性并有条件地呈现它。在 typescript 中，它会抛出错误，因为数据是任何类型的，并且它不知道该属性是否存在。

在打字稿应用程序中，为所有 API 响应创建类型以确保它们的类型安全是否很常见？使用 node 作为你的后端，我可以看到一个巨大的机会，你可以共享后端和前端模型。我目前正在为我的后端使用 .net 核心，我担心我可能会在尝试始终从实体框架模型创建打字稿模型时开枪打死自己。

还有其他人使用 .net core 作为后端并在前端做出反应吗？你如何处理 typescript 中的 API 响应？

【问题讨论】：

您的 TS 代码在逻辑上与您的 JS 相同。您只需添加描述您期望解析后的 API 响应外观的类型，但确保类型匹配仍然取决于您。

标签： javascript reactjs typescript

【解决方案1】：

我不能告诉你它是否常见，但我们为每个端点编写json-schema 文件。这些架构文件是：

用于验证请求正文并生成错误。
用于生成文档。
转换为 typescript 类型，用于前端和后端。

【讨论】：

【解决方案2】：

我们使用与您相同的堆栈——.Net Core 后端/React 前端——带有 typescript。我们处理它的方式是为后端发送给我们的对象创建类型，然后将动态检查器（如您提到的那些）转换为 user-defined type guards。

所以，粗略地说，对于服务器返回的各种数据传输对象，我们有一个类型/类型保护对，如下所示：

// type
export type SomeDto = { someKey: string; someOtherKey: number }
// type guard
export const isSomeDto = (returnedObj: any): returnedObj is SomeDto =>
  returnedObject.someKey && typeof returnedObj === "string"
  returnedObject.someOtherKey && tyepeof returnedObj === "number"

那么我们在抓取代码中基本有以下内容：

const someReturn = fetchDatafromApi(endpoint)
if isSomeDto(someReturn) {
  //now typescript will recognize someReturn as SomeDto
} else {
  // throw or otherwise handle the fact you have bad data from the
  // server
}

通过这种方式，您可以在运行时在 javascript 中进行动态检查，并在编译时进行类型安全。这些守卫写起来不是很有趣（你会想对它们全部进行单元测试），我想如果可能的对象数量更大，我们会选择更自动化的解决方案，比如另一个中提到的@Evert回答。但是对于一些对象和现有的 javascript 验证器，这是一种在 API 返回上输入内容的非常方便的方法。

【讨论】：