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

Question

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

我遇到了一个问题，字符串在使用 (jsonResult as TypeScriptInterfaceName) 通过检查时与所有接口(interface)类型匹配，并且随后根本没有提供正确的值。

我也尝试了类转换器库，但没有成功。根据 typescript 定义显式检查字符串并使其失败的最佳方法是什么。

谢谢。

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: [{}],
}

Answer 1

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

我们所做的是创建一个描述 JSON 文件的 JSON-Schema 文件，然后我们使用像 ajv 这样的 JSON-Schema 验证器来验证传入的 JSON 对象是否与该架构匹配。

然后我们使用像 json-schema-to-typescript 这样的工具来根据模式生成类型。

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

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

   // Do validation or throw error

}

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

1. 后端的 Typescript 类型
2. 前端的 Typescript 类型
3. 文档
4. 具有有用错误的服务器端验证器。
5. 类型安全(验证后)