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

在一个最近的项目中，我遇到一个问题，需要验证一个对象，其键由一个常量映射动态定义，并强制至少一个键具有有效值。

挑战

我们有一个MetadataMap对象，它定义了有效的键及其对应的类型：

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

根据此映射，我们需要：

1. 动态生成一个TypeScript接口来强制类型安全。
2. 创建一个Yup验证模式，根据映射验证对象。
3. 确保对象中至少一个键具有有效值（非undefined）。
4. 避免硬编码键以提高解决方案的可维护性。

但是，TypeScript在编译时强制执行静态类型，而Yup处理运行时验证。

步骤1：生成接口 为了从MetadataMap生成TypeScript接口，我们使用了keyof和映射类型。以下是我们定义它的方式：

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

这种方法确保了MetadataMap的任何更新都会自动反映在Metadata接口中。例如：

// 生成的Metadata接口：

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

步骤2：动态生成Yup模式

我们需要动态创建一个与MetadataMap中的键和类型匹配的Yup模式。使用Object.keys和reduce，我们将每个键映射到其对应的Yup验证器：

const metadataSchema = Yup.object(  
 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>)  
);

此方法消除了硬编码，并确保了MetadataMap中的更改会在无需手动更新的情况下反映在模式中。

步骤3：添加“至少一个键”规则

下一个挑战是确保对象中至少一个键具有定义的值。我们在Yup模式中添加了一个.test方法：

metadataSchema.test(  
 "at-least-one-key",  
 "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) => key in value && value[key] !== undefined);  
 }  
);

此逻辑：

1. 确保对象有效。
2. 从MetadataMap动态提取有效键。
3. 验证至少一个键具有非undefined值。

结果 以下是最终模式的行为：

const exampleMetadata = {  
 userId: undefined,  
 utmSource: "google",  
 extraField: "invalid", // 此键被忽略。  
};  

metadataSchema  
 .validate(exampleMetadata)  
 .then(() => console.log("Validation succeeded"))  
 .catch((err) => console.error("Validation failed:", err.errors));

在此示例中，验证成功，因为utmSource是一个具有非undefined值的有效键，即使userId未定义且extraField不是MetadataMap的一部分。

以上是使用 Yup 在 TypeScript 中动态生成接口和验证模式的详细内容。更多信息请关注PHP中文网其他相关文章！