ts拯救前端:优雅的在运行时校验后端接口返回数据类型 typescript-json-schema+ ajv
包管理器:pnpm
环境:node
依赖:typescript-json-schema、ajv
准备工作
1、安装依赖
pnpm add typescript-json-schema
pnpm add ajv
2、准备需要校验的数据类型
// userType.ts
export interface User {
id: string;
token: string;
nick?: string;
}
3、使用typescript-json-schema把数据类型
转为可供ajv 使用的JSON Schema
// tsJsonSchema.ts
import { User } from './userType';
// 添加脚本
"scripts": {
// ...
"json": "typescript-json-schema tsJsonSchema.ts '*' -o tsJsonSchema.json --id=api --required --strictNullChecks"
}
// 执行脚本 pnpm run json
// 生成 tsJsonSchema.json 文件
{
"$id": "api",
"$schema": "http://json-schema.org/draft-07/schema#",
"definitions": {
"UserInfoAlias": {
"properties": {
"id": {
"type": "string"
},
"nick": {
"type": "string"
},
"token": {
"type": "string"
}
},
"required": [
"id",
"token"
],
"type": "object"
}
}
}
4、封装一个校验方法
// validate.ts
import Ajv from 'ajv';
import schema from '.tsJsonSchema.json';
const ajv = new Ajv({ schemas: [schema] });
export function validateDataByType(type: string, data: unknown) {
console.log(`开始校验,类型:${type}, 数据:`, data);
var validate = ajv.getSchema(`api#/definitions/${type}`);
if (validate) {
const valid = validate(data);
if (!valid) {
console.log('校验失败', validate.errors);
}
else {
console.log('校验成功');
}
}
}
5、测试
// index.ts
validateDataByType('IUserInfoAlias', {
id: '123456';
token: 'dkhasdkjasdasdasdasdknlknasda';
})
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步