§

Sampel JSON

Menyediakan penyimpul jenis…
§

Antara muka TypeScript

TypeScript

Pembangun TypeScript di Malaysia menghadapi masalah ini apabila bekerja dengan API pihak ketiga yang tidak mempunyai klien yang ditaip. Aliran kerja yang biasa ialah: tangkap respons sebenar dalam panel rangkaian, tampalkan di sini, namakan akar mengikut titik akhir, dan salin output ke dalam direktori jenis projek. Dari situ, mod ketat menangkap ketidakpadanan yang dilupakan oleh dokumentasi. Penyimpul berjalan sepenuhnya di pelayar anda, jadi muatan daripada API peringkat ujian, badan webhook yang ditandatangani, dan titik akhir yang belum dikeluarkan tidak pernah mencapai perkhidmatan yang dihoskan.

Cara penyimpulan JSON-ke-TypeScript berfungsi

Penyimpulan ialah satu laluan ke atas pokok JSON yang dihurai. Alat membaca setiap nilai, memilih jenis TypeScript untuknya, dan kemudian menulis satu antara muka bagi setiap objek yang ditemuinya.

  1. Hurai sampel JSON dengan penghurai asli pelayar dan tolak input yang tidak teratur dengan petunjuk baris/lajur.
  2. Hidu jenis TypeScript untuk setiap nilai — string, number, boolean, null, tatasusunan, atau objek bersarang.
  3. Beri setiap objek bersarang nama antara muka yang diterbitkan daripada kunci sifat induknya (jadi user.address menjadi antara muka Address).
  4. Gabungkan jenis item merentas setiap tatasusunan supaya senarai {id: 1} dan {id: 2, label: "x"} menghasilkan kesatuan dengan medan pilihan yang betul.
  5. Gunakan pilihan anda (antara muka vs. jenis, readonly, pilihan-nullable) dan keluarkan pengisytiharan dalam tertib kebergantungan supaya fail dikompil tanpa rujukan ke hadapan.

Mengapa jana jenis TypeScript daripada JSON?

  • Kebanyakan pepijat bentuk boleh ditangkap pada masa kompil jika jenis respons ditulis. Menyimpulkan antara muka daripada muatan sebenar menulis sebahagian besarnya untuk anda, dan mod `strict` menangkap medan yang dilupakan oleh dokumentasi.
  • Menggabungkan antara muka yang disimpulkan dengan pengesah masa jalan seperti Zod atau io-ts memberikan bentuk yang sama dua pekerjaan: pelengkap automatik editor semasa pembangunan dan 400 di tepi apabila pengeluaran menghantar sesuatu yang tidak dijangka.
  • Pelayan bahasa TypeScript hanya mengemukakan medan yang diketahuinya. Setelah anda mengimport antara muka yang disimpulkan, pelengkap automatik berfungsi sebaik sahaja anda menaip titik — tiada lagi penghantaran `as any` pada respons dan grep yang kecewa merentas repositori.
  • Jika anda akan menulis spesifikasi OpenAPI, antara muka yang disimpulkan ialah draf pertama skema respons yang pantas. Anda masih mahukan contoh dan kekangan yang ditulis secara manual, tetapi nama dan jenis sifat sudah betul.

Aplikasi biasa

Penyimpulan paling membantu apabila muatan sebenar wujud tetapi skema tidak.

  • Menaip muatan webhook pihak ketiga daripada Stripe, GitHub, atau Twilio sebelum menulis pengendali.
  • Menetapkan jenis untuk API REST dalaman supaya pasukan frontend boleh mula mengkodnya pada hari yang sama backend mendarat.
  • Menjana titik permulaan untuk skema Zod, io-ts, atau Valibot daripada respons API yang diperhatikan.

Bagaimana output kelihatan?

Diberi dokumen JSON sampel dan nama akar, penjana menghasilkan pokok antara muka, satu per objek bersarang. Untuk input di bawah dengan nama akar User:

Tampalkan {"id":1,"name":"Alice","tags":["a","b"],"address":{"city":"Paris"}} dengan nama akar User dan penjana menghasilkan:

export interface User {
  id: number;
  name: string;
  tags: string[];
  address: Address;
}

export interface Address {
  city: string;
}
Perhatikan bahawa address dipromosikan ke antara muka bernama sendiri — itulah output yang dipesan mengikut kebergantungan. JSON yang sama dengan gaya pengisytiharan type akan mengeluarkan export type User = {...}; dengan togol readonly dihidupkan, setiap sifat mendapat pengubah readonly.

Pilihan penjana

Gaya pengisytiharan

Pilih interface (idiom TypeScript standard untuk bentuk objek) atau type (berguna jika anda akan memerlukan jenis terpeta, jenis bersyarat, atau persilangan kemudian). Kedua-duanya menghasilkan tingkah laku masa jalan yang sama; pilihan itu adalah keutamaan gaya pengekodan.

Medan nullable pilihan

Apabila nilai yang disampelkan ialah null, jenis medan menjadi T | null. Menghidupkan pilihan ini juga menambah pengubah ? supaya medan adalah pilihan dari sisi TypeScript — berguna apabila API kadangkala menghapuskan kunci sepenuhnya dan bukannya mengembalikan null.

Pengubah Readonly

Menambah readonly pada setiap pengisytiharan sifat supaya antara muka yang dikeluarkan sepadan dengan model data yang tidak boleh berubah. Berguna untuk kepingan keadaan Redux, respons API yang dibekukan, atau di mana-mana anda mahu pengkompil menandakan mutasi yang tidak disengajakan.

Adakah ini menyokong objek bersarang dan tatasusunan?

Ya. Setiap objek bersarang menjadi antara muka bernama yang diterbitkan daripada kunci sifat induknya, dan tatasusunan menyimpulkan jenis item daripada kandungannya. Tatasusunan objek mendapat antara muka per bentuk objek, dengan jenis kesatuan di mana bentuk tidak bersetuju.

Bagaimana medan pilihan disimpulkan?

Hidupkan togol "Tandakan medan boleh-null sebagai pilihan" dan mana-mana medan yang nilai sampelnya ialah null mendapat pengubah ? pada kunci ditambah | null dalam jenis. Tanpa togol, medan kekal diperlukan dan jenisnya hanya T | null.

Adakah ini menyokong kesatuan diskriminasi?

Jenis kesatuan asas keluar apabila tatasusunan memegang item berbentuk campuran atau apabila medan membawa nilai dan null. Penyimpulan kesatuan-diskriminasi penuh (memilih type atau kind sebagai tag dan memisahkan varian) memerlukan pelbagai sampel — ini dirancang tetapi tidak dalam binaan hari ini.

Bolehkah saya menyimpulkan jenis daripada pelbagai sampel JSON?

Belum lagi — penyimpul hari ini membaca satu sampel pada satu masa. Jika anda mempunyai dua muatan yang sepatutnya berkongsi antara muka (katakan, titik akhir senarai dan titik akhir item tunggal), penyelesaian praktikal ialah menggabungkannya ke dalam satu tatasusunan, menjana dari situ, dan kemudian menamakan semula jenis kesatuan yang dihasilkan. Penyimpulan berbilang sampel ada dalam peta jalan kerana ia adalah satu-satunya cara untuk mengesan medan yang hadir dalam satu respons dan tidak hadir dalam yang lain.

Tampalkan muatan, namakan akar, salin antara muka. Keseluruhan saluran paip berjalan di pelayar anda, jadi API yang belum dikeluarkan atau badan webhook yang ditandatangani kekal pada mesin anda.