首页 > 其他分享 >ts拯救前端:优雅的在运行时校验后端接口返回数据类型 typescript-json-schema+ ajv

ts拯救前端:优雅的在运行时校验后端接口返回数据类型 typescript-json-schema+ ajv

时间:2024-05-29 12:10:45浏览次数:20  
标签:typescript string 数据类型 ts ajv json type schema

包管理器:pnpm
环境:node
依赖:typescript-json-schemaajv

准备工作

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

源码链接

标签:typescript,string,数据类型,ts,ajv,json,type,schema
From: https://www.cnblogs.com/zhengzhijian/p/18219996

相关文章

  • 阿里云语音合成TTS直播助手软件开发
    阿里云的TTS比较便宜,效果比不了开源克隆的那种,比纯机器人效果好一点点阿里云samberthttps://help.aliyun.com/zh/dashscope/developer-reference/quick-start-13Sambert系列模型1万字1元,每主账号每模型每月3万字免费创建API-KEYhttps://dashscope.console.aliyun.com/apiK......
  • 【EI检索稳定 | 东华理工大学机械与电子工程学院协办】2024年数字技术与智慧教育国际
    2024年数字技术与智慧教育国际会议(DTSE2024)将于2024年7月26日在广东省广州市召开,本次会议专注于“数字技术与智慧教育”领域,将汇集全球范围内的学者、研究人员以及教育技术开发者,共同探索和分享该领域内的最新学术成果和技术进展。会议的主要目标是构建一个高质量的学术交流和......
  • echarts饼图给legend图例增加自定义点击事件
    echarts图例点击会有一个默认的点击事件,会把点击的图例对应的legend取消解决办法legendselectchanged事件中将取消选中的legend动态设置回来,主要代码如下:letchart=echarts.init(document.getElementById('main'),null)//图例点击事件chart.on('legendselectchanged',(pa......
  • CF1843E Tracking Segments
    题目链接:https://www.luogu.com.cn/problem/CF1843E思路:题目要求至少第几次修改后满足给定的一个区间是美丽区间.我们发现修改操作是有单调性的,随着修改次数的增加,那么满足的美丽区间数量一定会保持不变或增多.因此我们选择二分答案,二分修改次数.二分答案的check函数就根......
  • pyecharts生成图片
      #-*-coding:utf-8-*-frompyechartsimportoptionsasoptsfrompyecharts.chartsimportPieimportpymysqlfromsnapshot_phantomjsimportsnapshotfrompyecharts.renderimportmake_snapshotimportdatetimel_mysql_server="192.168.1.14"......
  • 智慧冶金:TSINGSEE青犀AI+视频技术助力打造高效、安全的生产环境
    一、建设背景冶金行业因其特殊的生产环境和工艺要求,对安全生产、环境保护以及质量监控等方面有着极高的要求。因此,将视频智能监控技术引入冶金行业,不仅有助于提升生产效率,更能有效保障生产安全,降低事故风险。二、方案概述冶金行业生产过程中涉及众多关键环节,如冶炼、浇铸、轧制......
  • Hive复杂数据类型之 Struct结构体
    想写这篇文章蛮久了,但这个数据类型,确实很少用,翻遍了代码库的所有代码,也没有找到。但,之前分享过的 Hive复杂数据类型之array数组,Hive复杂数据类型之array数组_hive建表设置array类型-CSDN博客Hive复杂数据类型之map映射,hive复杂数据类型之map映射_hive复杂数据类型ma......
  • echarts渐变内置生成器echarts.graphic.LinearGradient
    在使用echarts绘制图表时,如果需要使用渐变色,则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradientseries:[{name:'',type:'bar',barMaxWidth:20,label:{show:true,color:'#fff',},......
  • HITSC——软件构造,到底学啥子咯
    本文请配合大纲食用最近很多同学都在吐槽一门课:软件构造。......
  • 全面解析开源RTSP流媒体服务器:功能、性能与应用场景对比
    本文综合分析了多个开源RTSP流媒体服务器,包括EasyDarwin、RtspServer、SRS等,深入探讨它们的功能特性、技术实现、性能对比及应用场景,旨在为开发者提供全面的选型参考。文章目录开源RTSP流媒体服务器概述RTSP协议简介开源RTSP服务器的重要性主要开源项目概览EasyDarwin......