M

MLOG

Lietuvių

Pasinerkite į galingus TypeScript šabloninių literalo tipus ir eilučių manipuliavimo įrankius, kad sukurtumėte patikimas, tipų saugumo požiūriu patikimas programas pasaulinei kūrimo aplinkai.

TypeScript šabloninių eilučių modelis: pažangių eilučių manipuliavimo tipų atskleidimas

Didžiulėje ir nuolat besikeičiančioje programinės įrangos kūrimo aplinkoje tikslumas ir tipų saugumas yra svarbiausi. TypeScript, JavaScript viršrinkinys, tapo esminiu įrankiu kuriant keičiamo dydžio ir prižiūrimas programas, ypač dirbant su įvairiomis pasaulinėmis komandomis. Nors pagrindinė TypeScript stiprybė slypi statinio tipizavimo galimybėse, viena sritis, kuri dažnai yra nepakankamai įvertinama, yra sudėtingas darbas su eilutėmis, ypač naudojant „šabloninius literalo tipus“.

Šiame išsamiame vadove gilinsimės į tai, kaip TypeScript suteikia kūrėjams galimybę apibrėžti, manipuliuoti ir patvirtinti eilučių šablonus kompiliavimo metu, o tai leidžia sukurti tvirtesnes ir klaidoms atsparesnes kodo bazes. Išnagrinėsime pagrindines sąvokas, pristatysime galingus pagalbinius tipus ir pademonstruosime praktinius, realaus pasaulio pritaikymus, kurie gali žymiai pagerinti kūrimo procesus bet kuriame tarptautiniame projekte. Perskaitę šį straipsnį, suprasite, kaip panaudoti šias pažangias TypeScript funkcijas, kad sukurtumėte tikslesnes ir nuspėjamas sistemas.

Šabloninių literalų supratimas: tipų saugumo pamatas

Prieš pasinerdami į tipų lygio magiją, trumpai prisiminkime JavaScript šabloninius literalus (pristatytus ES6), kurie sudaro sintaksinį pagrindą TypeScript pažangiems eilučių tipams. Šabloniniai literalai yra apgaubti atvirkštiniais kairiniais kirčiais (` `) ir leidžia įterpti išraiškas (${expression}) bei kelių eilučių tekstus, siūlydami patogesnį ir skaitomesnį būdą kurti eilutes, palyginti su tradiciniu sujungimu.

Pagrindinė sintaksė ir naudojimas JavaScript/TypeScript

Apsvarstykime paprastą pasisveikinimą:

// JavaScript / TypeScript


const userName = "Alice";


const age = 30;


const greeting = `Hello, ${userName}! You are ${age} years old. Welcome to our global platform.`;


console.log(greeting); // Išvestis: "Hello, Alice! You are 30 years old. Welcome to our global platform."

Šiame pavyzdyje ${userName} ir ${age} yra įterptos išraiškos. TypeScript nustato, kad greeting tipas yra string. Nors tai paprasta, ši sintaksė yra labai svarbi, nes TypeScript šabloniniai literalo tipai ją atspindi, leisdami jums kurti tipus, kurie atspindi konkrečius eilučių šablonus, o ne tik bendrines eilutes.

Eilučių literalo tipai: tikslumo statybiniai blokai

TypeScript pristatė eilučių literalo tipus, kurie leidžia nurodyti, kad kintamasis gali turėti tik konkrečią, tikslią eilutės vertę. Tai neįtikėtinai naudinga kuriant labai specifinius tipų apribojimus, veikiančius beveik kaip enum, bet su tiesioginio eilutės vaizdavimo lankstumu.

// TypeScript


type Status = "pending" | "success" | "failed";



function updateOrderStatus(orderId: string, status: Status) {


  if (status === "success") {


    console.log(`Užsakymas ${orderId} buvo sėkmingai apdorotas.`);


  } else if (status === "pending") {


    console.log(`Užsakymas ${orderId} laukia apdorojimo.`);


  } else {


    console.log(`Užsakymo ${orderId} apdoroti nepavyko.`);


  }


}



updateOrderStatus("ORD-123", "success"); // Teisinga


// updateOrderStatus("ORD-456", "in-progress"); // Tipo klaida: Argumentas, kurio tipas yra '"in-progress"', negali būti priskirtas parametrui, kurio tipas yra 'Status'.


// updateOrderStatus("ORD-789", "succeeded"); // Tipo klaida: 'succeeded' nėra vienas iš literalų tipų.

Ši paprasta koncepcija sudaro pagrindą apibrėžti sudėtingesnius eilučių šablonus, nes leidžia mums tiksliai apibrėžti literalines mūsų šabloninių literalo tipų dalis. Tai garantuoja, kad laikomasi konkrečių eilučių verčių, o tai yra neįkainojama norint išlaikyti nuoseklumą tarp skirtingų modulių ar paslaugų didelėje, paskirstytoje programoje.

TypeScript šabloninių literalo tipų pristatymas (TS 4.1+)

Tikra revoliucija eilučių manipuliavimo tipuose įvyko su TypeScript 4.1 pristatytais „šabloniniais literalo tipais“. Ši funkcija leidžia apibrėžti tipus, kurie atitinka konkrečius eilučių šablonus, suteikdama galingą kompiliavimo laiko patvirtinimą ir tipo išvedimą remiantis eilutės sudėtimi. Svarbu tai, kad tai yra tipai, veikiantys tipų lygmeniu, skirtingai nuo JavaScript šabloninių literalų eilutės konstravimo vykdymo metu, nors jie ir turi tą pačią sintaksę.

Šabloninis literalo tipas sintaksiškai atrodo panašus į šabloninį literalą vykdymo metu, tačiau veikia tik tipų sistemoje. Jis leidžia derinti eilučių literalo tipus su kitų tipų (pvz., string, number, boolean, bigint) vietos ženklais, kad būtų suformuoti nauji eilučių literalo tipai. Tai reiškia, kad TypeScript gali suprasti ir patvirtinti tikslų eilutės formatą, užkertant kelią tokioms problemoms kaip neteisingai suformuoti identifikatoriai ar nestandartizuoti raktai.

Pagrindinė šabloninio literalo tipo sintaksė

Tipo apibrėžime naudojame atvirkštinius kairinius kirčius (` `) ir vietos ženklus (${Type}):

// TypeScript


type UserPrefix = "user";


type ItemPrefix = "item";


type ResourceId = `${UserPrefix | ItemPrefix}_${string}`;



let userId: ResourceId = "user_12345"; // Teisinga: atitinka "user_${string}"


let itemId: ResourceId = "item_ABC-XYZ"; // Teisinga: atitinka "item_${string}"


// let invalidId: ResourceId = "product_789"; // Tipo klaida: tipas '"product_789"' negali būti priskirtas tipui '"user_${string}" | "item_${string}"'.


// Ši klaida pagaunama kompiliavimo, o ne vykdymo metu, taip išvengiant galimos klaidos.

Šiame pavyzdyje ResourceId yra dviejų šabloninių literalo tipų junginys: "user_${string}" ir "item_${string}". Tai reiškia, kad bet kuri eilutė, priskirta ResourceId, turi prasidėti „user_“ arba „item_“, po kurių eina bet kokia eilutė. Tai suteikia tiesioginę kompiliavimo laiko garantiją dėl jūsų ID formato, užtikrinant nuoseklumą didelėje programoje ar paskirstytoje komandoje.

infer galia su šabloniniais literalo tipais

Vienas iš galingiausių šabloninių literalo tipų aspektų, derinant juos su sąlyginiais tipais, yra galimybė išvesti (infer) eilutės šablono dalis. Raktinis žodis infer leidžia užfiksuoti eilutės dalį, atitinkančią vietos ženklą, padarant ją prieinamą kaip naują tipo kintamąjį sąlyginiame tipe. Tai leidžia sudėtingą šablonų atitikimą ir išgavimą tiesiogiai jūsų tipų apibrėžimuose.

// TypeScript


type GetPrefix = T extends `${infer Prefix}_${string}` ? Prefix : never;



type UserType = GetPrefix<"user_data_123">


// UserType yra "user"



type ItemType = GetPrefix<"item_details_XYZ">


// ItemType yra "item"



type FallbackPrefix = GetPrefix<"just_a_string">


// FallbackPrefix yra "just" (nes "just_a_string" atitinka `${infer Prefix}_${string}`)



type NoMatch = GetPrefix<"simple_string_without_underscore">


// NoMatch yra "simple_string_without_underscore" (nes šablonui reikia bent vieno pabraukimo brūkšnio)


// Pataisymas: šablonas `${infer Prefix}_${string}` reiškia "bet kokia eilutė, po kurios eina pabraukimo brūkšnys, po kurio eina bet kokia eilutė".


// Jei "simple_string_without_underscore" neturi pabraukimo brūkšnio, jis neatitinka šio šablono.


// Todėl NoMatch būtų `never` šiame scenarijuje, jei jame tiesiogine prasme nebūtų pabraukimo brūkšnio.


// Mano ankstesnis pavyzdys buvo neteisingas dėl to, kaip `infer` veikia su neprivalomomis dalimis. Pataisykime tai.



// Tikslesnis GetPrefix pavyzdys:


type GetLeadingPart = T extends `${infer PartA}_${infer PartB}` ? PartA : T;


type UserPart = GetLeadingPart<"user_data">


// UserPart yra "user"


type SinglePart = GetLeadingPart<"alone">


// SinglePart yra "alone" (neatitinka šablono su pabraukimo brūkšniu, todėl grąžina T)



// Patikslinkime žinomiems prefiksams


type KnownCategory = "product" | "order" | "customer";


type ExtractCategory = T extends `${infer Category extends KnownCategory}_${string}` ? Category : never;



type MyProductCategory = ExtractCategory<"product_details_001">


// MyProductCategory yra "product"


type MyCustomerCategory = ExtractCategory<"customer_profile_abc">


// MyCustomerCategory yra "customer"


type UnknownCategory = ExtractCategory<"vendor_item_xyz">


// UnknownCategory yra never (nes "vendor" nėra KnownCategory)

Raktinis žodis infer, ypač derinamas su apribojimais (infer P extends KnownPrefix), yra itin galingas, norint analizuoti ir patvirtinti sudėtingus eilučių šablonus tipų lygmeniu. Tai leidžia kurti labai protingus tipų apibrėžimus, kurie gali analizuoti ir suprasti eilutės dalis taip, kaip tai darytų vykdymo laiko analizatorius, bet su papildoma kompiliavimo laiko saugumo ir patikimo automatinio užbaigimo nauda.

Pažangūs eilučių manipuliavimo pagalbiniai tipai (TS 4.1+)

Kartu su šabloniniais literalo tipais, TypeScript 4.1 taip pat pristatė vidinių eilučių manipuliavimo pagalbinių tipų rinkinį. Šie tipai leidžia transformuoti eilučių literalo tipus į kitus eilučių literalo tipus, suteikdami neprilygstamą kontrolę eilučių raidžių dydžiui ir formatavimui tipų lygmeniu. Tai ypač vertinga norint užtikrinti griežtas pavadinimų taisykles įvairiose kodo bazėse ir komandose, sujungiant galimus stiliaus skirtumus tarp įvairių programavimo paradigmų ar kultūrinių pageidavimų.

Šie pagalbiniai įrankiai yra neįtikėtinai naudingi užtikrinant pavadinimų taisykles, transformuojant API duomenis ar dirbant su įvairiais pavadinimų stiliais, dažnai pasitaikančiais pasaulinėse kūrėjų komandose, užtikrinant nuoseklumą, nesvarbu, ar komandos narys teikia pirmenybę camelCase, PascalCase, snake_case ar kebab-case.

Eilučių manipuliavimo pagalbinių tipų pavyzdžiai

// TypeScript


type ProductName = "global_product_identifier";



type UppercaseProductName = Uppercase;


// UppercaseProductName yra "GLOBAL_PRODUCT_IDENTIFIER"



type LowercaseServiceName = Lowercase<"SERVICE_CLIENT_API">


// LowercaseServiceName yra "service_client_api"



type FunctionName = "initConnection";


type CapitalizedFunctionName = Capitalize;


// CapitalizedFunctionName yra "InitConnection"



type ClassName = "UserDataProcessor";


type UncapitalizedClassName = Uncapitalize;


// UncapitalizedClassName yra "userDataProcessor"

Šabloninių literalo tipų derinimas su pagalbiniais tipais

Tikroji galia atsiskleidžia, kai šios funkcijos yra derinamos. Galite kurti tipus, reikalaujančius specifinio raidžių dydžio, arba generuoti naujus tipus remiantis transformuotomis esamų eilučių literalo tipų dalimis, suteikdami labai lanksčius ir patikimus tipų apibrėžimus.

// TypeScript



type HttpMethod = "get" | "post" | "put" | "delete";


type EntityType = "User" | "Product" | "Order";



// 1 pavyzdys: tipų saugumo požiūriu patikimi REST API galinių taškų veiksmų pavadinimai (pvz., GET_USER, POST_PRODUCT)


type ApiAction = `${Uppercase}_${Uppercase}`;



let getUserAction: ApiAction = "GET_USER";


let createProductAction: ApiAction = "POST_PRODUCT";


// let invalidAction: ApiAction = "get_user"; // Tipo klaida: raidžių dydžio neatitikimas 'get' ir 'user'.


// let unknownAction: ApiAction = "DELETE_REPORT"; // Tipo klaida: 'REPORT' nėra EntityType.



// 2 pavyzdys: komponentų įvykių pavadinimų generavimas pagal konvenciją (pvz., "OnSubmitForm", "OnClickButton")


type ComponentName = "Form" | "Button" | "Modal";


type EventTrigger = "submit" | "click" | "close" | "change";



type ComponentEvent = `On${Capitalize}${ComponentName}`;


// ComponentEvent yra "OnSubmitForm" | "OnClickForm" | ... | "OnChangeModal"



let formSubmitEvent: ComponentEvent = "OnSubmitForm";


let buttonClickEvent: ComponentEvent = "OnClickButton";


// let modalOpenEvent: ComponentEvent = "OnOpenModal"; // Tipo klaida: 'open' nėra EventTrigger.



// 3 pavyzdys: CSS kintamųjų pavadinimų apibrėžimas su specifiniu prefiksu ir camelCase transformacija


type CssVariableSuffix = "primaryColor" | "secondaryBackground" | "fontSizeBase";


type CssVariableName = `--app-${Uncapitalize}`;


// CssVariableName yra "--app-primaryColor" | "--app-secondaryBackground" | "--app-fontSizeBase"



let colorVar: CssVariableName = "--app-primaryColor";


// let invalidVar: CssVariableName = "--app-PrimaryColor"; // Tipo klaida: raidžių dydžio neatitikimas 'PrimaryColor'.

Praktinis pritaikymas pasauliniame programinės įrangos kūrime

TypeScript eilučių manipuliavimo tipų galia toli gražu neapsiriboja teoriniais pavyzdžiais. Jie siūlo apčiuopiamą naudą palaikant nuoseklumą, mažinant klaidų skaičių ir gerinant kūrėjų patirtį, ypač didelio masto projektuose, kuriuose dalyvauja paskirstytos komandos skirtingose laiko juostose ir su skirtingais kultūriniais ypatumais. Kodifikuodamos eilučių šablonus, komandos gali efektyviau bendrauti per pačią tipų sistemą, mažindamos dviprasmybes ir neteisingus aiškinimus, kurie dažnai kyla sudėtinguose projektuose.

1. Tipų saugumo požiūriu patikimi API galinių taškų apibrėžimai ir klientų generavimas

Patikimų API klientų kūrimas yra labai svarbus mikroservisų architektūroms arba integruojantis su išorinėmis paslaugomis. Naudodami šabloninius literalo tipus, galite apibrėžti tikslius savo API galinių taškų šablonus, užtikrindami, kad kūrėjai sudarytų teisingus URL ir kad laukiami duomenų tipai atitiktų. Tai standartizuoja, kaip API iškvietimai atliekami ir dokumentuojami visoje organizacijoje.

// TypeScript



type BaseUrl = "https://api.mycompany.com";


type ApiVersion = "v1" | "v2";


type Resource = "users" | "products" | "orders";


type UserPathSegment = "profile" | "settings" | "activity";


type ProductPathSegment = "details" | "inventory" | "reviews";



// Apibrėžkite galimus galinių taškų kelius su konkrečiais šablonais


type EndpointPath = 


  `${Resource}` | 


  `${Resource}/${string}` | 


  `users/${string}/${UserPathSegment}` | 


  `products/${string}/${ProductPathSegment}`;



// Visas API URL tipas, apjungiantis bazę, versiją ir kelią


type ApiUrl = `${BaseUrl}/${ApiVersion}/${EndpointPath}`;



function fetchApiData(url: ApiUrl) {


  console.log(`Bandoma gauti duomenis iš: ${url}`);


  // ... čia būtų tikroji tinklo užklausos logika ...


  return Promise.resolve(`Duomenys iš ${url}`);


}



fetchApiData("https://api.mycompany.com/v1/users"); // Teisinga: pagrindinis išteklių sąrašas


fetchApiData("https://api.mycompany.com/v2/products/PROD-001/details"); // Teisinga: konkretaus produkto detalės


fetchApiData("https://api.mycompany.com/v1/users/user-123/profile"); // Teisinga: konkretaus vartotojo profilis



// Tipo klaida: kelias neatitinka apibrėžtų šablonų arba bazinis URL/versija yra neteisingi


// fetchApiData("https://api.mycompany.com/v3/orders"); // 'v3' nėra teisinga ApiVersion


// fetchApiData("https://api.mycompany.com/v1/users/user-123/dashboard"); // 'dashboard' nėra UserPathSegment


// fetchApiData("https://api.mycompany.com/v1/reports"); // 'reports' nėra teisingas Resource

Šis požiūris suteikia tiesioginį grįžtamąjį ryšį kūrimo metu, užkertant kelią dažnoms API integracijos klaidoms. Pasauliniu mastu paskirstytoms komandoms tai reiškia mažiau laiko, praleisto derinant neteisingai sukonfigūruotus URL, ir daugiau laiko kuriant funkcijas, nes tipų sistema veikia kaip universalus vadovas API vartotojams.

2. Tipų saugumo požiūriu patikimos įvykių pavadinimų taisyklės

Didelėse programose, ypač su mikroservisais ar sudėtingomis vartotojo sąsajos sąveikomis, nuosekli įvykių pavadinimų strategija yra gyvybiškai svarbi aiškiam bendravimui ir derinimui. Šabloniniai literalo tipai gali priversti laikytis šių šablonų, užtikrindami, kad įvykių kūrėjai ir vartotojai laikytųsi vieningos sutarties.

// TypeScript



type EventDomain = "USER" | "PRODUCT" | "ORDER" | "ANALYTICS";


type EventAction = "CREATED" | "UPDATED" | "DELETED" | "VIEWED" | "SENT" | "RECEIVED";


type EventTarget = "ACCOUNT" | "ITEM" | "FULFILLMENT" | "REPORT";



// Apibrėžkite standartinį įvykio pavadinimo formatą: DOMAIN_ACTION_TARGET (pvz., USER_CREATED_ACCOUNT)


type SystemEvent = `${Uppercase}_${Uppercase}_${Uppercase}`;



function publishEvent(eventName: SystemEvent, payload: unknown) {


  console.log(`Skelbiamas įvykis: "${eventName}" su duomenimis:`, payload);


  // ... tikrasis įvykių skelbimo mechanizmas (pvz., pranešimų eilė) ...


}



publishEvent("USER_CREATED_ACCOUNT", { userId: "uuid-123", email: "test@example.com" }); // Teisinga


publishEvent("PRODUCT_UPDATED_ITEM", { productId: "item-456", newPrice: 99.99 }); // Teisinga



// Tipo klaida: įvykio pavadinimas neatitinka reikalaujamo šablono


// publishEvent("user_created_account", {}); // Neteisingas raidžių dydis


// publishEvent("ORDER_SHIPPED", {}); // Trūksta tikslinio sufikso, 'SHIPPED' nėra EventAction


// publishEvent("ADMIN_LOGGED_IN", {}); // 'ADMIN' nėra apibrėžtas EventDomain

Tai užtikrina, kad visi įvykiai atitiktų iš anksto nustatytą struktūrą, todėl derinimas, stebėjimas ir bendravimas tarp komandų tampa žymiai sklandesnis, nepriklausomai nuo kūrėjo gimtosios kalbos ar kodavimo stiliaus pageidavimų.

3. CSS pagalbinių klasių šablonų priverstinis taikymas vartotojo sąsajos kūrime

Dizaino sistemoms ir į pagalbines klases orientuotoms CSS sistemoms klasių pavadinimų taisyklės yra labai svarbios palaikomumui ir mastelio keitimui. TypeScript gali padėti jas užtikrinti kūrimo metu, mažindamas tikimybę, kad dizaineriai ir kūrėjai naudos nenuoseklius klasių pavadinimus.

// TypeScript



type SpacingSize = "xs" | "sm" | "md" | "lg" | "xl";


type Direction = "top" | "bottom" | "left" | "right" | "x" | "y" | "all";


type SpacingProperty = "margin" | "padding";



// Pavyzdys: klasė paraštei ar atitraukimui tam tikra kryptimi su konkrečiu dydžiu


// pvz., "m-t-md" (margin-top-medium) arba "p-x-lg" (padding-x-large)


type SpacingClass = `${Lowercase}-${Lowercase}-${Lowercase}`;



function applyCssClass(elementId: string, className: SpacingClass) {


  const element = document.getElementById(elementId);


  if (element) {


    element.classList.add(className);
    console.log(`Pritaikyta klasė '${className}' elementui '${elementId}'`);


  } else {


    console.warn(`Elementas su ID '${elementId}' nerastas.`);


  }


}



applyCssClass("my-header", "m-t-md"); // Teisinga


applyCssClass("product-card", "p-x-lg"); // Teisinga


applyCssClass("main-content", "m-all-xl"); // Teisinga



// Tipo klaida: klasė neatitinka šablono


// applyCssClass("my-footer", "margin-top-medium"); // Neteisingas skyriklis ir pilnas žodis vietoje trumpinio


// applyCssClass("sidebar", "m-center-sm"); // 'center' nėra teisingas Direction literalas

Šis modelis neleidžia atsitiktinai naudoti neteisingos ar su klaidomis parašytos CSS klasės, didinant vartotojo sąsajos nuoseklumą ir mažinant vizualines klaidas visame produkto vartotojo sąsajoje, ypač kai keli kūrėjai prisideda prie stiliaus logikos.

4. Internacionalizavimo (i18n) raktų valdymas ir patvirtinimas

Pasaulinėse programose lokalizacijos raktų valdymas gali tapti neįtikėtinai sudėtingas, dažnai apimantis tūkstančius įrašų keliomis kalbomis. Šabloniniai literalo tipai gali padėti užtikrinti hierarchinius ar aprašomuosius raktų šablonus, užtikrinant, kad raktai būtų nuoseklūs ir lengviau prižiūrimi.

// TypeScript



type PageKey = "home" | "dashboard" | "settings" | "auth";


type SectionKey = "header" | "footer" | "sidebar" | "form" | "modal" | "navigation";


type MessageType = "label" | "placeholder" | "button" | "error" | "success" | "heading";



// Apibrėžkite i18n raktų šabloną: page.section.messageType.descriptor


type I18nKey = `${PageKey}.${SectionKey}.${MessageType}.${string}`;



function translate(key: I18nKey, params?: Record): string {


  console.log(`Verčiamas raktas: "${key}" su parametrais:`, params);


  // Tikroje programoje tai apimtų vertimo gavimą iš vertimo paslaugos ar vietinio žodyno


  let translatedString = `[${key}_translated]`;


  if (params) {


    for (const p in params) {


      translatedString = translatedString.replace(`{${p}}`, params[p]);


    }


  }


  return translatedString;


}



console.log(translate("home.header.heading.welcomeUser", { user: "Global Traveler" })); // Teisinga


console.log(translate("dashboard.form.label.username")); // Teisinga


console.log(translate("auth.modal.button.login")); // Teisinga



// Tipo klaida: raktas neatitinka apibrėžto šablono


// console.log(translate("home_header_greeting_welcome")); // Neteisingas skyriklis (naudojamas pabraukimo brūkšnys vietoj taško)


// console.log(translate("users.profile.label.email")); // 'users' nėra teisingas PageKey


// console.log(translate("settings.navbar.button.save")); // 'navbar' nėra teisingas SectionKey (turėtų būti 'navigation' arba 'sidebar')

Tai užtikrina, kad lokalizacijos raktai būtų nuosekliai struktūrizuoti, supaprastinant naujų vertimų pridėjimo ir esamų palaikymo procesą įvairiose kalbose ir lokalėse. Tai apsaugo nuo dažnų klaidų, tokių kaip rašybos klaidos raktuose, kurios gali lemti neišverstas eilutes vartotojo sąsajoje, o tai yra erzinanti patirtis tarptautiniams vartotojams.

Pažangios technikos su infer

Tikroji infer raktinio žodžio galia atsiskleidžia sudėtingesniuose scenarijuose, kai reikia išgauti kelias eilutės dalis, jas derinti ar dinamiškai transformuoti. Tai leidžia kurti labai lanksčią ir galingą tipų lygio analizę.

Kelių segmentų išgavimas (rekursyvi analizė)

Galite naudoti infer rekursyviai, kad analizuotumėte sudėtingas eilučių struktūras, tokias kaip keliai ar versijų numeriai:

// TypeScript



type SplitPath = 


  T extends `${infer Head}/${infer Tail}`


    ? [Head, ...SplitPath] 


    : T extends '' ? [] : [T];



type PathSegments1 = SplitPath<"api/v1/users/123">


// PathSegments1 yra ["api", "v1", "users", "123"]



type PathSegments2 = SplitPath<"product-images/large">


// PathSegments2 yra ["product-images", "large"]



type SingleSegment = SplitPath<"root">


// SingleSegment yra ["root"]



type EmptySegments = SplitPath<"">


// EmptySegments yra []

Šis rekursyvus sąlyginis tipas parodo, kaip galite išanalizuoti eilutės kelią į jo segmentų kortelę (tuple), suteikdami smulkiagrūdę tipų kontrolę URL maršrutams, failų sistemos keliams ar bet kuriam kitam pasviruoju brūkšniu atskirtam identifikatoriui. Tai neįtikėtinai naudinga kuriant tipų saugumo požiūriu patikimas maršrutizavimo sistemas ar duomenų prieigos sluoksnius.

Išvestų dalių transformavimas ir rekonstravimas

Taip pat galite taikyti pagalbinius tipus išvestoms dalims ir rekonstruoti naują eilutės literalo tipą:

// TypeScript



type ConvertToCamelCase = 


  T extends `${infer FirstPart}_${infer SecondPart}`


    ? `${Uncapitalize}${Capitalize}`


    : Uncapitalize;



type UserDataField = ConvertToCamelCase<"user_id">


// UserDataField yra "userId"



type OrderStatusField = ConvertToCamelCase<"order_status">


// OrderStatusField yra "orderStatus"



type SingleWordField = ConvertToCamelCase<"firstName">


// SingleWordField yra "firstName"



type RawApiField = 


  T extends `API_${infer Method}_${infer Resource}`


    ? `${Lowercase}-${Lowercase}`


    : never;



type GetUsersPath = RawApiField<"API_GET_USERS">


// GetUsersPath yra "get-users"



type PostProductsPath = RawApiField<"API_POST_PRODUCTS">


// PostProductsPath yra "post-products"


// type InvalidApiPath = RawApiField<"API_FETCH_DATA">; // Klaida, nes griežtai neatitinka 3 dalių struktūros, jei `DATA` nėra `Resource`


type InvalidApiFormat = RawApiField<"API_USERS">


// InvalidApiFormat yra never (nes po API_ yra tik dvi dalys, o ne trys)

Tai parodo, kaip galite paimti eilutę, atitinkančią vieną konvenciją (pvz., snake_case iš API), ir automatiškai sugeneruoti tipą jos atvaizdavimui kitoje konvencijoje (pvz., camelCase jūsų programai), visa tai atliekant kompiliavimo metu. Tai neįkainojama, kai reikia susieti išorines duomenų struktūras su vidinėmis be rankinių tipų tvirtinimų ar vykdymo laiko klaidų.

Geriausios praktikos ir svarstymai pasaulinėms komandoms

Nors TypeScript eilučių manipuliavimo tipai yra galingi, svarbu juos naudoti apgalvotai. Štai keletas geriausių praktikų, kaip juos įtraukti į savo pasaulinius kūrimo projektus:

Išvada

TypeScript šabloniniai literalo tipai, suporuoti su vidiniais eilučių manipuliavimo įrankiais, tokiais kaip Uppercase, Lowercase, Capitalize ir Uncapitalize, reiškia didelį šuolį į priekį tipų saugumo požiūriu patikimame eilučių tvarkyme. Jie paverčia tai, kas anksčiau buvo vykdymo laiko problema – eilučių formatavimas ir patvirtinimas – į kompiliavimo laiko garantiją, iš esmės gerindami jūsų kodo patikimumą.

Pasaulinėms kūrėjų komandoms, dirbančioms su sudėtingais, bendradarbiavimo projektais, šių modelių pritaikymas siūlo apčiuopiamą ir gilų pranašumą:

Įvaldę šias galingas funkcijas, kūrėjai gali kurti atsparesnes, lengviau prižiūrimas ir nuspėjamas programas. Pasinaudokite TypeScript šabloninių eilučių modeliais, kad pakeltumėte savo eilučių manipuliavimą į naują tipų saugumo ir tikslumo lygį, leisdami savo pasaulinėms kūrimo pastangoms klestėti su didesniu pasitikėjimu ir efektyvumu. Tai yra esminis žingsnis link tikrai patikimų ir pasauliniu mastu keičiamų programinės įrangos sprendimų kūrimo.