TypeScript : Jenis Utiliti 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;
}

// akan kembali Janji

Dalam contoh ini:

Fungsi foo mengembalikan rentetan.

ReturnType mengekstrak jenis kembali foo, iaitu rentetan.
2. Mengendalikan Fungsi Tak Segerak

Apabila berurusan dengan fungsi tak segerak, jenis pemulangan ialah Janji. Berikut ialah contoh:

taip MyReturnType = ReturnType

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

Conditional Check: T extends (...args: any[]) => infer R

Bahagian ini menyemak sama ada T adalah jenis fungsi.
The ...args: mana-mana[] 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:

function foo() {
const something:string = ""
return something;
}

function async fooWithAsync() {
const something:string = ""
return something;
}

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.

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

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

Conditional Check: T extends (...args: any[]) => infer R

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 adalah betul-betul sama.

type ExampleFunction = (x: number, y: string) => boolean;
type ReturnType = MyReturnTypeWithCondition<ExampleFunction>; 
// ReturnType will be boolean

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.

export interface OfferSummaryWithoutConfig {
  id: string;
  auditInfo: AuditInfo;
  offerBasicInfo: OfferBasicInfo;
  metaData: MetaData;
  conditionGroupsSummary: ConditionGroupsSummary[];
  rewardGroupsSummary: RewardGroupsSummary[];
  userOperations: ActionPermission;
}

export interface OfferTypeConfiguration {
  id: number;
  name: string;
  description: string;
  configuration: Configuration;
}

Anda boleh menggunakan jenis utiliti ini untuk menyemak sama ada CombinedType adalah sama, tepat atau sama dengan jenis Ringkasan Tawaran.

type CombinedType = OfferSummaryWithoutConfig & {
  offerTypeConfiguration: OfferTypeConfiguration;
};

Contoh Praktikal

Mari kita susun semuanya dengan contoh praktikal:

type Prettify<T> = {

};

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