TypeScript Mapped Types: Bemästra objektransformation och egenskapsmodifiering

I det ständigt föränderliga landskapet av mjukvaruutveckling är robusta typsystem avgörande för att bygga underhållbara, skalbara och pålitliga applikationer. TypeScript, med sin kraftfulla typinferens och avancerade funktioner, har blivit ett oumbärligt verktyg för utvecklare världen över. Bland dess mest potenta funktioner finns Mapped Types, en sofistikerad mekanism som gör det möjligt för oss att transformera befintliga objekttyper till nya. Detta blogginlägg kommer att djupdyka i världen av TypeScript Mapped Types, utforska deras grundläggande koncept, praktiska tillämpningar och hur de ger utvecklare möjlighet att elegant hantera objektransformationer och egenskapsmodifieringar.

Förstå kärnkonceptet bakom Mapped Types

I grunden är en Mapped Type ett sätt att skapa nya typer genom att iterera över egenskaperna hos en befintlig typ. Tänk på det som en loop för typer. För varje egenskap i den ursprungliga typen kan du tillämpa en transformation på dess nyckel, dess värde, eller båda. Detta öppnar upp ett stort antal möjligheter för att generera nya typdefinitioner baserat på befintliga, utan manuell repetition.

Den grundläggande syntaxen för en Mapped Type involverar en { [P in K]: T }-struktur, där:

• P: Representerar namnet på egenskapen som itereras över.
• in K: Detta är den avgörande delen, som anger att P kommer att anta varje nyckel från typen K (vilket typiskt är en union av strängliteraler eller en keyof-typ).
• T: Definierar typen av värdet för egenskapen P i den nya typen.

Låt oss börja med en enkel illustration. Föreställ dig att du har ett objekt som representerar användardata, och du vill skapa en ny typ där alla egenskaper är valfria. Detta är ett vanligt scenario, till exempel när du bygger konfigurationsobjekt eller när du implementerar partiella uppdateringar.

Exempel 1: Göra alla egenskaper valfria

Betrakta denna bas-typ:

            
type User = {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
};

            

              
                Copy
              
            
          

Vi kan skapa en ny typ, OptionalUser, där alla dessa egenskaper är valfria med hjälp av en Mapped Type:

            
type OptionalUser = {
  [P in keyof User]?: User[P];
};

            

              
                Copy
              
            
          

Låt oss bryta ner detta:

• keyof User: Detta genererar en union av nycklarna för User-typen (t.ex. 'id' | 'name' | 'email' | 'isActive').
• P in keyof User: Detta itererar över varje nyckel i unionen.
• ?: Detta är modifieraren som gör egenskapen valfri.
• User[P]: Detta är en uppslagstyp. För varje nyckel P hämtar den motsvarande värdetypen från den ursprungliga User-typen.

Den resulterande OptionalUser-typen skulle se ut så här:

            
{
  id?: number;
  name?: string;
  email?: string;
  isActive?: boolean;
}

            

              
                Copy
              
            
          

Detta är otroligt kraftfullt. Istället för att manuellt omdefiniera varje egenskap med ett ?, har vi genererat typen dynamiskt. Denna princip kan utökas för att skapa många andra hjälptyper.

Vanliga egenskapsmodifierare i Mapped Types

Mapped Types handlar inte bara om att göra egenskaper valfria. De tillåter dig att tillämpa olika modifierare på egenskaperna i den resulterande typen. De vanligaste inkluderar:

• Valfrihet: Lägga till eller ta bort ?-modifieraren.
• Endast läsbar: Lägga till eller ta bort readonly-modifieraren.
• Nullbarhet/Icke-nullbarhet: Lägga till eller ta bort | null eller | undefined.

Exempel 2: Skapa en endast läsbar version av en typ

Liknande att göra egenskaper valfria, kan vi skapa en ReadonlyUser-typ:

            
type ReadonlyUser = {
  readonly [P in keyof User]: User[P];
};

            

              
                Copy
              
            
          

Detta kommer att producera:

            
{
  readonly id: number;
  readonly name: string;
  readonly email: string;
  readonly isActive: boolean;
}

            

              
                Copy
              
            
          

Detta är oerhört användbart för att säkerställa att vissa datastrukturer, när de väl har skapats, inte kan muteras, vilket är en grundläggande princip för att bygga robusta, förutsägbara system, särskilt i samtidiga miljöer eller när man arbetar med immuterbara datamönster som är populära i funktionella programmeringsparadigmer som antagits av många internationella utvecklingsteam.

Exempel 3: Kombinera valfrihet och endast läsbar

Vi kan kombinera modifierare. Till exempel en typ där egenskaper är både valfria och endast läsbar:

            
type OptionalReadonlyUser = {
  readonly [P in keyof User]?: User[P];
};

            

              
                Copy
              
            
          

Detta resulterar i:

            
{
  readonly id?: number;
  readonly name?: string;
  readonly email?: string;
  readonly isActive?: boolean;
}

            

              
                Copy
              
            
          

Ta bort modifierare med Mapped Types

Vad händer om du vill *ta bort* en modifierare? TypeScript tillåter detta genom syntaxen -? och -readonly inom Mapped Types. Detta är särskilt kraftfullt när man arbetar med befintliga hjälptyper eller komplexa typkompositioner.

Låt oss säga att du har en Partial<T>-typ (som är inbyggd och gör alla egenskaper valfria), och du vill skapa en typ som är densamma som Partial<T> men där alla egenskaper görs obligatoriska igen.

            
type Mandatory<T> = {
  -?: T extends object ? T[keyof T] : never;
};

type FullyPopulatedUser = Mandatory<Partial<User>>;

            

              
                Copy
              
            
          

Detta verkar kontraintuitivt. Låt oss analysera det:

Partial<User> är ekvivalent med vår OptionalUser. Nu vill vi göra dess egenskaper obligatoriska. Syntaxen -? tar bort den valfria modifieraren.

Ett mer direkt sätt att uppnå detta, utan att förlita sig på Partial först, är att helt enkelt ta den ursprungliga typen och göra den obligatorisk om den var valfri:

            
type MakeMandatory<T> = {
  -?: T;
};

type MandatoryUser = MakeMandatory<OptionalUser>;

            

              
                Copy
              
            
          

Detta kommer korrekt att återställa OptionalUser tillbaka till den ursprungliga User-typens struktur (alla egenskaper närvarande och obligatoriska).

På samma sätt, för att ta bort readonly-modifieraren:

            
type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

type MutableUser = Mutable<ReadonlyUser>;

            

              
                Copy
              
            
          

MutableUser kommer att vara ekvivalent med den ursprungliga User-typen, men dess egenskaper kommer inte att vara endast läsbar.

Nullbarhet och undefinierbarhet

Du kan också kontrollera nullbarhet. Till exempel, för att säkerställa att alla egenskaper är definitivt icke-nullbara:

            
type NonNullableValues<T> = {
  [P in keyof T]-?: NonNullable<T[P]>;
};

interface MaybeNull {
  name: string | null;
  age: number | undefined;
}

type DefiniteValues = NonNullableValues<MaybeNull>;
// type DefiniteValues = {
//   name: string;
//   age: number;
// }

            

              
                Copy
              
            
          

Här säkerställer -? att egenskaperna inte är valfria, och NonNullable<T[P]> tar bort null och undefined från värdetypen.

Transformera egenskapsnycklar

Mapped Types är otroligt mångsidiga, och de stannar inte bara vid att modifiera värden eller modifierare. Du kan också transformera nycklarna i en objekttyp. Det är här Mapped Types verkligen lyser i komplexa scenarier.

Exempel 4: Prefixera egenskapsnycklar

Anta att du vill skapa en ny typ där alla egenskaper i en befintlig typ har ett specifikt prefix. Detta kan vara användbart för namnutrymmen eller för att generera variationer av datastrukturer.

            
type Prefixed<T, Prefix extends string> = {
  [P in keyof T as `${Prefix}${Capitalize<string & P>}`]: T[P];
};

type OriginalConfig = {
  timeout: number;
  retries: number;
};

type PrefixedConfig = Prefixed<OriginalConfig, 'app'>;
// type PrefixedConfig = {
//   appTimeout: number;
//   appRetries: number;
// }

            

              
                Copy
              
            
          

Låt oss analysera nyckeltransformationen:

• P in keyof T: Itererar fortfarande över de ursprungliga nycklarna.
• as `${Prefix}${Capitalize<string & P>}`: Detta är klausulen för nyckelomkartning.
• `${Prefix}${...}`: Detta använder mallsträngstyper för att konstruera det nya nyckelnamnet genom att sammanfoga den angivna Prefix med det transformerade egenskapsnamnet.
• Capitalize<string & P>: Detta är ett vanligt mönster för att säkerställa att egenskapens namn P behandlas som en sträng och sedan versaliseras. Vi använder string & P för att korsa P med string, vilket säkerställer att TypeScript behandlar det som en strängtyp, vilket är nödvändigt för Capitalize.

Detta exempel visar hur du dynamiskt kan byta namn på egenskaper baserat på befintliga, en kraftfull teknik för att upprätthålla konsekvens över olika lager av en applikation eller vid integration med externa system som har specifika namngivningskonventioner.

Exempel 5: Filtrera egenskaper

Vad händer om du bara vill inkludera egenskaper som uppfyller ett visst villkor? Detta kan uppnås genom att kombinera Mapped Types med Conditional Types och as-klausulen för nyckelomkartning, ofta för att filtrera bort egenskaper.

            
type OnlyStrings<T> = {
  [P in keyof T as T[P] extends string ? P : never]: T[P];
};

interface MixedData {
  name: string;
  age: number;
  city: string;
  isActive: boolean;
}

type StringOnlyData = OnlyStrings<MixedData>;
// type StringOnlyData = {
//   name: string;
//   city: string;
// }

            

              
                Copy
              
            
          

I det här fallet:

• T[P] extends string ? P : never: För varje egenskap P kontrollerar vi om dess värdetyp (T[P]) kan tilldelas till string.
• Om det är en sträng behålls nyckeln P.
• Om det inte är en sträng mappas den till never. När en nyckel mappas till never tas den effektivt bort från den resulterande objekttypen.

Denna teknik är ovärderlig för att skapa mer specifika typer från bredare, till exempel att extrahera endast konfigurationsinställningar som är av en viss typ, eller att separera datafält efter deras natur.

Exempel 6: Transformera nycklar till en annan form

Du kan också transformera nycklar till helt andra typer av nycklar, till exempel att omvandla strängnycklar till nummer, eller vice versa, även om detta är mindre vanligt för direkt objektmanipulering och mer för avancerad typ-nivåprogrammering.

Överväg att omvandla strängnycklar till en union av strängliteraler och sedan använda det som bas för en ny typ. Även om det inte direkt transformerar ett objekts nycklar *inom* Mapped Typen på detta specifika sätt, visar det hur nycklar kan manipuleras.

Ett mer direkt exempel på nyckeltransformation kan vara att mappa nycklar till deras versaliserade versioner:

            
type UppercaseKeys<T> = {
  [P in keyof T as Uppercase<string & P>]: T[P];
};

type LowercaseData = {
  firstName: string;
  lastName: string;
};

type UppercaseData = UppercaseKeys<LowercaseData>;
// type UppercaseData = {
//   FIRSTNAME: string;
//   LASTNAME: string;
// }

            

              
                Copy
              
            
          

Detta använder as-klausulen för att transformera varje nyckel P till dess versaliserade motsvarighet.

Praktiska tillämpningar och verkliga scenarier

Mapped Types är inte bara teoretiska konstruktioner; de har betydande praktiska implikationer inom olika utvecklingsområden. Här är några vanliga scenarier där de är ovärderliga:

1. Bygga återanvändbara hjälptyper

Många vanliga typ-transformationer kan kapslas in i återanvändbara hjälptyper. Typskripts standardbibliotek tillhandahåller redan utmärkta exempel som Partial<T>, Readonly<T>, Record<K, T> och Pick<T, K>. Du kan definiera dina egna anpassade hjälptyper med Mapped Types för att effektivisera din utvecklingsprocess.

Till exempel, en typ som mappar alla egenskaper till funktioner som accepterar det ursprungliga värdet och returnerar ett nytt värde:

            
type Mappers<T> = {
  [P in keyof T]: (value: T[P]) => T[P];
};

interface ProductInfo {
  name: string;
  price: number;
}

type ProductMappers = Mappers<ProductInfo>;
// type ProductMappers = {
//   name: (value: string) => string;
//   price: (value: number) => number;
// }

            

              
                Copy
              
            
          

2. Dynamisk formulärhantering och validering

Inom frontend-utveckling, särskilt med ramverk som React eller Angular (även om exemplen här är ren TypeScript), är hantering av formulär och deras valideringsstatus en vanlig uppgift. Mapped Types kan hjälpa till att hantera valideringsstatusen för varje formulärfält.

Överväg ett formulär med fält som kan vara 'pristine', 'touched', 'valid' eller 'invalid'.

            
type FormFieldState = 'pristine' | 'touched' | 'dirty' | 'valid' | 'invalid';

type FormState<T> = {
  [P in keyof T]: FormFieldState;
};

interface UserForm {
  username: string;
  email: string;
  password: string;
}

type UserFormState = FormState<UserForm>;
// type UserFormState = {
//   username: FormFieldState;
//   email: FormFieldState;
//   password: FormFieldState;
// }

            

              
                Copy
              
            
          

Detta gör att du kan skapa en typ som speglar din formulärs datastruktur men istället spårar tillståndet för varje fält, vilket säkerställer konsekvens och typsäkerhet för din formulärhanteringslogik. Detta är särskilt fördelaktigt för internationella projekt där olika UI/UX-krav kan leda till komplexa formulärstillstånd.

3. API-svartransformation

Vid hantering av API:er matchar svar data inte alltid perfekt dina interna domänmodeller. Mapped Types kan hjälpa till att transformera API-svar till önskad form.

Föreställ dig ett API-svar som använder snake_case för nycklar, men din applikation föredrar camelCase:

            
// Anta att detta är den inkommande API-svarestypen
type ApiUserData = {
  user_id: number;
  first_name: string;
  last_name: string;
};

// Hjälp för att konvertera snake_case till camelCase för nycklar
type ToCamelCase<S extends string>: string = S extends `${infer T}_${infer U}`
  ? `${T}${Capitalize<U>}`
  : S;

type CamelCasedKeys<T> = {
  [P in keyof T as ToCamelCase<string & P>]: T[P];
};

type AppUserData = CamelCasedKeys<ApiUserData>;
// type AppUserData = {
//   userId: number;
//   firstName: string;
//   lastName: string;
// }

            

              
                Copy
              
            
          

Detta är ett mer avancerat exempel som använder en rekursiv villkorlig typ för strängmanipulering. Kärnbudskapet är att Mapped Types, när de kombineras med andra avancerade TypeScript-funktioner, kan automatisera komplexa datatransformationer, vilket sparar utvecklingstid och minskar risken för körtidsfel. Detta är avgörande för globala team som arbetar med olika backend-tjänster.

4. Förbättra enum-liknande strukturer

Medan TypeScript har `enum`s, vill du ibland ha mer flexibilitet eller härleda typer från objektbokstav som fungerar som enums.

            
const AppPermissions = {
  READ: 'read',
  WRITE: 'write',
  DELETE: 'delete',
  ADMIN: 'admin',
} as const;

type Permission = typeof AppPermissions[keyof typeof AppPermissions];
// type Permission = 'read' | 'write' | 'delete' | 'admin'

type UserPermissions = {
  [P in Permission]?: boolean;
};

type RolePermissions = {
  [P in Permission]: boolean;
};

const userPerms: UserPermissions = {
  read: true,
};

const adminRole: RolePermissions = {
  read: true,
  write: true,
  delete: true,
  admin: true,
};

            

              
                Copy
              
            
          

Här härleder vi först en unionstyp av alla möjliga behörighetssträngar. Sedan använder vi Mapped Types för att skapa typer där varje behörighet är en nyckel, vilket gör det möjligt för oss att specificera om en användare har den behörigheten (valfritt) eller om en roll kräver det (obligatoriskt). Detta mönster är vanligt i auktoriseringssystem världen över.

Utmaningar och överväganden

Även om Mapped Types är otroligt kraftfulla, är det viktigt att vara medveten om potentiella komplexiteter:

• Läsbarhet och komplexitet: Alltför komplexa Mapped Types kan bli svåra att läsa och förstå, särskilt för utvecklare som är nya inom dessa avancerade funktioner. Sträva alltid efter tydlighet och överväg att lägga till kommentarer eller dela upp komplexa transformationer.
• Prestandainverkan: Även om Typskripts typkontroll sker vid kompileringstid, kan extremt komplexa typmanipuleringar, i teorin, öka kompileringstiderna något. För de flesta applikationer är detta obetydligt, men det är en punkt att tänka på för mycket stora kodbaser eller mycket prestandakritiska byggprocesser.
• Felsökning: När en Mapped Type ger ett oväntat resultat kan felsökning ibland vara utmanande. Att använda TypeScript Playground eller IDE:ns typinspektionsfunktioner är avgörande för att förstå hur typer löses.
• Förståelse för keyof och uppslagstyper: Effektiv användning av Mapped Types bygger på en solid förståelse för keyof och uppslagstyper (T[P]). Se till att ditt team har en god förståelse för dessa grundläggande koncept.

Bästa metoder för användning av Mapped Types

För att utnyttja den fulla potentialen hos Mapped Types och samtidigt mildra deras utmaningar, överväg dessa bästa metoder:

• Börja enkelt: Börja med grundläggande valfrihet och endast läsbar transformationer innan du dyker ner i komplexa nyckelomkartningar eller villkorslogik.
• Använd inbyggda hjälptyper: Bekanta dig med Typskripts inbyggda hjälptyper som Partial, Readonly, Record, Pick, Omit och Exclude. De är ofta tillräckliga för vanliga uppgifter och är vältestade och förstådda.
• Skapa återanvändbara generiska typer: Kapsla in vanliga Mapped Type-mönster i generiska hjälptyper. Detta främjar konsekvens och minskar kodduplicering över ditt projekt och för globala team.
• Använd beskrivande namn: Namnge dina Mapped Types och generiska parametrar tydligt för att indikera deras syfte (t.ex. Optional<T>, DeepReadonly<T>, PrefixedKeys<T, Prefix>).
• Prioritera läsbarhet: Om en Mapped Type blir för komplicerad, överväg om det finns ett enklare sätt att uppnå samma resultat eller om det är värt den extra komplexiteten. Ibland är en något mer verbose men tydligare typdefinition att föredra.
• Dokumentera komplexa typer: För intrikata Mapped Types, lägg till JSDoc-kommentarer som förklarar deras funktionalitet, särskilt när du delar kod inom ett mångfaldigt internationellt team.
• Testa dina typer: Skriv typ-tester eller använd exempel för att verifiera att dina Mapped Types beter sig som förväntat. Detta är särskilt viktigt för komplexa transformationer där subtila buggar kan vara svåra att upptäcka.

Slutsats

TypeScript Mapped Types är en hörnsten i avancerad typmanipulering och erbjuder utvecklare oöverträffad kraft att transformera och anpassa objekttyper. Oavsett om du gör egenskaper valfria, endast läsbar, byter namn på dem eller filtrerar dem baserat på intrikata villkor, ger Mapped Types ett deklarativt, typsäkert och mycket uttrycksfullt sätt att hantera dina datastrukturer.

Genom att bemästra dessa tekniker kan du avsevärt förbättra kodåteranvändning, öka typsäkerheten och bygga mer robusta och underhållbara applikationer. Omfamna kraften hos Mapped Types för att lyfta din TypeScript-utveckling och bidra till att bygga högkvalitativa mjukvarulösningar för en global publik. När du samarbetar med utvecklare från olika regioner kan dessa avancerade typmönster fungera som ett gemensamt språk för att säkerställa kodkvalitet och konsekvens, och överbrygga potentiella kommunikationsluckor genom typsystemets stringens.