如何优雅地校验后端接口数据，不做前端背锅侠

背景

最近新接手了一批项目，还没来得及接新需求，一大堆bug就接踵而至，仔细一看，应该返回数组的字段返回了 null，或者没有返回，甚至返回了字符串 "null"？？？

这我能忍？我立刻截图发到群里，用红框加大加粗重点标出。后端同学也积极响应，答应改正。

 

第二天，同样的事情又在其他的项目上演，我只是一个小前端，为什么什么错都找我啊！！

日子不能再这样下去，于是我决定写一个工具来解决遇到 bug 永远在找前端的困境。

TypeScript 运行时校验

如何对接口数据进行校验呢，因为我们的项目是 React+TypeScript 写的，所以第一时间就想到了使用 TypeScript 进行数据校验。但是众所周知，TypeScript 用于编译时校验，有没有办法作用到运行时呢？

我还真找到了一些运行时类型校验的库：typescript-needs-types，大部分需要使用指定格式编写代码，相当于对项目进行重构，拿其中 star 最多的 zod 举例，代码如下。

import { z } from "zod";

const User = z.object({
  username: z.string(),
});

User.parse({ username: "Ludwig" });

// extract the inferred type
type User = z.infer<typeof User>;
// { username: string }
复制代码

我宁可查 bug 也不可能重构手里一大堆项目啊。此种方案 ❎。

此时看到了 typescript-json-schema 可以把 TypeScript 定义转为 JSON Schema ，然后再使用 JSON Schema 对数据进行校验就可以啦。这种方案比较灵活，且对代码入侵性较小。

搭建一个项目测试一下！

使用 npx create-react-app my-app --template typescript 快速创建一个 React+TS 项目。

首先安装依赖 npm install typescript-json-schema

创建类型文件 src/types/user.ts

export interface IUserInfo {
  staffId: number
  name: string
  email: string
}
复制代码

然后创建 src/types/index.ts 文件并引入刚才的类型。

import { IUserInfo } from './user';

interface ILabel {
  id: number;
  name: string;
  color: string;
  remark?: string;
}

type ILabelAr