Ciri TypeScript Mesti Tahu untuk Meningkatkan Kecekapan Pengekodan Anda

TypeScript telah mentakrifkan semula cara pembangun menulis kod JavaScript yang boleh skala dan boleh diselenggara. Walaupun ciri asasnya seperti penaipan statik dan antara muka difahami secara meluas, terdapat konsep TypeScript lanjutan yang boleh membuka kunci tahap fleksibiliti dan kuasa baharu dalam kod anda. Berikut ialah 10 konsep TypeScript lanjutan yang perlu diketahui oleh setiap pembangun untuk menguasai superset JavaScript yang berkuasa ini.

Ingin mengukuhkan asas JavaScript anda di samping menguasai TypeScript?

Jangan terlepas eBook saya: JavaScript: Dari ES2015 hingga ES2023. Ia merupakan panduan muktamad untuk JavaScript moden, meliputi ciri penting seperti modul ES, async/menunggu, proksi, penghias dan banyak lagi!

1. Generik: Membuka Kunci Kebolehgunaan Semula

Generik membolehkan anda mencipta komponen, fungsi dan kelas yang berfungsi dengan pelbagai jenis sambil mengekalkan keselamatan jenis yang ketat. Konsep ini menjadikan kod anda boleh diguna semula dan kukuh.

function wrap<T>(value: T): { value: T } {
  return { value };
}

const wrappedString = wrap<string>("TypeScript"); // { value: "TypeScript" }
const wrappedNumber = wrap<number>(42); // { value: 42 }

Generik adalah penting untuk perpustakaan dan rangka kerja yang anda perlukan fleksibiliti tanpa menjejaskan keselamatan jenis.

2. Jenis Dipeta: Mengubah Struktur Objek

Jenis yang dipetakan membolehkan anda mencipta jenis baharu dengan mengubah jenis sedia ada. Ini amat berguna untuk mencipta versi baca sahaja atau pilihan jenis objek.

type ReadOnly<T> = {
  readonly [K in keyof T]: T[K];
};

interface User {
  id: number;
  name: string;
}

type ReadOnlyUser = ReadOnly<User>; // { readonly id: number; readonly name: string }

Ciri ini merupakan asas kepada transformasi jenis dalam TypeScript.

3. Jenis Bersyarat: Membina Jenis Dinamik

Jenis bersyarat membolehkan anda mencipta jenis yang menyesuaikan berdasarkan syarat. Mereka menggunakan kata kunci lanjutan untuk mentakrifkan logik.

type IsString<T> = T extends string ? "Yes" : "No";

type Test1 = IsString<string>; // "Yes"
type Test2 = IsString<number>; // "No"

Jenis bersyarat sesuai untuk membuat jenis yang bergantung pada jenis lain, seperti menyesuaikan API atau jenis utiliti.

4. Jenis Kekunci dan Carian: Jenis Mengakses Secara Dinamik

Pengendali keyof mencipta gabungan semua kunci sifat dalam jenis objek, manakala jenis carian mendapatkan semula jenis sifat tertentu secara dinamik.

interface User {
  id: number;
  name: string;
}

type UserKeys = keyof User; // "id" | "name"
type NameType = User["name"]; // string

Alat ini tidak ternilai untuk bekerja dengan objek dinamik atau mencipta fungsi utiliti generik.

5. Jenis Utiliti: Mempermudahkan Transformasi Jenis

TypeScript termasuk jenis utiliti terbina dalam seperti Partial, Pick dan Omit yang memudahkan transformasi jenis biasa.

interface User {
  id: number;
  name: string;
  email: string;
}

type PartialUser = Partial<User>; // All properties are optional
type UserIdName = Pick<User, "id" | "name">; // Only id and name
type NoEmailUser = Omit<User, "email">; // All properties except email

Jenis utiliti ini menjimatkan masa dan mengurangkan boilerplate apabila mengubah suai atau menyesuaikan jenis.

6. Infer Kata Kunci: Mengekstrak Jenis Secara Dinamik

Kata kunci kesimpulan berfungsi dengan jenis bersyarat untuk membuat kesimpulan jenis daripada konteks tertentu.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function getUser(): User {
  return { id: 1, name: "John", email: "john@example.com" };
}

type UserReturnType = ReturnType<typeof getUser>; // User

Ini biasanya digunakan dalam perpustakaan untuk mengekstrak dan memanipulasi jenis secara dinamik.

7. Jenis Persimpangan dan Kesatuan: Menggabungkan Fleksibiliti dan Ketepatan

Jenis persimpangan (&) dan jenis kesatuan (|) membolehkan anda menentukan jenis yang menggabungkan atau membezakan berbilang jenis.

function wrap<T>(value: T): { value: T } {
  return { value };
}

const wrappedString = wrap<string>("TypeScript"); // { value: "TypeScript" }
const wrappedNumber = wrap<number>(42); // { value: 42 }

Jenis ini penting untuk memodelkan perhubungan data yang kompleks.

8. Pengawal Jenis: Jenis Penapisan pada Masa Jalan

Pengadang jenis membolehkan anda mengecilkan jenis secara dinamik semasa masa jalan. Ini menjadikan bekerja dengan jenis kesatuan lebih selamat dan lebih mudah diramal.

type ReadOnly<T> = {
  readonly [K in keyof T]: T[K];
};

interface User {
  id: number;
  name: string;
}

type ReadOnlyUser = ReadOnly<User>; // { readonly id: number; readonly name: string }

Dengan memperhalusi jenis, pengawal jenis membantu menghapuskan ralat masa jalan.

9. Jenis Tersurat Templat: Mencipta Jenis Rentetan Fleksibel

Jenis literal templat membolehkan pembinaan jenis literal rentetan baharu menggunakan templat rentetan.

type IsString<T> = T extends string ? "Yes" : "No";

type Test1 = IsString<string>; // "Yes"
type Test2 = IsString<number>; // "No"

Ciri ini amat berguna untuk bekerja dengan API, pengendali acara dan corak yang menggunakan rentetan secara berstruktur.

10. Penghias: Pengaturcaraan Meta untuk Kelas dan Kaedah

Penghias ialah ciri percubaan dalam TypeScript yang membolehkan anda membuat anotasi dan mengubah suai kelas, sifat, kaedah atau parameter.

interface User {
  id: number;
  name: string;
}

type UserKeys = keyof User; // "id" | "name"
type NameType = User["name"]; // string

Walaupun penghias masih dalam percubaan, ia digunakan secara meluas dalam rangka kerja seperti Angular dan NestJS untuk suntikan pergantungan dan pengendalian metadata.

Tingkatkan Kemahiran TypeScript Anda ke Tahap Seterusnya

Menguasai konsep TypeScript lanjutan ini akan membantu anda menulis kod yang lebih selamat jenis, berskala dan boleh diselenggara. Sama ada anda sedang mengusahakan aplikasi peringkat perusahaan atau perpustakaan sumber terbuka, alatan ini akan memperkasakan anda untuk menulis TypeScript yang lebih bersih dan cekap.

Ingin mengukuhkan kemahiran JavaScript anda semasa menguasai TypeScript?

Lihat eBook saya: JavaScript: Dari ES2015 hingga ES2023. Ia adalah panduan lengkap untuk ciri JavaScript moden, daripada ES6 kepada kemajuan terkini dalam ES2023. Memahami JavaScript moden ialah asas yang sempurna untuk menguasai TypeScript.

? Muat turun eBuku - JavaScript: dari ES2015 hingga ES2023

Atas ialah kandungan terperinci Ciri TypeScript Mesti Tahu untuk Meningkatkan Kecekapan Pengekodan Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!