Menjana Antara Muka dan Skema Pengesahan secara Dinamik dalam TypeScript dengan Yup

Dalam projek baru-baru ini, saya menghadapi masalah di mana saya perlu mengesahkan objek yang kuncinya ditakrifkan secara dinamik oleh peta malar dan menguatkuasakan bahawa sekurang-kurangnya satu kunci mempunyai nilai yang sah.

Cabaran

Kami mempunyai objek MetadataMap yang mentakrifkan kunci yang sah dan jenis yang sepadan:

<code class="language-typescript">const MetadataMap = {  
 userId: Number,  
 utmSource: String,  
 utmMedium: String,  
 utmCampaign: String,  
} as const;</code>

Menurut pemetaan ini, kami memerlukan:

1. Menjana antara muka TypeScript secara dinamik untuk menguatkuasakan keselamatan jenis.
2. Buat skema pengesahan Yup untuk mengesahkan objek berdasarkan pemetaan.
3. Pastikan sekurang-kurangnya satu kunci dalam objek mempunyai nilai yang sah (bukan tidak ditentukan).
4. Elakkan kunci pengekodan keras untuk meningkatkan kebolehselenggaraan penyelesaian.

Walau bagaimanapun, TypeScript menguatkuasakan penaipan statik pada masa penyusunan, manakala Yup mengendalikan pengesahan masa jalan.

Langkah 1: Jana antara muka Untuk menjana antara muka TypeScript daripada MetadataMap, kami menggunakan keyof dan jenis peta. Begini cara kami mentakrifkannya:

<code class="language-typescript">type Metadata = {  
 [K in keyof typeof MetadataMap]: typeof MetadataMap[K] extends NumberConstructor  
  ? number  
  : string;  
};</code>

Pendekatan ini memastikan bahawa sebarang kemas kini pada MetadataMap ditunjukkan secara automatik dalam antara muka Metadata. Contohnya:

// Antara muka Metadata Dijana:

<code class="language-typescript">interface Metadata {  
 userId?: number;  
 utmSource?: string;  
 utmMedium?: string;  
 utmCampaign?: string;  
}</code>

Langkah 2: Menjana corak Yup secara dinamik

Kita perlu mencipta skema Yup secara dinamik yang sepadan dengan kunci dan jenis dalam MetadataMap. Menggunakan Object.keys dan reduce, kami memetakan setiap kunci kepada pengesah Yup yang sepadan:

<code class="language-typescript">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>)  
);</code>

Pendekatan ini menghapuskan pengekodan keras dan memastikan bahawa perubahan dalam MetadataMap ditunjukkan dalam skema tanpa memerlukan kemas kini manual.

Langkah 3: Tambahkan peraturan "sekurang-kurangnya satu kunci"

Cabaran seterusnya ialah memastikan sekurang-kurangnya satu kunci dalam objek mempunyai nilai yang ditentukan. Kami menambah kaedah .test dalam mod Yup:

<code class="language-typescript">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);  
 }  
);</code>

Logik ini:

1. Pastikan objek itu sah.
2. Ekstrak kunci yang sah secara dinamik daripada MetadataMap.
3. Sahkan bahawa sekurang-kurangnya satu kunci mempunyai nilai yang tidak ditentukan.

Keputusan Begini cara mod akhir berkelakuan:

<code class="language-typescript">const exampleMetadata = {  
 userId: undefined,  
 utmSource: "google",  
 extraField: "invalid", // 此键被忽略。  
};  

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

Dalam contoh ini, pengesahan berjaya kerana utmSource ialah kunci yang sah dengan nilai yang tidak ditentukan, walaupun userId tidak ditentukan dan extraField bukan sebahagian daripada MetadataMap.

Atas ialah kandungan terperinci Menjana Antara Muka dan Skema Pengesahan secara Dinamik dalam TypeScript dengan Yup. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!