Corak lanjutan TypeScript meningkatkan skalabiliti dengan menguatkuasakan keselamatan masa kompilasi dan mengurangkan kesilapan runtime. 1. Jenis bersyarat distributif memastikan keselamatan jenis di seluruh jenis kesatuan, membolehkan transformasi yang tepat dalam utiliti atau pemetaan dinamik. 2. Jenis berjenama menghalang kesetaraan yang tidak disengajakan jenis struktur yang sama, seperti ID, dengan menambah penanda nominal yang unik, dan boleh disahkan pada masa runtime dengan fungsi penegasan. 3. Jenis rekursif seperti sokongan deeppartikel bersarang kemas kini separa dalam pengurusan negeri, memelihara struktur jenis di pelbagai peringkat. 4. Jenis yang dipetakan dengan remapping utama (menggunakan AS) membolehkan transformasi utama dinamik, sesuai untuk pengendali acara jenis-selamat atau bersiri. 5. Operator yang memuaskan memberikan kesimpulan utama yang tepat sambil memastikan nilai memenuhi kontrak, meningkatkan ketepatan jenis dalam konfigurasi tanpa kehilangan fleksibiliti. 6. Penambahan modul memanjangkan jenis pihak ketiga dengan selamat, membolehkan sifat tersuai pada objek global seperti Express.REQUEST apabila didokumentasikan dengan betul dan scoped. 7. Pemeriksaan lengkap dengan tidak pernah memastikan semua kes dikendalikan dalam kesatuan, kritikal untuk pengurangan dan mesin negara yang boleh dikekalkan. Corak ini secara kolektif mengalihkan pengesahan untuk menyusun masa, mengurangkan pepijat, dan menyokong refactoring yang lebih selamat dalam aplikasi berskala besar.

Apabila membina aplikasi berskala, TypeScript menjadi lebih daripada sekadar pemeriksa jenis -ini merupakan alat untuk merekabentuk seni bina yang boleh dipelihara. Di luar antara muka dan generik asas, corak jenis canggih boleh membantu menguatkuasakan invarian, mengurangkan boilerplate, dan menangkap bug pada masa penyusunan. Berikut adalah corak utama yang memberi kuasa kepada aplikasi berskala besar.

1. Jenis bersyarat distributif untuk keselamatan jenis

Jenis bersyarat pengedaran membolehkan anda menggunakan logik di seluruh jenis kesatuan dengan selamat. Ini amat berguna apabila bekerja dengan jenis yang dipetakan atau jenis utiliti yang perlu mengekalkan perbezaan jenis.

 Taipkan ToArray <t> = t memperluaskan apa -apa? T []: tidak pernah;

// Mengedarkan kesatuan:
// String | Nombor → String [] | Nombor []
Taip strnumArray = toArray <string | nombor>; // String [] | Nombor []

Corak ini adalah asas dalam utiliti seperti ReturnType<T> atau Extract<T, U> . Gunakannya untuk membuat pembalut jenis selamat yang menyesuaikan tingkah laku berdasarkan jenis input.

Gunakan Kes : Apabila pemetaan ke atas prop dalam komponen bertindak balas atau mengubah respons API secara dinamik, jenis pengedaran memastikan setiap varian dikendalikan dengan betul tanpa kehilangan maklumat jenis.

2. Jenis berjenama untuk keselamatan jenis semantik

Penaipan struktur TypeScript adalah kuat tetapi boleh membawa kepada kesetaraan yang tidak disengajakan (misalnya, merawat ID string sebagai yang lain). Jenis berjenama menambah semantik seperti nominal menggunakan jenis persimpangan.

 jenis userId = string & {readonly jenama: simbol unik};
jenis postid = string & {readonly jenama: simbol unik};

fungsi userId (id: string): userId {
  Kembali ID sebagai UserId;
}

fungsi postid (id: string): postid {
  kembali id sebagai postid;
}

Sekarang UserId dan PostId tidak serasi, walaupun kedua -dua rentetan di bawah tudung.

Kenapa penting : menghalang lulus ID pengguna di mana ID pos dijangka -biasa dalam kod besar di mana ID diluluskan melalui banyak lapisan.

Petua: Gabungkan dengan fungsi asserts untuk mengesahkan semasa runtime:

 Fungsi AsseSisUuID (Input: String): Menegaskan Input adalah userId {
  jika (!/^[a-f0-9-] {36} $/. test (input)) {
    membuang ralat baru ("bukan uuid yang sah");
  }
}

3. Jenis rekursif dan utiliti separa yang mendalam

Dalam pengurusan negeri yang kompleks (contohnya, Redux, Zustand), anda sering perlu bekerja dengan kemas kini separa bersarang. A Naive Partial<T> hanya berfungsi satu tahap mendalam.

 taipkan deeppartial <t> = t melanjutkan objek
  ? {
      [P dalam keyof t]?: Deeppartial <t [p]>;
    }
  : T;

Sekarang anda boleh menaip fungsi dengan selamat yang menggabungkan konfigurasi separa atau objek bersarang patch.

 const updateConfig = (patch: deeppartial <appconfig>) => {...};

Twist Lanjutan : Tambah kawalan ke atas kedalaman atau laluan yang diperlukan menggunakan logik bersyarat atau jenis template literal.

Juga berguna untuk mengejek data yang sangat bersarang dalam ujian semasa mengekalkan struktur.

4. Jenis dipetakan dengan remapping (ts 4.1)

Menggunakan as dalam jenis yang dipetakan membolehkan anda mengubah kunci secara dinamik -ideal untuk normalisasi, siri, atau pengendalian peristiwa.

 taipkan eventMap = {
  "Pengguna: dicipta": {userId: string};
  "Pos: Dihapus": {postid: String; Soft?: Boolean};
};

// Mengubah nama acara menjadi jenis pengendali
Taipkan EventHandlers = {
  [K di Keyof EventMap sebagai `on $ {Capitize <K>}`]: (
    Data: EventMap [K]
  ) => tidak sah;
};

// hasil:
// {
// onuserCreated: (data: {userid: string}) => void;
// onpostdeleted: (data: {postid: string; soft?: boolean}) => void;
//}

Ini menjadikan sistem acara anda-selamat dan dokumentasi diri.

Bonus : Gunakan transformasi kunci Uncapitalize atau tersuai untuk diselaraskan dengan kontrak API atau konvensyen penamaan.

5. Kekangan generik dengan satisfies (ts 4.9)

Operator satisfies memastikan nilai memenuhi jenis tanpa menyempitkan mereka terlalu agresif.

 laluan const = {
  Rumah: "/",
  Pengguna: "/Pengguna/: ID",
  Tetapan: "/Tetapan/Profil",
} memenuhi rekod <string, string>;

Sekarang Typescript tahu kunci yang tepat ( home , user , dan lain -lain), jadi mengakses routes.home.toUpperCase() adalah selamat -tetapi masih memeriksa bahawa semua nilai adalah rentetan.

Kemenangan besar : Anda mendapat kedua -dua jenis keselamatan dan kesimpulan yang tepat untuk literals yang digunakan dalam penghalaan, konfigurasi, atau terjemahan.

Gunakan ini bukan as const apabila anda mahukan fleksibiliti dalam struktur tetapi pengesahan yang kuat.

6. Pembesaran modul untuk API yang boleh diperpanjang

Dalam aplikasi besar, anda sering melanjutkan jenis pihak ketiga (misalnya, menambah sifat tersuai untuk Express.Request atau elemen JSX global).

 // global.d.ts atau dalam modul
mengisytiharkan modul 'ekspres' {
  permintaan antara muka {
    UserId?: String;
  }
}

Sekarang setiap fail mengimport express melihat jenis yang dikemas kini.

Amalan Terbaik : Simpan pembesaran dalam fail khusus dan dokumen mengapa mereka wujud. Elakkan terlalu banyak untuk mencegah kebergantungan tersembunyi.

Juga berguna untuk sistem plugin di mana modul mendaftarkan diri ke dalam jenis bersama.

7. Pemeriksaan lengkap dengan never

Pastikan semua kes ditangani dalam switch atau rantai if-else kritikal dalam pengurangan atau mesin negara.

 jenis tindakan = {type: "tambah"; muatan: nombor} | {type: "Reset"};

Pemegang fungsi (tindakan: tindakan) {
  suis (action.type) {
    kes "tambah":
      pulangan tindakan.payload * 2;
    Kes "Reset":
      kembali 0;
    Lalai:
      ExhausveCheck (tindakan); // melemparkan jika tindakan baru ditambah tetapi tidak dikendalikan
  }
}

fungsi exhausveCheck (x: tidak pernah): tidak pernah {
  membuang kesilapan baru (`kes yang tidak ditandakan: $ {x}`);
}

Apabila tindakan baru ditambah, TypeScript akan menandakan cawangan default kerana action tidak lagi never .

Corak ini skala dengan baik dengan set ciri yang semakin meningkat.

Pemikiran terakhir

Corak ini bukan tentang memamerkan trik TypeScript -mereka tentang mewujudkan sistem yang tumbuh dengan selamat. Matlamatnya adalah untuk mengalihkan lebih banyak pengesahan dari runtime ke masa menyusun, mengurangkan beban kognitif, dan membuat refactoring boleh diramalkan.

Mengamalkan mereka secara berperingkat. Mulakan dengan jenis berjenama dan satisfies , kemudian lapisan dalam jenis rekursif dan dipetakan sebagai permintaan kerumitan.

Pada asasnya, lebih banyak jenis anda mencerminkan peraturan perniagaan, semakin kurang runtime anda membayar kesilapan.

Atas ialah kandungan terperinci Corak TypeScript Lanjutan untuk Aplikasi Skala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!