时间戳

首页 > 解决方案 > 如何在 React 中根据 typescript 接口检查 JSON 对象的类型

javascript - 如何在 React 中根据 typescript 接口检查 JSON 对象的类型

问题描述

我有一个结果 JSON 对象被传递给一个函数，我需要根据 Typescript 接口定义模型检查它的类型，以便在显示它之前执行特定的渲染更改。

我面临一个问题，其中字符串在通过检查时匹配所有接口类型，使用 (jsonResult as TypeScriptInterfaceName) 并且随后根本不提供正确的值。

我也尝试了类转换器库，但没有运气。什么是针对打字稿定义显式检查字符串并使其失败的最佳方法。

谢谢你。

interface ParentOne {
    id: string;
    title: string;
    child: Child
}
interface Child {
    id: string;
    title: string;
}
**JSON ONE**
{
    id: value,
    title: value,
    child: [{}],
}


interface ParentTwo {
    id: string;
    title: string;
    directory: Directory
}
interface Directory {
    id: string;
    title: string;
}

**JSON TWO**
{
    id: value,
    title: value,
    directory: [{}],
}

标签： javascriptreactjstypescript

解决方案

当您解析 JSON 时，结果类型将为any. 运行时不存在类型信息，因此 Typescript 无法帮助您。

我们要做的是创建一个描述 JSON 文件的 JSON-Schema 文件，然后我们使用 JSON-Schema 验证器ajv来验证传入的 JSON 对象是否与模式匹配。

然后我们使用一个工具json-schema-to-typescript来生成基于模式的类型。

我们的验证函数最终看起来像这样：

function validateBody<T>(body: unknown, jsonSchemaId: string): asserts body is T {

   // Do validation or throw error

}

这意味着从单个 JSON-Schema 中，我们得到：

  1. 后端的打字稿类型
  2. 前端的打字稿类型
  3. 文档
  4. 带有有用错误的服务器端验证器。
  5. 类型安全（验证后）

推荐阅读