TypeScript でインターフェイスと検証スキーマを動的に生成する (Yup)

最近のプロジェクトでは、キーが一定のマッピングによって動的に定義され、少なくとも1つのキーが効果的な値を持っていたオブジェクトが必要な問題に遭遇しました。

チャレンジ

有効なキーと対応するタイプを定義するメタデータアマップオブジェクトがあります。

このマッピングによると、

：

が必要です

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

タイプのセキュリティを強制するためにタイプスクリプトインターフェイスを動的に生成します。

マッピングに従ってオブジェクトを確認するために、yup検証モードを作成します。
オブジェクトの少なくとも1つのキーに有効な妥当性値があることを確認してください（非定義）。
ソリューションのメンテナンスを改善するために、ハードコードキーを避けてください。
4. ただし、タイプスクリプトはコンピレーション中に静的タイプを実行することを余儀なくされ、YUP処理は実行時に検証されます。

<骤>ステップ1：インターフェイスを生成

MetadatAmapからTypeScriptインターフェイスを生成するために、

とマッピングタイプを使用しました。以下は、私たちがそれを定義する方法です：

この方法により、メタデータの更新がメタデータインターフェイスに自動的に反映されることが保証されます。たとえば、keyof

//メタデータインターフェイスが生成されました：

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

<骤>ステップ2：yupモードを動的に生成

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

メタデータのキーとタイプに一致するYUPモードを動的に作成する必要があります。

および<我们>を使用して、各キーを対応するYUP検証デバイスにマッピングします。 この方法はハードコーディングを排除し、メタデータの変化が手動の更新なしでモードに反映されることを保証します。

<骤>ステップ3：「少なくとも1つのキー」ルールを追加しますObject.keysreduce

次の課題は、オブジェクトの少なくとも1つのキーが定義された値を持っていることを確認することです。

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

メソッドを追加しました：

このロジック：

オブジェクトが効果的であることを確認してください。

.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つのキーを確認します。

結果 以下は、最終モードの動作です。
1. この例では、Utmsourceは非未定義の値を持つ効果的な鍵であり、Extricileがメタデータの一部ではないため、検証が成功します。

以上がTypeScript でインターフェイスと検証スキーマを動的に生成する (Yup)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。