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';
})

源码链接