10 Petua dan Trik Typescript penting untuk Devs Angular

Artikel ini membincangkan pelbagai petua dan cara yang digunakan untuk projek sudut dan projek -projek TypeScript yang lain.

Pada tahun -tahun kebelakangan ini, permintaan untuk menaip statik dalam JavaScript telah berkembang pesat. Projek-projek depan yang besar, pelayan yang lebih kompleks, dan alat baris arahan yang kompleks semuanya menggalakkan keperluan untuk pengaturcaraan yang lebih pertahanan di dunia JavaScript. Selain itu, beban menyusun permohonan sebelum ia benar -benar berjalan tidak dilihat sebagai kelemahan, melainkan peluang. Walaupun terdapat dua pesaing yang kuat (typescript dan aliran), banyak trend sebenarnya menunjukkan bahawa hanya satu yang mungkin menang - typescript.

Selain daripada pemasaran dan ciri-ciri terkenal, TypeScript mempunyai komuniti yang luar biasa dengan penyumbang yang sangat aktif. Ia juga mempunyai salah satu pasukan teratas industri dalam reka bentuk bahasa. Di bawah Anders Hejlsberg, pasukan itu berjaya mengubah landskap projek JavaScript yang besar ke dalam perniagaan yang hampir sepenuhnya dikuasakan oleh TypeScript. Dengan projek yang sangat berjaya seperti VSTS atau Visual Studio Code, Microsoft sendiri adalah penyokong kuat teknologi.

Tetapi apa yang menarik bukan sahaja ciri -ciri TypeScript, tetapi juga kemungkinan dan kerangka untuk sokongan TypeScript. Keputusan Google untuk mengadopsi TypeScript sepenuhnya sebagai bahasa pilihan untuk Angular 2 telah terbukti menjadi situasi menang-menang. TypeScript bukan sahaja mendapat lebih banyak perhatian, tetapi Angular sendiri juga mendapat banyak manfaat. Menggunakan menaip statik, pengkompil itu sudah dapat memberi kita amaran yang bermaklumat dan penjelasan yang berguna tentang mengapa kod itu tidak berfungsi.

mata utama

• Definisi Modul Custom: Apabila perpustakaan luaran kekurangan definisi TypeScript, buat definisi anda sendiri dalam fail module.d.ts untuk meningkatkan ketepatan pembangunan dan boleh menyumbang kepada masyarakat dengan berkongsi definisi ini.
• memahami enum dan penghitungan yang berterusan: Gunakan const enum untuk pengoptimuman prestasi, kerana ia tidak menjana kod runtime, sementara enum biasa menghasilkan kod runtime, yang membolehkan mereka berdasarkan keperluan projek adalah sesuai untuk Senario yang berbeza.
• Gunakan ungkapan jenis dan alias: Memudahkan penyelenggaraan kod dan meningkatkan kebolehgunaan semula dengan menggunakan ekspresi dan alias jenis, menjadikannya lebih mudah untuk membuat perubahan dan pemeriksaan jenis yang lebih baik di seluruh asas kod.
• Gunakan diskriminator untuk jenis bersama: Melaksanakan kesatuan pengesahan untuk memproses data bentuk yang berbeza dengan lebih cekap, supaya sifat awam dapat digunakan dengan selamat untuk menentukan konteks jenis yang betul.
• Elakkan menggunakan any untuk kekhususan: terus menggunakan any untuk data yang benar -benar umum dan bekerja keras untuk menentukan jenis yang lebih spesifik, yang membantu mengekalkan keselamatan jenis dan mengurangkan ralat runtime.
• Gunakan generik untuk membuat kod yang fleksibel dan boleh diguna semula: Memohon generik untuk mewujudkan fungsi dan komponen yang sangat boleh diguna semula dan fleksibel yang boleh berfungsi dengan pelbagai jenis sambil mengekalkan keselamatan jenis.

Petua Typescript 1: Sediakan definisi modul anda sendiri

TypeScript adalah superset JavaScript. Oleh itu, setiap pakej NPM yang ada boleh digunakan. Walaupun ekosistem TypeScript sangat besar, tidak semua perpustakaan datang dengan definisi jenis yang sesuai. Lebih buruk lagi, untuk beberapa pakej (kecil), tidak ada perisytiharan berasingan (dalam bentuk @types/{pakej}). Pada ketika ini, kami mempunyai dua pilihan:

1. Memperkenalkan kod warisan menggunakan tip typescript 7
2. Tentukan API modul sendiri.

yang terakhir adalah pilihan pertama. Kita perlu melihat dokumentasi modul itu, tetapi menaipnya akan menghalang kesilapan mudah semasa pembangunan. Juga, jika kami sangat gembira dengan definisi jenis yang kami buat, kami sentiasa boleh menyerahkannya kepada @Types untuk memasukkannya dalam npm. Oleh itu, ini juga memberi kita rasa hormat dan rasa syukur dari masyarakat. baik!

Apakah cara paling mudah untuk memberikan definisi modul kita sendiri? Cukup buat modul.d.ts dalam direktori sumber (juga boleh dinamakan nama yang sama seperti pakej-sebagai contoh, untuk pakej NPM yang tidak diketahui modul, ia boleh dinamakan Unknown-Module.d.ts).

mari kita berikan definisi contoh untuk modul ini:

<code class="language-typescript">declare module 'unknown-module' {
  const unknownModule: any;
  export = unknownModule;
}</code>

Jelas sekali, ini adalah langkah pertama kerana kita tidak boleh menggunakan apa -apa. . Notasi eksport di sini digunakan untuk pakej klasik modul.exports = ... jenis.

Berikut adalah potensi penggunaan modul tersebut dalam TypeScript:

<code class="language-typescript">declare module 'unknown-module' {
  const unknownModule: any;
  export = unknownModule;
}</code>

Seperti yang dinyatakan sebelum ini, definisi keseluruhan modul kini dalam pengisytiharan jenis pemalar yang dieksport. Sekiranya kandungan yang dieksport adalah fungsi, perisytiharan mungkin kelihatan seperti ini:

<code class="language-typescript">import * as unknownModule from 'unknown-module';</code>

Sudah tentu, anda juga boleh menggunakan pakej yang menggunakan fungsi eksport sintaks modul ES6:

<code class="language-typescript">declare module 'unknown-module' {
  interface UnknownModuleFunction {
    (): void;
  }
  const unknownModule: UnknownModuleFunction;
  export = unknownModule;
}</code>

(Kandungan berikut adalah sama dengan teks asal dan lebih lama. Untuk mengelakkan pertindihan, tip typescript 2-10 dan kandungan berikutnya ditinggalkan di sini.) . Sekiranya saya perlu terus menjana kandungan yang tinggal, sila beritahu saya.

Atas ialah kandungan terperinci 10 Petua dan Trik Typescript penting untuk Devs Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!