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<?> 

• Bahagian ini menyemak sama ada T adalah jenis fungsi.
• The ...args: sebarang[] sintaks sepadan dengan mana-mana tandatangan fungsi.
• Kata kunci infer R menangkap jenis pengembalian fungsi ke dalam pembolehubah jenis R.

Keputusan: ? R : tak pernah

• Jika T adalah jenis fungsi, alias jenis diselesaikan kepada R, jenis pemulangan fungsi.
• Jika T bukan jenis fungsi, ia memutuskan untuk tidak sekali-kali.

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.

2. Jenis Bersarang Cantik

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 = {[K dalam kekunci T]: T[K]};

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;

3. Menyemak sama ada Jenis Gabungan adalah Sama

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 = [T] memanjangkan [U] ? ([U] memanjangkan [T] ? true : false): palsu;

IsIdentical: Menggunakan jenis bersyarat untuk membandingkan dua jenis.

taip IsIdentical = T memanjangkan U ? (U memanjangkan T ? benar : palsu) : palsu;

IsEqual: Memastikan kedua-dua jenis mempunyai kunci yang sama.

taip IsEqual = kekunci T memanjangkan kekunci U ? (keyof U memanjangkan keyof T ? true : false) : false;

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<?> 

Contoh Praktikal

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!