使用 Yup 在 TypeScript 中动态生成接口和验证模式

酷静大大_9685

酷静大大_9685

2025-01-24

540人浏览

原创

本文介绍如何在typescript项目中使用yup库动态生成接口和验证模式,尤其是在处理具有动态定义键的对象时,并确保至少一个键具有有效值。

使用 Yup 在 TypeScript 中动态生成接口和验证模式

挑战: 我们需要验证一个对象,其键是动态定义的,并且需要确保至少一个键的值有效。有效的键及其类型存储在一个元数据映射中:

const metadataMap = {
  userId: Number,
  utmSource: String,
  utmMedium: String,
  utmCampaign: String,
};

解决方案: 我们分三个步骤解决这个问题:

步骤一:生成TypeScript接口

为了动态生成TypeScript接口,我们利用键入映射和keyof类型:

type Metadata = {
  [k in keyof typeof metadataMap]?: typeof metadataMap[k] extends NumberConstructor ? number : string;
};

这确保了Metadata接口会根据metadataMap的更新自动调整。生成的接口如下所示:

interface Metadata {
  userId?: number;
  utmSource?: string;
  utmMedium?: string;
  utmCampaign?: string;
}

步骤二:动态生成Yup模式

我们使用object.keys和reduce方法动态创建Yup模式,将每个键映射到相应的Yup验证器:

Scrapfly SDK TypeScript
Scrapfly SDK TypeScript

使用 Scrapfly SDK(scrapfly-sdk)在 TypeScript 或 JavaScript 中进行网页抓取,用于用户请求抓取 URL、绕过反爬虫防护、渲染页面等场景。

下载
const metadataSchema = yup.object().shape(
  Object.keys(metadataMap).reduce((schema, key) => {
    const type = metadataMap[key as keyof typeof metadataMap];
    if (type === Number) {
      schema[key] = yup.number().optional();
    } else if (type === String) {
      schema[key] = yup.string().optional();
    }
    return schema;
  }, {} as Record<string any>)
);</string>

这避免了硬编码,并确保模式会随着metadataMap的变化而自动更新。

步骤三:添加“至少一个键”规则

为了确保至少一个键具有有效值,我们在Yup模式中添加.test方法:

metadataSchema.test(
  'atLeastOneKey',
  'Metadata must have at least one valid key.',
  (value) => {
    if (!value || typeof value !== 'object') return false;
    const validKeys = Object.keys(metadataMap) as (keyof typeof metadataMap)[];
    return validKeys.some((key) => value[key] !== undefined);
  }
);

这个测试会:

  1. 检查对象是否有效。
  2. 从metadataMap动态获取有效键。
  3. 验证至少一个键的值不为undefined。

结果:

以下示例展示了最终模式的行为:

const exampleMetadata = {
  userId: undefined,
  utmSource: 'Google',
  extField: 'invalid', // This key is ignored
};

metadataSchema.validate(exampleMetadata)
  .then(() => console.log('Validation successful!'))
  .catch((err) => console.error('Validation failed:', err));

在这个例子中,验证成功,因为utmSource是一个有效键且值不为undefined,即使userId为undefined,extField也不在metadataMap中。 这个方法有效地结合了TypeScript的静态类型检查和Yup的运行时验证,提供了灵活且健壮的数据验证方案。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

typescript

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

2026.02.13

312

17

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

2026.02.25

540

17

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

2026.03.13

391

19

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

2026.06.03

306

29

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

2026.06.16

698

8

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

2023.10.19

3208

3

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

2025.10.17

5229

12

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.12.29

3869

9

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

2026.01.19

486

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

TypeScript——十天技能课堂
TypeScript——十天技能课堂

共21课时 | 1.8万人学习