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!