Generik TypeScript membolehkan kod yang boleh diguna semula, jenis selamat dengan membenarkan fungsi, antara muka, dan komponen berfungsi dengan pelbagai jenis semasa memelihara maklumat jenis. 1. Generik menggunakan pembolehubah jenis seperti T untuk mewakili jenis pemegang tempat, seperti yang dilihat dalam fungsi identiti, memelihara keselamatan jenis tidak seperti mana -mana. 2. 3. Menggunakan Extends, generik boleh dikekang untuk memastikan sifat yang diperlukan, seperti t meluas {id: nombor} untuk objek dengan medan ID. 4. Pelbagai jenis parameter (contohnya, k, v, r) menyokong transformasi kompleks seperti MapObject, dan jenis lalai (contohnya, t = tidak diketahui) meningkatkan kebolehgunaan tanpa mengorbankan fleksibiliti. 5. Generik digunakan secara meluas dalam fungsi utiliti, cangkuk reaksi seperti USEFetch (), dan pengurusan negeri untuk mengelakkan pertindihan dan memastikan keselamatan masa kompilasi, menjadikannya penting untuk kod yang boleh diselaraskan, boleh dikekalkan apabila logik mengulangi pelbagai jenis.

Generik TypeScript adalah salah satu ciri yang paling kuat untuk menulis kod yang boleh diguna semula, jenis-selamat. Mereka membolehkan anda membuat komponen, fungsi, atau kelas yang bekerja lebih dari pelbagai jenis dan bukannya satu sama dengan maklumat jenis pengorbanan. Ini membuka fleksibiliti sambil mengekalkan menaip yang kuat, yang penting dalam aplikasi berskala besar.

Mari kita pecahkan bagaimana generik membantu anda membina lebih banyak kod yang boleh diguna semula dan bila menggunakannya.

1. Apa itu generik? (Dan mengapa anda memerlukannya)

Pada teras mereka, generik membolehkan anda menulis fungsi atau struktur data yang boleh mengendalikan jenis yang berbeza semasa mengekalkan keselamatan jenis.

Sebagai contoh, bayangkan fungsi identiti mudah:

 identiti fungsi (arg: mana -mana): mana -mana {
  kembali arg;
}

Ini berfungsi -tetapi ia membuang maklumat jenis. Dengan generik, anda memeliharanya:

 Fungsi Identiti <T> (arg: t): t {
  kembali arg;
}

Di sini, T adalah pemboleh ubah jenis -pemegang tempat untuk jenis apa pun yang akan digunakan apabila fungsi dipanggil.

Anda boleh menyebutnya seperti ini:

 const num = identiti (42); // Jenis: Nombor
const str = identiti ("hello"); // Jenis: String

TypeScript T secara automatik, jadi anda tidak perlu menulis identity<number>(42) .

Ini mungkin kelihatan remeh, tetapi ia menjadi kritikal apabila membina utiliti seperti cache, API, atau pengurus negeri di mana jenis berbeza tetapi tingkah laku tetap konsisten.

2. Menggunakan generik dalam fungsi dan antara muka

Generik benar -benar bersinar apabila melengkapkan logik merentasi pelbagai jenis.

Contoh: Pembungkus tindak balas API generik

Katakan anda mengendalikan respons API dengan bentuk yang konsisten:

 Antara muka Apiresponse <T> {
  Data: t;
  Status: Nombor;
  Mesej?: String;
}

Sekarang anda boleh menggunakan semula antara muka ini di titik akhir yang berbeza:

 const userresponse: apiresponse <user> = {
  data: {id: 1, nama: "Alice"},
  Status: 200,
};

const postsresponse: apiresponse <post []> = {
  data: [{id: 1, tajuk: "hello"}],
  Status: 200,
};

Komponen atau perkhidmatan anda kini boleh mengendalikan ApiResponse<T> tanpa mengetahui bentuk T yang tepat, namun masih menawarkan pemeriksaan autocomplete dan jenis penuh.

3. Mengekang generik dengan extends

Kadang -kadang anda mahukan fleksibiliti -tetapi tidak terlalu banyak . Anda boleh menyekat jenis yang diterima generik menggunakan extends .

Sebagai contoh, katakan anda mahu fungsi yang mengekstrak harta dari objek, tetapi hanya jika ia mempunyai medan id :

 fungsi logid <t meluas {id: nombor}> (item: t): void {
  console.log (item.id);
}

Sekarang ini memastikan sebarang hujah yang diluluskan mesti mempunyai id jenis number :

 logID ({id: 123, nama: "bob"}); // ? ok
logID ({name: "Charlie"}); // ? Ralat: hilang 'id'

Corak ini adalah perkara biasa dalam fungsi utiliti, pengendali bentuk, atau serializers di mana anda memerlukan jaminan struktur.

4. Pelbagai jenis parameter dan jenis lalai

Anda tidak terhad kepada satu jenis generik.

 fungsi MapObject <k, v, r> (
  OBJ: Rekod <k, v>,
  fn: (nilai: v) => r
): Rekod <k, r> {
  kembali objek.Fromentries (
    Object.entries (obj) .map (([kunci, nilai]) => [kunci, fn (nilai)])
  ) sebagai rekod <k, r>;
}

Juga, anda boleh menyediakan jenis lalai untuk ergonomik yang lebih baik:

 antara muka queryResult <t = unknown> {
  Data: t;
  Memuatkan: Boolean;
}

Sekarang QueryResult mungkir kepada unknown jika tiada jenis ditentukan, tetapi tetap fleksibel.

5. Komponen yang boleh diguna semula dalam amalan

Generik sangat berguna dalam:

• Fungsi utiliti (misalnya, pick , omit , deepClone )
• Pengurusan Negeri (contohnya, tindakan, pengurangan dengan jenis muatan)
• Komponen React (misalnya, bentuk, modal yang menerima prop generik)
• Cangkuk pengambilan data (misalnya, useFetch<T>() )

Contoh: cangkuk reaksi generik

 fungsi useFetch <t> (url: string): {data: t | null; Memuatkan: Boolean} {
  const [data, setData] = useState <t | null> (null);
  const [loading, setloading] = useState (true);

  useeffect (() => {
    Ambil (URL)
      .then (r => r.json ())
      .talu (data => setData (data sebagai t))
      .finally (() => setloading (false));
  }, [url]);

  kembali {data, memuatkan};
}

// Penggunaan
const {data} = useFetch <user []> ("/api/pengguna");

Di sini, cangkuk yang sama dengan selamat mengendalikan sebarang jenis tindak balas yang diharapkan.

Generik mungkin merasa abstrak pada mulanya, tetapi mereka hanya cara TypeScript untuk membiarkan anda menulis kod masa depan . Sebaik sahaja anda mula menggunakannya, anda akan mendapati diri anda menduplikasi kurang, refactoring dengan keyakinan, dan menangkap bug pada masa penyusunan.

Pada asasnya: jika anda mengulangi logik yang sama untuk pelbagai jenis, sudah tiba masanya untuk mencapai generik.

Atas ialah kandungan terperinci Membuka kebolehgunaan semula dengan generik jenis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!