如何在 React 中根据 typescript 接口检查 JSON object 的类型

Question

I have a result JSON object being passed onto a function which I would need to check the type of it against a Typescript interface definition model, in order to be perform specific rendering changes prior displaying it.

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

我也尝试了 class 变压器库，但没有运气。 什么是根据 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-Schema 文件来描述 JSON 文件，然后我们使用像ajv这样的 JSON-Schema 验证器来验证传入的 JSON ZA8CFDE6331BD59EB2AC96F8911C4B666 是否匹配。

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

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

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. 类型安全（验证后）

Answer 2

因为您在运行时没有接口定义，所以您不能指望它们进行完整性检查，您可能会执行以下操作。

给定一些有用的接口

interface ParentOne {
    id: string;
    title: string;
    child: Child
}
interface Child {
    id: string;
    title: string;
}

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

我们想要一种使用这些漂亮界面的方法

const processParentOne = (p: ParentOne) => {
  console.log(p.child);
}

const processParentTwo = (p: ParentTwo) => {
  console.log(p.directory);
}

所以我们一可以推断出类型就转换它们

const processionJson = (data: any) => {
  if (!!data.child) {
    processParentOne(data as ParentOne);
  } else if(!!data.directory) {
    processParentTwo(data as ParentTwo);
  }
}

这样我们就可以做类似的事情

const p1: ParentOne = {
  id: 'po',
  title: "p1",
  child: {
    id: 'chopo',
    title: 'little'
  }
}

const p2: ParentTwo = {
  id: 'pt',
  title: 'p2',
  directory: {
    id: 'dirpt',
    title: 'dict'
  }
}

// Remove all the type info for example
const json = (Math.random() < .5) 
  ? JSON.stringify(p1) : JSON.stringify(p2);

// pass along "unknown" data type
processionJson(JSON.parse(json))