Rumah > Artikel > hujung hadapan web > TypeScript : Jenis Utiliti
Pengenalan kepada Jenis Utiliti
Jenis utiliti dalam TypeScript membolehkan anda mengubah jenis sedia ada kepada yang baharu dengan memasukkan, mengecualikan atau mengubah suai sifat. Ini boleh menjadi sangat berguna apabila anda perlu mencipta definisi jenis yang disesuaikan dengan kes penggunaan tertentu tanpa kod pendua.
Menggunakan ReturnType dan Ditunggu dalam TypeScript
Apabila bekerja dengan TypeScript, anda mungkin sering perlu menentukan jenis pemulangan fungsi. TypeScript menyediakan jenis utiliti berguna yang dipanggil ReturnType untuk tujuan ini. Mari kita lihat cara menggunakannya, termasuk mengendalikan fungsi tak segerak.
1. Mendapatkan Jenis Pemulangan Fungsi
Untuk mendapatkan jenis pemulangan fungsi, anda boleh menggunakan jenis utiliti ReturnType . Berikut ialah contoh:
function foo() { const something:string = "" return something; } function async fooWithAsync() { const something:string = "" return something; } // will return Promise<?>
Dalam contoh ini:
Fungsi foo mengembalikan rentetan.
ReturnType : mengekstrak jenis kembalian foo, iaitu rentetan.
2. Mengendalikan Fungsi Asynchronous
Apabila berurusan dengan fungsi tak segerak, jenis pemulangan ialah Janji. Berikut ialah contoh:
type MyReturnType = ReturnType<typeof foo>
Dalam contoh ini:
Fungsi fooWithAsync mengembalikan Janji yang diselesaikan kepada rentetan.
ReturnType mengekstrak jenis pulangan, iaitu Promise.
3. Menggunakan Ditunggu untuk Fungsi Asynchronous
Jika anda ingin mendapatkan jenis Janji yang telah diselesaikan dikembalikan oleh fungsi tak segerak, anda boleh menggunakan jenis utiliti Ditunggu. Begini caranya:
type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>
Dalam contoh ini:
ReturnType memberi Janji.
Ditunggu
//menyelesaikan Janji pada jenis asasnya, iaitu rentetan.
Ringkasan:
ReturnType: Mengekstrak jenis pemulangan fungsi.
Ditunggu: Menyelesaikan jenis Janji.
export const getEvents = async (user: User): Promise<ApiResponse> => { const eventsApiUrl: string = `${PROMOS_END_POINTS.EVENTS}`; const apiInstance: AxiosInstance = getAxiosInstance(user, API_SERVICES.PROMOTIONS); const response: AxiosResponse = await apiInstance.get(eventsApiUrl); return response.data; }; type OfferEvent = Awaited<ReturnType<typeof getEvents>>; const initEvent:OfferEvent = {event:[]}
Dengan menggabungkan jenis utiliti ini, anda boleh menentukan jenis pemulangan kedua-dua fungsi segerak dan tak segerak dalam TypeScript.
Mengekstrak Jenis Pulangan dengan Jenis Bersyarat dalam TypeScript
Dalam TypeScript, anda boleh menggunakan jenis bersyarat dan jenis inferens untuk mengekstrak jenis pulangan secara dinamik daripada jenis fungsi. Ini amat berguna untuk mencipta utiliti jenis yang fleksibel dan boleh digunakan semula. Mari terokai cara ini berfungsi dengan alias jenis MyReturnTypeWithCondition.
type MyReturnTypeWithCondition<T> = T extends (...args: any[]) => infer R ? R : never;
Memecahkannya
function foo() { const something:string = "" return something; } function async fooWithAsync() { const something:string = "" return something; } // will return Promise<?>
Keputusan: ? R : tak pernah
Contoh Praktikal
Pertimbangkan contoh berikut untuk melihat tindakan ini:
type MyReturnType = ReturnType<typeof foo>
Dalam contoh di atas, ReturnType akan menjadi boolean kerana
Contoh Fungsi ialah jenis fungsi yang mengembalikan boolean. Jika anda menggunakan jenis bukan fungsi, ReturnType tidak akan pernah.
Pendekatan ini membolehkan anda mencipta utiliti jenis yang sangat boleh disesuaikan yang boleh membuat kesimpulan dan memanipulasi jenis berdasarkan strukturnya. Ia merupakan ciri hebat TypeScript yang meningkatkan keselamatan jenis dan kebolehselenggaraan kod.
Menggabungkan dan Mencantikkan Jenis dalam TypeScript
Apabila bekerja dengan TypeScript, anda selalunya perlu menggabungkan berbilang jenis atau antara muka untuk mencipta struktur yang lebih kompleks. Ini kadangkala boleh mengakibatkan jenis yang sukar dibaca dan diurus. Dokumen ini akan meneroka cara menggabungkan dua jenis, menjadikan jenis bersarang lebih cantik dan menyemak sama ada jenis gabungan adalah sama.
1. Menggabungkan Dua Jenis
Menggabungkan dua jenis dalam TypeScript ialah tugas biasa. Anda boleh mencapai ini menggunakan jenis persimpangan (&). Katakan anda mempunyai dua antara muka, OfferSummaryWithoutConfig dan OfferTypeConfiguration, dan anda mahu menggabungkannya.
type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>
Anda boleh menggabungkan kedua-dua antara muka ini menggunakan jenis persimpangan (&):
export const getEvents = async (user: User): Promise<ApiResponse> => { const eventsApiUrl: string = `${PROMOS_END_POINTS.EVENTS}`; const apiInstance: AxiosInstance = getAxiosInstance(user, API_SERVICES.PROMOTIONS); const response: AxiosResponse = await apiInstance.get(eventsApiUrl); return response.data; }; type OfferEvent = Awaited<ReturnType<typeof getEvents>>; const initEvent:OfferEvent = {event:[]}
Ini mencipta jenis baharu yang merangkumi semua sifat daripada kedua-dua OfferSummaryWithoutConfig dan OfferTypeConfiguration.
Apabila anda menggabungkan jenis, jenis yang terhasil kadangkala kelihatan tidak kemas dan sukar dibaca. Untuk menjadikan jenis ini lebih mudah dibaca, anda boleh menggunakan jenis utiliti yang dipanggil Prettify.
taip Prettify
Jenis utiliti ini berulang ke atas kekunci jenis T dan membinanya semula, menjadikan definisi jenis lebih bersih dan lebih mudah dibaca.
Selepas menggabungkan jenis, anda boleh menggunakan jenis utiliti Prettify untuk membersihkan jenis yang terhasil
type MyReturnTypeWithCondition<T> = T extends (...args: any[]) => infer R ? R : never;
Untuk memastikan jenis yang digabungkan adalah tepat seperti yang anda harapkan, anda boleh menggunakan jenis utiliti untuk menyemak sama ada dua jenis adalah sama, tepat atau sama.
IsExact: Menyemak sama ada dua jenis betul-betul sama.
taip IsExact
IsIdentical: Menggunakan jenis bersyarat untuk membandingkan dua jenis.
taip IsIdentical
IsEqual: Memastikan kedua-dua jenis mempunyai kunci yang sama.
taip IsEqual
Anda boleh menggunakan jenis utiliti ini untuk menyemak sama ada CombinedType adalah sama, tepat atau sama dengan jenis Ringkasan Tawaran.
Untuk menguatkuasakan semakan ini pada masa penyusunan, anda boleh menggunakan jenis Assert:
function foo() { const something:string = "" return something; } function async fooWithAsync() { const something:string = "" return something; } // will return Promise<?>
Mari kita susun semuanya dengan contoh praktikal:
type MyReturnType = ReturnType<typeof foo>
Kesimpulan
Dengan menggunakan jenis utiliti Prettify, anda boleh menjadikan jenis bersarang anda lebih mudah dibaca dan diurus. Menggabungkan jenis menggunakan jenis persilangan (&) membolehkan anda membuat struktur kompleks yang mudah untuk digunakan. Selain itu, menggunakan jenis utiliti seperti IsExact, IsIdentical dan IsEqual membantu memastikan jenis gabungan anda tepat seperti yang anda harapkan.
Menggunakan Jenis Utiliti TypeScript: Pilih, Abaikan, Baca sahaja dan Separa
TypeScript menawarkan set jenis utiliti yang berkuasa yang boleh membantu anda mencipta definisi jenis yang lebih fleksibel dan boleh digunakan semula. Kami akan meneroka empat jenis utiliti penting: Pilih, Abaikan, Baca Sahaja dan Separa. Kami akan menggunakan contoh praktikal daripada aplikasi e-dagang untuk menggambarkan cara utiliti ini boleh digunakan dalam senario dunia sebenar.
Mari mulakan dengan antara muka Produk yang akan kami gunakan sepanjang catatan blog ini:
type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>
Menggunakan Pick untuk Ringkasan Produk
Kes Penggunaan: Memaparkan ringkasan produk pada halaman penyenaraian produk.
Jenis utiliti Pick membolehkan anda membuat jenis baharu dengan memilih sifat tertentu daripada jenis sedia ada. Ini berguna apabila anda hanya memerlukan subset sifat.
Contoh:
export const getEvents = async (user: User): Promise<ApiResponse> => { const eventsApiUrl: string = `${PROMOS_END_POINTS.EVENTS}`; const apiInstance: AxiosInstance = getAxiosInstance(user, API_SERVICES.PROMOTIONS); const response: AxiosResponse = await apiInstance.get(eventsApiUrl); return response.data; }; type OfferEvent = Awaited<ReturnType<typeof getEvents>>; const initEvent:OfferEvent = {event:[]}
Menggunakan Omit untuk Borang Produk
Kes Penggunaan: Membuat borang produk untuk menambah produk baharu, di mana medan tertentu dijana secara automatik.
Jenis utiliti Omit membolehkan anda membuat jenis baharu dengan mengecualikan sifat tertentu daripada jenis sedia ada. Ini berguna apabila sifat tertentu tidak diperlukan dalam konteks tertentu.
Contoh:
type MyReturnTypeWithCondition<T> = T extends (...args: any[]) => infer R ? R : never;
Menggunakan Readonly untuk Butiran Produk Tidak Berubah
Kes Penggunaan: Memastikan butiran produk tidak boleh diubah suai selepas diambil daripada pangkalan data.
Jenis utiliti Readonly membuat semua sifat jenis baca sahaja, bermakna ia tidak boleh ditukar selepas ditetapkan. Ini berguna untuk mencipta objek tidak berubah.
Contoh:
Conditional Check: T extends (...args: any[]) => infer R
Menggunakan Separa untuk Kemas Kini Produk
Kes Penggunaan: Mengemas kini butiran produk yang hanya beberapa medan mungkin ditukar.
Jenis utiliti separa menjadikan semua sifat jenis sebagai pilihan. Ini berguna apabila anda perlu mencipta jenis untuk objek yang tidak semua sifat diperlukan.
Contoh:
function foo() { const something:string = "" return something; } function async fooWithAsync() { const something:string = "" return something; } // will return Promise<?>
Kesimpulan
Jenis utiliti seperti Pick, Omit, Readonly dan Separa adalah alatan berkuasa dalam TypeScript yang membantu anda membuat definisi jenis yang lebih fleksibel dan boleh digunakan semula. Dengan memahami dan menggunakan utiliti ini, anda boleh menulis kod yang lebih bersih dan boleh diselenggara.
Jangan ragu untuk bereksperimen dengan jenis utiliti ini dalam projek anda sendiri dan lihat cara ia boleh memudahkan definisi jenis anda!
Atas ialah kandungan terperinci TypeScript : Jenis Utiliti. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!