TypeScript'ning ilg'or turlari – template literal va conditional turlarni o'rganing. Ifodali, samarali kod yozing va murakkab senariylarda turlarni boshqarishni o'zlashtiring.
TypeScript Ilg'or Turlari: Template Literal va Conditional Turlarni O'zlashtirish
TypeScript'ning kuchi uning qudratli tip tizimida yotadi. string, number va boolean kabi asosiy tiplar ko'plab stsenariylar uchun yetarli bo'lsa-da, template literal tiplari va conditional tiplar kabi ilg'or xususiyatlar ifodalilik va tip xavfsizligining yangi darajasini ochadi. Ushbu qo'llanma ushbu ilg'or tiplarga keng qamrovli nazar tashlab, ularning imkoniyatlarini o'rganadi va amaliy qo'llanishlarini namoyish etadi.
Template Literal Tiplarini Tushunish
Template literal tiplari JavaScript'ning template literallariga asoslanadi, bu sizga satr interpolyatsiyasiga asoslangan tiplarni aniqlash imkonini beradi. Bu o'ziga xos satr naqshlarini ifodalovchi tiplarni yaratishga imkon beradi, bu sizning kodingizni yanada mustahkam va oldindan aytib bo'ladigan qiladi.
Asosiy Sintaksis va Foydalanish
Template literal tiplari JavaScript template literallariga o'xshab, tip ta'rifini o'rab turish uchun teskari tirnoqlardan (`) foydalanadi. Teskari tirnoqlar ichida siz ${} sintaksisidan foydalanib boshqa tiplarni interpolyatsiya qilishingiz mumkin. Sehr shu yerda yuz beradi – siz asosan kompilyatsiya vaqtida interpolyatsiya ichidagi tiplarga asoslanib quriladigan satr bo'lgan tipni yaratasiz.
type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type APIEndpoint = `/api/${string}`;
// Example Usage
const getEndpoint: APIEndpoint = "/api/users"; // Valid
const postEndpoint: APIEndpoint = "/api/products/123"; // Valid
const invalidEndpoint: APIEndpoint = "/admin/settings"; // TypeScript will not show an error here as `string` can be anything
Ushbu misolda, APIEndpoint - /api/ bilan boshlanadigan har qanday satrni ifodalovchi tip. Ushbu asosiy misol foydali bo'lsa-da, template literal tiplarining haqiqiy kuchi yanada aniqroq tip cheklovlari bilan birlashganda namoyon bo'ladi.
Union Tiplari Bilan Birgalikda Foydalanish
Template literal tiplari union tiplari bilan birgalikda ishlatilganda haqiqatan ham porlaydi. Bu sizga satr kombinatsiyalarining o'ziga xos to'plamini ifodalovchi tiplarni yaratishga imkon beradi.
type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type APIPath = "users" | "products" | "orders";
type APIEndpoint = `/${APIPath}/${HTTPMethod}`;
// Valid API Endpoints
const getUsers: APIEndpoint = "/users/GET";
const postProducts: APIEndpoint = "/products/POST";
// Invalid API Endpoints (will result in TypeScript errors)
// const invalidEndpoint: APIEndpoint = "/users/PATCH"; // Error: "/users/PATCH" is not assignable to type "/users/GET" | "/users/POST" | "/users/PUT" | "/users/DELETE" | "/products/GET" | "/products/POST" | ... 3 more ... | "/orders/DELETE".
Endi, APIEndpoint faqat API yo'llari va HTTP usullarining o'ziga xos kombinatsiyalariga ruxsat beradigan yanada cheklovchi tipdir. TypeScript noto'g'ri kombinatsiyalardan foydalanishga urinishlarni belgilab, tip xavfsizligini oshiradi.
Template Literal Tiplari Bilan Satr Manipulyatsiyasi
TypeScript satrni manipulyatsiya qilishning o'ziga xos tiplarini taqdim etadi, ular template literal tiplari bilan uzluksiz ishlaydi. Bu tiplar kompilyatsiya vaqtida satrlarni o'zgartirishga imkon beradi.
- Uppercase: Satrni katta harflarga o'zgartiradi.
- Lowercase: Satrni kichik harflarga o'zgartiradi.
- Capitalize: Satrning birinchi harfini katta harfga aylantiradi.
- Uncapitalize: Satrning birinchi harfini kichik harfga aylantiradi.
type Greeting = "hello world";
type UppercaseGreeting = Uppercase<Greeting>; // "HELLO WORLD"
type LowercaseGreeting = Lowercase<UppercaseGreeting>; // "hello world"
type CapitalizedGreeting = Capitalize<LowercaseGreeting>; // "Hello world"
type UncapitalizedGreeting = Uncapitalize<CapitalizedGreeting>; // "hello world"
Ushbu satr manipulyatsiyasi tiplari nomlash konventsiyalariga asoslanib tiplarni avtomatik ravishda yaratish uchun ayniqsa foydalidir. Masalan, hodisa nomlaridan harakat tiplarini hosil qilishingiz mumkin yoki aksincha.
Template Literal Tiplarining Amaliy Qo'llanishlari
- API Endpoint Ta'rifi: Yuqorida ko'rsatilganidek, aniq tip cheklovlari bilan API endpointlarini aniqlash.
- Hodisalarni Boshqarish: Muayyan prefikslar va suffikslar bilan hodisa nomlari uchun tiplarni yaratish.
- CSS Klassini Yaratish: Komponent nomlari va holatlariga asoslanib CSS klass nomlarini yaratish.
- Ma'lumotlar Bazasiga So'rovni Tuzish: Ma'lumotlar bazasiga so'rovlarni tuzishda tip xavfsizligini ta'minlash.
Xalqaro Misol: Valyuta Formatlash
Ko'p valyutalarni qo'llab-quvvatlaydigan moliyaviy ilova yaratishni tasavvur qiling. To'g'ri valyuta formatini ta'minlash uchun template literal tiplaridan foydalanishingiz mumkin.
type CurrencyCode = "USD" | "EUR" | "GBP" | "JPY";
type CurrencyFormat<T extends CurrencyCode> = `${number} ${T}`;
const priceUSD: CurrencyFormat<"USD"> = "100 USD"; // Valid
const priceEUR: CurrencyFormat<"EUR"> = "50 EUR"; // Valid
// const priceInvalid: CurrencyFormat<"USD"> = "100 EUR"; // Error: Type 'string' is not assignable to type '`${number} USD`'.
function formatCurrency<T extends CurrencyCode>(amount: number, currency: T): CurrencyFormat<T> {
return `${amount} ${currency}`;
}
const formattedUSD = formatCurrency(250, "USD"); // Type: "250 USD"
const formattedEUR = formatCurrency(100, "EUR"); // Type: "100 EUR"
Ushbu misol valyuta qiymatlari har doim to'g'ri valyuta kodi bilan formatlanishini ta'minlaydi, bu esa mumkin bo'lgan xatolarni oldini oladi.
Conditional Tiplarga Kirish
Conditional tiplar TypeScript'ning tip tizimiga shoxlanish logikasini kiritadi, bu sizga boshqa tiplarga bog'liq bo'lgan tiplarni aniqlash imkonini beradi. Bu xususiyat juda moslashuvchan va qayta ishlatiladigan tip ta'riflarini yaratish uchun nihoyatda kuchlidir.
Asosiy Sintaksis va Foydalanish
Conditional tiplar tip shartlarini aniqlash uchun infer kalit so'zi va uchlik operatoridan (condition ? trueType : falseType) foydalanadi.
type IsString<T> = T extends string ? true : false;
type StringCheck = IsString<string>; // type StringCheck = true
type NumberCheck = IsString<number>; // type NumberCheck = false
Ushbu misolda, IsString<T> - T satrga mos keladimi yoki yo'qligini tekshiruvchi conditional tipdir. Agar mos kelsa, tip true ga, aks holda false ga o'zgaradi.
infer Kalit So'zi
infer kalit so'zi sizga tiplardan tipni ajratib olishga imkon beradi. Bu funksiya tiplari yoki massiv tiplari kabi murakkab tiplar bilan ishlashda ayniqsa foydalidir.
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
function add(a: number, b: number): number {
return a + b;
}
type AddReturnType = ReturnType<typeof add>; // type AddReturnType = number
Ushbu misolda, ReturnType<T> funksiya tipi T ning qaytarish tipini ajratib oladi. Conditional tipning infer R qismi qaytarish tipini infer qiladi va uni R tip o'zgaruvchisiga tayinlaydi. Agar T funksiya tipi bo'lmasa, tip any ga o'zgaradi.
Distributive Conditional Tiplar
Conditional tiplar tekshirilayotgan tip yalang'och tip parametri bo'lsa, distributiv bo'ladi. Bu shuni anglatadiki, conditional tip union tipining har bir a'zosiga alohida qo'llaniladi.
type ToArray<T> = T extends any ? T[] : never;
type NumberOrStringArray = ToArray<number | string>; // type NumberOrStringArray = string[] | number[]
Ushbu misolda, ToArray<T> T tipini massiv tipiga o'zgartiradi. T yalang'och tip parametri bo'lgani (boshqa tipga o'ralmagani) uchun, conditional tip number va string ga alohida qo'llaniladi, natijada number[] va string[] ning union'i hosil bo'ladi.
Conditional Tiplarining Amaliy Qo'llanishlari
- Qaytarish Tiplarini Ajratib Olish: Yuqorida ko'rsatilganidek, funksiyaning qaytarish tipini ajratib olish.
- Union'dan Tiplarni Filtrlash: Uniondan faqat o'ziga xos tiplarni o'z ichiga olgan tipni yaratish.
- Yuklangan Funksiya Tiplarini Aniqlash: Kiritish tiplariga asoslanib turli funksiya tiplarini yaratish.
- Tip Himoyachilarini Yaratish: O'zgaruvchining tipini toraytiradigan funksiyalarni aniqlash.
Xalqaro Misol: Turli Sana Formatlarini Boshqarish
Dunyoning turli mintaqalari turli sana formatlaridan foydalanadi. Ushbu farqlarni boshqarish uchun conditional tiplardan foydalanishingiz mumkin.
type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";
type ParseDate<T extends DateFormat> = T extends "YYYY-MM-DD"
? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
: T extends "MM/DD/YYYY"
? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
: T extends "DD.MM.YYYY"
? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
: never;
function parseDate<T extends DateFormat>(dateString: string, format: T): ParseDate<T> {
// (Implementation would handle different date formats)
if (format === "YYYY-MM-DD") {
const [year, month, day] = dateString.split("-").map(Number);
return { year, month, day, format } as ParseDate<T>;
} else if (format === "MM/DD/YYYY") {
const [month, day, year] = dateString.split("/").map(Number);
return { month, day, year, format } as ParseDate<T>;
} else if (format === "DD.MM.YYYY") {
const [day, month, year] = dateString.split(".").map(Number);
return { day, month, year, format } as ParseDate<T>;
} else {
throw new Error("Invalid date format");
}
}
const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Type: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Type: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Type: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }
console.log(parsedDateISO.year); // Access the year knowing it will be there
Ushbu misol ko'rsatilgan sana formatiga asoslanib turli sana tahlil qilish funksiyalarini aniqlash uchun conditional tiplardan foydalanadi. ParseDate<T> tipi qaytarilgan obyektning formatga asoslanib to'g'ri xususiyatlarga ega bo'lishini ta'minlaydi.
Template Literal va Conditional Tiplarni Birlashtirish
Haqiqiy kuch template literal tiplari va conditional tiplarni birlashtirganda yuzaga keladi. Bu nihoyatda kuchli tip manipulyatsiyalariga imkon beradi.
type EventName<T extends string> = `on${Capitalize<T>}`;
type ExtractEventPayload<T extends string> = T extends EventName<infer E>
? { type: T; payload: any } // Simplified for demonstration
: never;
type ClickEvent = EventName<"click">; // "onClick"
type MouseOverEvent = EventName<"mouseOver">; // "onMouseOver"
//Example function that takes a type
function processEvent<T extends string>(event: T): ExtractEventPayload<T> {
//In a real implementation, we would actually dispatch the event.
console.log(`Processing event ${event}`);
//In a real implementation, the payload would be based on event type.
return { type: event, payload: {} } as ExtractEventPayload<T>;
}
//Note that the return types are very specific:
const clickEvent = processEvent("onClick"); // { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); // { type: "onMouseOver"; payload: any; }
//If you use other strings, you get never:
// const someOtherEvent = processEvent("someOtherEvent"); // Type is `never`
Eng Yaxshi Amaliyotlar va E'tiborga Loyiq Jihatlar
- Sodda Tutish: Garchi kuchli bo'lsa-da, bu ilg'or tiplar tezda murakkablashishi mumkin. Aniq va xizmat ko'rsatish oson bo'lishga intiling.
- Puxta Sinash: Keng qamrovli unit testlar yozish orqali tip ta'riflaringiz kutilganidek ishlashiga ishonch hosil qiling.
- Kodingizni Hujjatlashtirish: Kodingizni o'qilishi mumkinligini oshirish uchun ilg'or tiplaringizning maqsadini va xulqini aniq hujjatlashtiring.
- Ishlashga E'tibor Berish: Ilg'or tiplardan haddan tashqari foydalanish kompilyatsiya vaqtiga ta'sir qilishi mumkin. Kodingizni profillang va kerak bo'lganda optimallashtiring.
Xulosa
Template literal tiplari va conditional tiplar TypeScript arsenalida kuchli vositalardir. Ushbu ilg'or tiplarni o'zlashtirib, siz yanada ifodali, xizmat ko'rsatish oson va tip xavfsizligi yuqori bo'lgan kod yozishingiz mumkin. Bu xususiyatlar tiplar o'rtasidagi murakkab munosabatlarni qamrab olishga, qattiqroq cheklovlarni qo'llashga va yuqori darajada qayta ishlatiladigan tip ta'riflarini yaratishga imkon beradi. Ushbu texnikalarni o'zlashtirib, TypeScript ko'nikmalaringizni oshiring va global auditoriya uchun mustahkam va kengaytiriladigan ilovalar yarating.