Bagaimana saya cuba memperbaiki ejekan dengan Zod

Jika anda seorang Jurutera Bahagian Hadapan, anda mungkin berada dalam situasi di mana anda dikehendaki mula melaksanakan ciri sebelum API yang menyediakan bahagian hujung belakang itu ciri wujud. Jurutera selalunya akan beralih kepada ejekan untuk membolehkan pembangunan selari (bermaksud kedua-dua bahagian hadapan dan bahagian belakang ciri dibangunkan secara selari).

Ejekan walau bagaimanapun boleh datang dengan beberapa keburukan. Yang pertama dan paling jelas ialah olok-olok boleh hanyut daripada pelaksanaan sebenar, menyebabkan ia tidak boleh dipercayai. Isu bermasalah kedua ialah olok-olok selalunya boleh menjadi kata-kata; Dengan olok-olok yang mengandungi banyak data, mungkin tidak jelas tentang tindak balas olok-olok tertentu yang sebenarnya diejek.

Data di bawah ialah contoh beberapa data yang mungkin anda temui dalam asas kod:

type Order = {
  orderId: string;
  customerInfo: CustomerInfo; // omitted these types for brevity
  orderDate: string;
  items: OrderItem[];
  paymentInfo: PaymentInfo;
  subtotal: number;
  shippingCost: number;
  tax: number;
  totalAmount: number;
  status: 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled';
  trackingNumber: string | null;
};

const mockOrders: Order[] = [
  {
    orderId: "ORD-2024-001",
    customerInfo: {
      id: "CUST-1234",
      name: "Alice Johnson",
      email: "alice.j@email.com",
      shippingAddress: {
        street: "123 Pine Street",
        city: "Portland",
        state: "OR",
        zipCode: "97201",
        country: "USA"
      }
    },
    orderDate: "2024-03-15T14:30:00Z",
    items: [
      {
        productId: "PROD-789",
        name: "Organic Cotton T-Shirt",
        quantity: 2,
        pricePerUnit: 29.99,
        color: "Navy",
        size: "M"
      },
      {
        productId: "PROD-456",
        name: "Recycled Canvas Tote",
        quantity: 1,
        pricePerUnit: 35.00,
        color: "Natural"
      }
    ],
    paymentInfo: {
      method: "credit_card",
      status: "completed",
      transactionId: "TXN-88776655"
    },
    subtotal: 94.98,
    shippingCost: 5.99,
    tax: 9.50,
    totalAmount: 110.47,
    status: "shipped",
    trackingNumber: "1Z999AA1234567890"
  },
  // Imagine more objects here, with various values changed...
];

Data yang saya gunakan setiap hari kelihatan seperti ini. Tatasusunan pesanan atau sejenis maklumat tertumpu pelanggan, menampilkan nilai bersarang yang membantu mengisi jadual, tetingkap timbul dan kad yang diperincikan dengan semua jenis maklumat.

Sebagai seorang jurutera yang ditugaskan untuk menyelenggara aplikasi yang sangat bergantung pada olok-olok seperti itu, anda mungkin bertanya 'apakah objek tertentu ini dalam respons yang mengejek?'. Saya sering mendapati diri saya menatal melalui ratusan contoh seperti yang di atas, tidak pasti tentang tujuan setiap objek.

Memandangkan saya semakin yakin dengan diri saya sebagai seorang jurutera, saya telah menugaskan diri saya untuk menyelesaikan isu di atas; Bagaimana jika setiap ejekan boleh memaparkan tujuannya dengan lebih mudah? Bagaimana jika seorang jurutera hanya perlu menulis baris yang mereka ingin permainkan?

Semasa bermain-main dengan beberapa kod dan perpustakaan yang dipanggil Zod, saya menemui kaedah berikut yang dipanggil parse, yang cuba mengesahkan data masuk terhadap jenis yang diketahui:

const stringSchema = z.string();

stringSchema.parse("fish"); // => returns "fish"
stringSchema.parse(12); // throws error

Ini adalah detik mentol lampu; Contoh kecil dalam dokumentasi Zod ini adalah apa yang saya cari! Jika kaedah parse boleh menerima nilai dan mengembalikannya, maka jika saya lulus dalam nilai, saya akan mendapatkannya semula. Saya juga sudah tahu bahawa saya boleh menentukan nilai lalai pada skema Zod. Bagaimana jika menghantar objek kosong akan mengembalikan objek penuh, dengan nilainya? Lihatlah dan lihatlah ia berlaku; Saya boleh menentukan nilai lalai pada skema Zod dan mengembalikan lalai:

const UserSchema = z.object({
  id: z.string().default('1'),
  name: z.string().default('Craig R Broughton'),
  settings: z.object({
    theme: z.enum(['light', 'dark']),
    notifications: z.boolean()
  }).default({
    theme: 'dark',
    notifications: true,
  })
});

const user = UserSchema.parse({}) // returns a full user object

Sekarang saya mempunyai cara untuk menjana objek, namun ia masih tidak seperti yang saya cari. Apa yang saya mahukan sebenarnya ialah cara untuk hanya menulis baris tepat yang saya 'ejek'. Penyelesaian mudah mungkin kelihatan seperti:

const UserSchema = z.object({
id: z.string().default('1'),
name: z.string().default('Craig R Broughton'),
settings: z.object({
  theme: z.enum(['light', 'dark']),
  notifications: z.boolean()
}).default({
  theme: 'dark',
  notifications: true,
})
});


const user = UserSchema.parse({})
const overridenUser = {...user, ...{
  name: "My new name",
  settings: {}, // I would need to write every key:value for settings :(
} satisfies Partial<z.infer<typeof UserSchema>>} // overrides the base object

Walau bagaimanapun ini mempunyai kelemahannya sendiri; Bagaimana jika nilai yang saya ingin tolak itu sendiri adalah objek atau tatasusunan? Saya kemudiannya perlu menaip secara manual setiap baris yang diperlukan sebelum ini agar ciri itu terus berfungsi dan diejek seperti yang diharapkan, yang menggagalkan tujuan penyelesaian kerja kami yang sedang berjalan.

Untuk sekian lama, ini adalah sejauh yang saya dapat, sehingga baru-baru ini apabila saya mempunyai satu lagi tusukan untuk menambah baik perkara di atas. Langkah pertama ialah mentakrifkan 'API'; Bagaimanakah saya mahu pengguna saya berinteraksi dengan fungsi ini?

type Order = {
  orderId: string;
  customerInfo: CustomerInfo; // omitted these types for brevity
  orderDate: string;
  items: OrderItem[];
  paymentInfo: PaymentInfo;
  subtotal: number;
  shippingCost: number;
  tax: number;
  totalAmount: number;
  status: 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled';
  trackingNumber: string | null;
};

const mockOrders: Order[] = [
  {
    orderId: "ORD-2024-001",
    customerInfo: {
      id: "CUST-1234",
      name: "Alice Johnson",
      email: "alice.j@email.com",
      shippingAddress: {
        street: "123 Pine Street",
        city: "Portland",
        state: "OR",
        zipCode: "97201",
        country: "USA"
      }
    },
    orderDate: "2024-03-15T14:30:00Z",
    items: [
      {
        productId: "PROD-789",
        name: "Organic Cotton T-Shirt",
        quantity: 2,
        pricePerUnit: 29.99,
        color: "Navy",
        size: "M"
      },
      {
        productId: "PROD-456",
        name: "Recycled Canvas Tote",
        quantity: 1,
        pricePerUnit: 35.00,
        color: "Natural"
      }
    ],
    paymentInfo: {
      method: "credit_card",
      status: "completed",
      transactionId: "TXN-88776655"
    },
    subtotal: 94.98,
    shippingCost: 5.99,
    tax: 9.50,
    totalAmount: 110.47,
    status: "shipped",
    trackingNumber: "1Z999AA1234567890"
  },
  // Imagine more objects here, with various values changed...
];

API di atas akan membenarkan pengguna untuk menentukan skema pilihan mereka, dan kemudian memberikan penggantian yang sesuai dan mengembalikan objek pengguna! Sudah tentu kami ingin mengambil kira tatasusunan serta satu objek dengan betul. Untuk tujuan itu, semakan jenis ringkas terhadap jenis penggantian masuk terbukti mencukupi:

const stringSchema = z.string();

stringSchema.parse("fish"); // => returns "fish"
stringSchema.parse(12); // throws error

Kod di atas secara berkesan adalah kod yang sama seperti sebelum ini, namun ia kini merangkum penghuraian secara dalaman supaya pengguna tidak perlu melakukannya secara manual atau mengetahui maklumat terperinci tentang kaedah penghuraian Zods. Seperti yang anda mungkin meneka daripada membaca pernyataan if/else yang disertakan, kami juga telah menyelesaikan pemeliharaan objek dan tatasusunan bersarang melalui penggunaan fungsi pembina rekursif yang menghuraikan setiap nilai dan mengembalikan nilai lalainya yang dinyatakan dalam skema Zod.

Perkara di atas agak membingungkan anda, tetapi hasilnya ialah pengguna boleh melakukan perkara berikut:

const UserSchema = z.object({
  id: z.string().default('1'),
  name: z.string().default('Craig R Broughton'),
  settings: z.object({
    theme: z.enum(['light', 'dark']),
    notifications: z.boolean()
  }).default({
    theme: 'dark',
    notifications: true,
  })
});

const user = UserSchema.parse({}) // returns a full user object

Apabila menyediakan pilihan konfigurasi preserveNestedDefaults kepada pembina, pengguna boleh mengekalkan pasangan nilai utama dalam objek atau tatasusunan bersarang! Ini menyelesaikan isu pengguna mengatasi kunci yang bukan jenis primitif seperti rentetan, dan sebaliknya merupakan jenis yang lebih kompleks dan mengekalkan semua nilai tolak nilai yang kami pilih untuk mengatasi.

Ini sudah cukup dibaca, jadi marilah kita akhiri dengan hasil kerja keras kita. Mari kita lihat semula olok-olok pertama itu, dan bagaimana kita boleh menulisnya dengan zodObjectBuilder. Mula-mula mari tentukan jenis kami dan nilai lalai kami, dan hantar skema yang terhasil ke dalam zodObjectBuilder:

const UserSchema = z.object({
id: z.string().default('1'),
name: z.string().default('Craig R Broughton'),
settings: z.object({
  theme: z.enum(['light', 'dark']),
  notifications: z.boolean()
}).default({
  theme: 'dark',
  notifications: true,
})
});


const user = UserSchema.parse({})
const overridenUser = {...user, ...{
  name: "My new name",
  settings: {}, // I would need to write every key:value for settings :(
} satisfies Partial<z.infer<typeof UserSchema>>} // overrides the base object

Pelaksanaan di atas akan mengembalikan satu objek menggunakan semua nilai lalai! Tetapi kita boleh melakukan lebih baik daripada itu, kita kini boleh (dengan bantuan beberapa definisi terlebih beban dan penghuraian dalaman) mencipta tatasusunan objek, sesuai untuk kes penggunaan respons API yang mengejek:

const UserSchema = z.object({
  id: z.string().default('1'),
  name: z.string().default('Craig R Broughton'),
  settings: z.object({
    theme: z.enum(['light', 'dark']),
    notifications: z.boolean()
  }).default({
    theme: 'dark',
    notifications: true,
  })
});

const user = zodObjectBuilder({
  schema: UserSchema,
  overrides: { name: 'My new name', settings: { theme: 'dark' } } // setting is missing the notifications theme :(
}); // returns a full user object with the overrides

Di atas mengeluarkan pelbagai pesanan akan menjadi nilai lalai penuh, dengan status penghantaran yang diganti! Semoga ini menunjukkan cara fungsi zodObjectBuilder boleh meminimumkan usaha yang diperlukan untuk mencipta olok-olok baharu berdasarkan skema selamat jenis yang boleh dipercayai.

Dengan demonstrasi kecil itu kami telah sampai ke penghujung artikel pertama saya :) Saya harap anda seronok membaca perjalanan penerokaan ini untuk menambah baik ejekan. zodObjectBuilder masih dibina, tetapi ia memenuhi keperluan saya dengan baik untuk meminimumkan objek yang diejek. Jika anda ingin bermain-main dengan versi semasa, anda boleh menemuinya di https://www.npmjs.com/package/@crbroughton/ts-utils yang merangkumi fungsi tersebut.

Atas ialah kandungan terperinci Bagaimana saya cuba memperbaiki ejekan dengan Zod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!