Jenis Utiliti TypeScript: Panduan Lengkap

TL;DR: Jenis utiliti TypeScript ialah fungsi prabina yang mengubah jenis sedia ada, menjadikan kod anda lebih bersih dan lebih mudah diselenggara. Artikel ini menerangkan jenis utiliti penting dengan contoh dunia sebenar, termasuk cara mengemas kini profil pengguna, mengurus konfigurasi dan menapis data dengan selamat.

TypeScript ialah asas dalam pembangunan web moden, membolehkan pembangun menulis kod yang lebih selamat dan boleh diselenggara. Dengan memperkenalkan penaipan statik ke JavaScript, TypeScript membantu menangkap ralat pada masa penyusunan. Menurut Tinjauan Pembangun Stack Overflow 2024, TypeScript meletakkan ke-5^ke dalam teknologi skrip paling popular dalam kalangan pembangun.

Ciri hebat TypeScript adalah sebab utama di sebalik kejayaannya. Contohnya, jenis utiliti membantu pemaju memudahkan manipulasi jenis dan mengurangkan kod boilerplate. Jenis utiliti telah diperkenalkan dalam TypeScript 2.1, dan jenis utiliti tambahan telah ditambahkan dalam setiap keluaran baharu.

Artikel ini akan membincangkan jenis utiliti secara terperinci untuk membantu anda menguasai TypeScript.

Memahami jenis utiliti TypeScript

Jenis utiliti adalah jenis generik yang dipratakrifkan dalam TypeScript yang membolehkan penukaran jenis sedia ada kepada jenis varian baharu. Ia boleh dianggap sebagai fungsi peringkat jenis yang mengambil jenis sedia ada sebagai parameter dan mengembalikan jenis baharu berdasarkan peraturan transformasi tertentu.

Ini amat berguna apabila bekerja dengan antara muka, di mana variasi jenis yang diubah suai yang sedia ada selalunya diperlukan tanpa perlu menduplikasi definisi jenis.

Jenis utiliti teras dan aplikasi dunia sebenar mereka

separa

Jenis utiliti Separa mengambil jenis dan menjadikan semua sifatnya sebagai pilihan. Jenis utiliti ini amat berharga apabila jenis bersarang, kerana ia menjadikan sifat pilihan secara rekursif.

Sebagai contoh, katakan anda sedang mencipta fungsi kemas kini profil pengguna. Dalam kes ini, jika pengguna tidak mahu mengemas kini semua medan, anda hanya boleh menggunakan jenis Separa dan hanya mengemas kini medan yang diperlukan. Ini sangat mudah dalam borang dan API yang tidak semua medan diperlukan.

Rujuk contoh kod berikut.

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

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

Diperlukan

Jenis utiliti Diperlukan membina jenis dengan semua sifat jenis yang disediakan ditetapkan kepada diperlukan. Ini berguna untuk memastikan semua sifat tersedia sebelum menyimpan objek ke pangkalan data.

Sebagai contoh, jika Diperlukan digunakan untuk pendaftaran kereta, ia akan memastikan anda tidak terlepas sebarang sifat yang diperlukan seperti jenama, model dan perbatuan semasa membuat atau menyimpan rekod kereta baharu. Ini sangat kritikal dari segi integriti data.

Rujuk contoh kod berikut.

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

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

Baca sahaja

Jenis utiliti Baca Sahaja mencipta jenis yang semua sifat adalah baca sahaja. Ini sangat berguna dalam pengurusan konfigurasi untuk melindungi tetapan kritikal daripada perubahan yang tidak diingini.

Sebagai contoh, apabila apl anda bergantung pada titik akhir API tertentu, apl tersebut tidak sepatutnya tertakluk kepada perubahan semasa pelaksanaannya. Menjadikannya baca sahaja menjamin bahawa ia akan kekal berterusan sepanjang kitaran hayat apl.

Rujuk contoh kod berikut.

interface Car {
  make: string;
  model: string;
  mileage?: number;
}

const myCar: Required<Car> = {
  make: 'Ford',
  model: 'Focus',
  mileage: 12000,
};

Pilih

Jenis utiliti Pick** membina jenis dengan memilih set sifat daripada jenis sedia ada. Ini berguna apabila anda perlu menapis maklumat penting, seperti nama pengguna dan e-mel, untuk dipaparkan dalam papan pemuka atau paparan ringkasan. Ia membantu meningkatkan keselamatan dan kejelasan data.

Rujuk contoh kod berikut.

interface Config {
  apiEndpoint: string;
}

const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };

// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'

tinggalkan

Jenis utiliti Omit membina jenis dengan mengecualikan sifat tertentu daripada jenis sedia ada.

Sebagai contoh, Abaikan akan berguna jika anda ingin berkongsi data pengguna dengan pihak ketiga tetapi tanpa maklumat sensitif, seperti alamat e-mel. Anda boleh melakukan ini dengan menentukan jenis baharu yang akan mengecualikan medan tersebut. Terutamanya dalam API, anda mungkin mahu melihat perkara yang berlaku di luar dalam respons API anda.

Lihat contoh kod seterusnya.

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

type UserSummary = Pick<User, 'name' | 'email'>;

const userSummary: UserSummary = {
  name: 'Alice',
  email: 'alice@example.com',
};

Rekod

Jenis utiliti Rekod mencipta jenis objek dengan kunci dan nilai yang ditentukan, yang berguna apabila berurusan dengan pemetaan berstruktur.

Sebagai contoh, dalam konteks sistem pengurusan inventori, jenis Rekod boleh berguna dalam membuat pemetaan eksplisit antara item dan kuantiti. Dengan jenis struktur ini, data inventori boleh diakses dan diubah suai dengan mudah sambil memastikan semua hasil yang dijangka diambil kira.

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

const userWithoutEmail: Omit<User, 'email'> = {
  id: 1,
  name: 'Bob',
};

Kecualikan

Jenis utiliti Exclude** membina jenis dengan mengecualikan jenis tertentu daripada kesatuan.

Anda boleh menggunakan Kecualikan apabila mereka bentuk fungsi yang sepatutnya hanya menerima jenis primitif tertentu (cth., nombor atau Boolean tetapi bukan rentetan). Ini boleh mengelakkan pepijat di mana jenis yang tidak dijangka mungkin menyebabkan ralat semasa pelaksanaan.

Rujuk contoh kod berikut.

type Fruit = 'apple' | 'banana' | 'orange';
type Inventory = Record<Fruit, number>;

const inventory: Inventory = {
  apple: 10,
  banana: 5,
  orange: 0,
};

Ekstrak

Jenis utiliti Extract membina jenis dengan mengekstrak jenis tertentu daripada kesatuan.

Dalam senario di mana anda perlu memproses hanya nilai angka daripada koleksi jenis campuran (seperti melakukan pengiraan), menggunakan Ekstrak memastikan hanya nombor yang dilalui. Ini berguna dalam saluran paip pemprosesan data yang mana penaipan yang ketat boleh menghalang ralat masa jalan.

Rujuk contoh kod berikut.

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

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

NonNullable

Jenis utiliti NonNullable membina jenis dengan mengecualikan null dan undefined daripada jenis yang diberikan.

Dalam apl yang sesetengah nilai perlu ditakrifkan pada setiap masa, seperti nama pengguna atau ID produk, menjadikannya Tidak Boleh Dibatalkan akan memastikan bahawa medan kekunci tersebut tidak akan menjadi null atau tidak ditentukan. Ia berguna semasa pengesahan borang dan respons daripada API di mana nilai yang hilang mungkin akan menyebabkan masalah.

Rujuk contoh kod seterusnya.

interface Car {
  make: string;
  model: string;
  mileage?: number;
}

const myCar: Required<Car> = {
  make: 'Ford',
  model: 'Focus',
  mileage: 12000,
};

ReturnType

Utiliti ReturnType mengekstrak jenis pemulangan fungsi.

Apabila bekerja dengan fungsi tertib tinggi atau panggil balik mengembalikan objek kompleks, seperti koordinat, menggunakan ReturnType memudahkan penentuan jenis pulangan yang dijangkakan tanpa perlu menyatakannya secara manual setiap kali. Ini boleh mempercepatkan pembangunan dengan mengurangkan pepijat berkaitan jenis yang tidak sepadan.

interface Config {
  apiEndpoint: string;
}

const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };

// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'

Parameter

Utiliti Parameter mengekstrak jenis parameter fungsi sebagai tuple.

Ini membolehkan pengekstrakan mudah dan penggunaan semula jenis parameter dalam situasi di mana seseorang ingin memanipulasi atau mengesahkan parameter fungsi secara dinamik, seperti semasa menulis pembalut di sekeliling fungsi. Ia sangat meningkatkan kebolehgunaan semula dan kebolehselenggaraan kod di seluruh pangkalan kod anda dengan memastikan konsistensi tandatangan fungsi.

Rujuk contoh kod berikut.

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

type UserSummary = Pick<User, 'name' | 'email'>;

const userSummary: UserSummary = {
  name: 'Alice',
  email: 'alice@example.com',
};

Kes penggunaan lanjutan dengan gabungan jenis utiliti

Menggabungkan jenis utiliti ini boleh memberi anda hasil yang hebat apabila membangunkan apl dengan TypeScript. Mari lihat beberapa senario di mana berbilang jenis utiliti berfungsi bersama dengan berkesan.

Menggabungkan Separa dan Diperlukan

Anda boleh mencipta jenis yang memerlukan medan tertentu sambil membenarkan yang lain menjadi pilihan.

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

const userWithoutEmail: Omit<User, 'email'> = {
  id: 1,
  name: 'Bob',
};

Dalam contoh ini, UpdateUser memerlukan sifat id sambil membenarkan nama dan e-mel menjadi pilihan. Corak ini berguna untuk mengemas kini rekod yang pengecam mesti sentiasa ada.

Mencipta respons API yang fleksibel

Anda mungkin mahu mentakrifkan respons API yang boleh mempunyai bentuk yang berbeza berdasarkan syarat tertentu.

type Fruit = 'apple' | 'banana' | 'orange';
type Inventory = Record<Fruit, number>;

const inventory: Inventory = {
  apple: 10,
  banana: 5,
  orange: 0,
};

Di sini, ApiResponse membolehkan anda mencipta jenis respons yang fleksibel untuk panggilan API. Dengan menggunakan Pick , anda memastikan bahawa hanya data pengguna yang berkaitan disertakan dalam respons.

Menggabungkan Kecualikan dan Ekstrak untuk jenis penapisan

Anda mungkin menghadapi situasi di mana anda perlu menapis jenis tertentu daripada kesatuan berdasarkan kriteria tertentu.

Rujuk contoh kod berikut.

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

const updateUser = (user: Partial<User>) => {
  console.log(Updating user: ${user.name} );
};

updateUser({ name: 'Alice' });

Di sini, utiliti Exclude digunakan untuk mencipta jenis ( NonLoadingResponses ) yang mengecualikan loading daripada kesatuan ResponseTypes asal, membenarkan fungsi handleResponse menerima sahaja kejayaan atau ralat sebagai input yang sah.

Amalan terbaik

Gunakan hanya perlu

Walaupun jenis utiliti sangat berkuasa, penggunaan yang berlebihan boleh membawa kepada kod yang rumit dan tidak boleh dibaca. Adalah penting untuk mencapai keseimbangan antara memanfaatkan utiliti ini dan mengekalkan kejelasan kod.

Rujuk contoh kod seterusnya.

interface Car {
  make: string;
  model: string;
  mileage?: number;
}

const myCar: Required<Car> = {
  make: 'Ford',
  model: 'Focus',
  mileage: 12000,
};

Kekalkan kejelasan

Pastikan tujuan setiap kes penggunaan utiliti adalah jelas. Elakkan meletakkan terlalu banyak utiliti bersama-sama, kerana ia boleh mengelirukan struktur yang dimaksudkan untuk jenis anda.

Rujuk contoh kod berikut.

interface Config {
  apiEndpoint: string;
}

const config: Readonly<Config> = { apiEndpoint: 'https://api.example.com' };

// config.apiEndpoint = 'https://another-url.com'; // Error: Cannot assign to 'apiEndpoint'

Pertimbangan prestasi

Walaupun kesan prestasi jarang berlaku pada masa jalan kerana jenis TypeScript hilang selepas penyusunan, jenis kompleks boleh melambatkan pengkompil TypeScript, menjejaskan kelajuan pembangunan.

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

type UserSummary = Pick<User, 'name' | 'email'>;

const userSummary: UserSummary = {
  name: 'Alice',
  email: 'alice@example.com',
};

Kesimpulan

Tidak syak lagi bahawa TypeScript ialah salah satu bahasa yang paling popular dalam kalangan pembangun web. Jenis utiliti ialah salah satu ciri unik dalam TypeScript yang meningkatkan pengalaman pembangunan TypeScript dan kualiti kod dengan ketara apabila digunakan dengan betul. Walau bagaimanapun, kita tidak seharusnya menggunakannya untuk setiap senario kerana mungkin terdapat masalah prestasi dan kebolehselenggaraan kod.

Blog berkaitan

• Linters Terbaik untuk JavaScript dan TypeScript: Memudahkan Pengurusan Kualiti Kod
• 7 Rangka Kerja Ujian Unit JavaScript Setiap Pembangun Perlu Tahu
• Penggunaan Tanda Seru dalam TypeScript
• Memahami Jenis Bersyarat dalam TypeScript

Atas ialah kandungan terperinci Jenis Utiliti TypeScript: Panduan Lengkap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!