Avancerade TypeScript-mönster: Bemästra villkorliga och mappade typer

Styrkan med TypeScript ligger i dess förmåga att tillhandahålla stark typning, vilket gör att du kan fånga fel tidigt och skriva mer underhållbar kod. Medan grundläggande typer som string, number och boolean är fundamentala, låser TypeScript's avancerade funktioner som villkorliga och mappade typer upp en ny dimension av flexibilitet och typsäkerhet. Denna omfattande guide kommer att djupdyka i dessa kraftfulla koncept och utrusta dig med kunskapen för att skapa verkligt dynamiska och anpassningsbara TypeScript-applikationer.

Vad är villkorliga typer?

Villkorliga typer låter dig definiera typer som beror på ett villkor, liknande en ternär operator i JavaScript (condition ? trueValue : falseValue). De gör det möjligt för dig att uttrycka komplexa typrelationer baserat på om en typ uppfyller ett specifikt villkor.

Syntax

Den grundläggande syntaxen för en villkorlig typ är:

            T extends U ? X : Y
            

              
                Copy
              
            
          

• T: Typen som kontrolleras.
• U: Typen att kontrollera mot.
• extends: Nyckelordet som indikerar en subtypsrelation.
• X: Typen som används om T är tilldelningsbar till U.
• Y: Typen som används om T inte är tilldelningsbar till U.

I grund och botten, om T extends U utvärderas till sant, löses typen till X; annars löses den till Y.

Praktiska exempel

1. Bestämma typen på en funktionsparameter

Låt oss säga att du vill skapa en typ som avgör om en funktionsparameter är en sträng eller ett nummer:

            type ParamType<T> = T extends string ? string : number;

function processValue(value: ParamType<string | number>): void {
  if (typeof value === "string") {
    console.log("Value is a string:", value);
  } else {
    console.log("Value is a number:", value);
  }
}

processValue("hello"); // Output: Value is a string: hello
processValue(123);     // Output: Value is a number: 123
            

              
                Copy
              
            
          

I detta exempel är ParamType<T> en villkorlig typ. Om T är en sträng, löses typen till string; annars löses den till number. Funktionen processValue accepterar antingen en sträng eller ett nummer baserat på denna villkorliga typ.

2. Extrahera returtyp baserat på indatatyp

Föreställ dig ett scenario där du har en funktion som returnerar olika typer baserat på indata. Villkorliga typer kan hjälpa dig att definiera den korrekta returtypen:

            interface StringProcessor {
  process(input: string): number;
}

interface NumberProcessor {
  process(input: number): string;
}

type Processor<T> = T extends string ? StringProcessor : NumberProcessor;

function createProcessor<T extends string | number>(input: T): Processor<T> {
  if (typeof input === "string") {
    return { process: (input: string) => input.length } as Processor<T>;
  } else {
    return { process: (input: number) => input.toString() } as Processor<T>;
  }
}

const stringProcessor = createProcessor("example");
const numberProcessor = createProcessor(42);

console.log(stringProcessor.process("example")); // Output: 7
console.log(numberProcessor.process(42));    // Output: "42"
            

              
                Copy
              
            
          

Här väljer Processor<T>-typen villkorligt antingen StringProcessor eller NumberProcessor baserat på typen av indata. Detta säkerställer att createProcessor-funktionen returnerar rätt typ av processorobjekt.

3. Diskriminerade unioner

Villkorliga typer är extremt kraftfulla när man arbetar med diskriminerade unioner. En diskriminerad union är en unionstyp där varje medlem har en gemensam, singleton-typegenskap (diskriminanten). Detta gör att du kan avgränsa typen baserat på värdet av den egenskapen.

            interface Square {
  kind: "square";
  size: number;
}

interface Circle {
  kind: "circle";
  radius: number;
}

type Shape = Square | Circle;

type Area<T extends Shape> = T extends { kind: "square" } ? number : string;

function calculateArea(shape: Shape): Area<typeof shape> {
  if (shape.kind === "square") {
    return shape.size * shape.size;
  } else {
    return Math.PI * shape.radius * shape.radius;
  }
}

const mySquare: Square = { kind: "square", size: 5 };
const myCircle: Circle = { kind: "circle", radius: 3 };

console.log(calculateArea(mySquare)); // Output: 25
console.log(calculateArea(myCircle)); // Output: 28.274333882308138
            

              
                Copy
              
            
          

I detta exempel är Shape-typen en diskriminerad union. Area<T>-typen använder en villkorlig typ för att avgöra om formen är en kvadrat eller en cirkel, och returnerar en number för kvadrater och en string för cirklar (även om man i ett verkligt scenario troligen skulle vilja ha konsekventa returtyper, visar detta principen).

Viktiga lärdomar om villkorliga typer

• Möjliggör definition av typer baserat på villkor.
• Förbättrar typsäkerheten genom att uttrycka komplexa typrelationer.
• Är användbara för att arbeta med funktionsparametrar, returtyper och diskriminerade unioner.

Vad är mappade typer?

Mappade typer erbjuder ett sätt att omvandla befintliga typer genom att mappa över deras egenskaper. De låter dig skapa nya typer baserade på egenskaperna hos en annan typ, och tillämpa modifieringar som att göra egenskaper valfria, skrivskyddade eller ändra deras typer.

Syntax

Den allmänna syntaxen för en mappad typ är:

            type NewType<T> = {
  [K in keyof T]: ModifiedType;
};
            

              
                Copy
              
            
          

• T: Indatatypen.
• keyof T: En typoperator som returnerar en union av alla egenskapsnycklar i T.
• K in keyof T: Itererar över varje nyckel i keyof T, och tilldelar varje nyckel till typvariabeln K.
• ModifiedType: Typen som varje egenskap kommer att mappas till. Detta kan inkludera villkorliga typer eller andra typomvandlingar.

Praktiska exempel

1. Göra egenskaper valfria

Du kan använda en mappad typ för att göra alla egenskaper i en befintlig typ valfria:

            interface User {
  id: number;
  name: string;
  email: string;
}

type PartialUser = {
  [K in keyof User]?: User[K];
};

const partialUser: PartialUser = {
  name: "John Doe",
}; // Giltigt, eftersom 'id' och 'email' är valfria

            

              
                Copy
              
            
          

Här är PartialUser en mappad typ som itererar över nycklarna i User-interfacet. För varje nyckel K gör den egenskapen valfri genom att lägga till ?-modifieraren. User[K] hämtar typen för egenskapen K från User-interfacet.

2. Göra egenskaper skrivskyddade

På liknande sätt kan du göra alla egenskaper i en befintlig typ skrivskyddade:

            interface Product {
  id: number;
  name: string;
  price: number;
}

type ReadonlyProduct = {
  readonly [K in keyof Product]: Product[K];
};

const readonlyProduct: ReadonlyProduct = {
  id: 123,
  name: "Example Product",
  price: 25.00,
};

// readonlyProduct.price = 30.00; // Fel: Kan inte tilldela till 'price' eftersom det är en skrivskyddad egenskap.
            

              
                Copy
              
            
          

I detta fall är ReadonlyProduct en mappad typ som lägger till readonly-modifieraren till varje egenskap i Product-interfacet.

3. Omvandla egenskapstyper

Mappade typer kan också användas för att omvandla egenskapernas typer. Du kan till exempel skapa en typ som konverterar alla strängegenskaper till nummer:

            interface Config {
  apiUrl: string;
  timeout: string;
  maxRetries: number;
}

type NumericConfig = {
  [K in keyof Config]: Config[K] extends string ? number : Config[K];
};

const numericConfig: NumericConfig = {
  apiUrl: 123, // Måste vara ett nummer på grund av mappningen
  timeout: 456, // Måste vara ett nummer på grund av mappningen
  maxRetries: 3,
};

            

              
                Copy
              
            
          

Detta exempel demonstrerar användningen av en villkorlig typ inuti en mappad typ. För varje egenskap K kontrollerar den om typen av Config[K] är en sträng. Om den är det, mappas typen till number; annars förblir den oförändrad.

4. Ommöblering av nycklar (sedan TypeScript 4.1)

TypeScript 4.1 introducerade möjligheten att möblera om nycklar inom mappade typer med hjälp av nyckelordet as. Detta låter dig skapa nya typer med olika egenskapsnamn baserat på den ursprungliga typen.

            interface Event {
  eventId: string;
  eventName: string;
  eventDate: Date;
}

type TransformedEvent = {
  [K in keyof Event as `new${Capitalize<string&K>}`]: Event[K];
};

// Resultat:
// {
//   newEventId: string;
//   newEventName: string;
//   newEventDate: Date;
// }

//Capitalize-funktion som används för att göra första bokstaven stor
type Capitalize<S extends string> = Uppercase<string&S> extends never ? string :  `$Capitalize<S>`;

//Användning med ett faktiskt objekt
const myEvent: TransformedEvent = {
    newEventId: "123",
    newEventName: "New Name",
    newEventDate: new Date()
};

            

              
                Copy
              
            
          

Här möblerar TransformedEvent-typen om varje nyckel K till en ny nyckel med prefixet "new" och stor första bokstav. `Capitalize`-hjälpfunktionen säkerställer att den första bokstaven i nyckeln blir stor. `string & K`-intersectionen säkerställer att vi bara hanterar strängnycklar och att vi får rätt bokstavliga typ från K. Ommöblering av nycklar öppnar upp kraftfulla möjligheter för att omvandla och anpassa typer till specifika behov. Detta gör att du kan byta namn på, filtrera eller modifiera nycklar baserat på komplex logik.

Viktiga lärdomar om mappade typer

• Möjliggör omvandling av befintliga typer genom att mappa över deras egenskaper.
• Tillåter att göra egenskaper valfria, skrivskyddade eller ändra deras typer.
• Är användbara för att skapa nya typer baserade på egenskaperna hos en annan typ.
• Ommöblering av nycklar (introducerat i TypeScript 4.1) erbjuder ännu större flexibilitet i typomvandlingar.

Kombinera villkorliga och mappade typer

Exempel: Filtrera egenskaper efter typ

Låt oss säga att du vill skapa en typ som filtrerar egenskaperna hos ett objekt baserat på deras typ. Du kanske till exempel vill extrahera endast strängegenskaperna från ett objekt.

            interface Data {
  name: string;
  age: number;
  city: string;
  country: string;
  isEmployed: boolean;
}

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

type StringData = StringProperties<Data>;

// Resultat:
// {
//   name: string;
//   city: string;
//   country: string;
// }

const stringData: StringData = {
  name: "John",
  city: "New York",
  country: "USA",
};

            

              
                Copy
              
            
          

I detta exempel använder StringProperties<T>-typen en mappad typ med ommöblering av nycklar och en villkorlig typ. För varje egenskap K kontrollerar den om typen av T[K] är en sträng. Om den är det, behålls nyckeln; annars mappas den till never, vilket effektivt filtrerar bort den. never som en mappad typnyckel tar bort den från den resulterande typen. Detta säkerställer att endast strängegenskaper inkluderas i StringData-typen.

Hjälptyper (Utility Types) i TypeScript

TypeScript tillhandahåller flera inbyggda hjälptyper (utility types) som utnyttjar villkorliga och mappade typer för att utföra vanliga typomvandlingar. Att förstå dessa hjälptyper kan avsevärt förenkla din kod och förbättra typsäkerheten.

Vanliga hjälptyper

• Partial<T>: Gör alla egenskaper i T valfria.
• Readonly<T>: Gör alla egenskaper i T skrivskyddade.
• Required<T>: Gör alla egenskaper i T obligatoriska. (tar bort ?-modifieraren)
• Pick<T, K extends keyof T>: Väljer en uppsättning egenskaper K från T.
• Omit<T, K extends keyof T>: Tar bort en uppsättning egenskaper K från T.
• Record<K extends keyof any, T>: Konstruerar en typ med en uppsättning egenskaper K av typen T.
• Exclude<T, U>: Exkluderar från T alla typer som är tilldelningsbara till U.
• Extract<T, U>: Extraherar från T alla typer som är tilldelningsbara till U.
• NonNullable<T>: Exkluderar null och undefined från T.
• Parameters<T>: Hämtar parametrarna för en funktionstyp T i en tuppel.
• ReturnType<T>: Hämtar returtypen för en funktionstyp T.
• InstanceType<T>: Hämtar instanstypen för en konstruktorfunktionstyp T.
• ThisType<T>: Fungerar som en markör för kontextuell this-typ.

Dessa hjälptyper är byggda med villkorliga och mappade typer, vilket visar kraften och flexibiliteten hos dessa avancerade TypeScript-funktioner. Till exempel är Partial<T> definierad som:

            type Partial<T> = {
  [P in keyof T]?: T[P];
};
            

              
                Copy
              
            
          

Bästa praxis för att använda villkorliga och mappade typer

Även om villkorliga och mappade typer är kraftfulla kan de också göra din kod mer komplex om de inte används varsamt. Här är några bästa praxis att ha i åtanke:

• Håll det enkelt: Undvik överdrivet komplexa villkorliga och mappade typer. Om en typdefinition blir för invecklad, överväg att bryta ner den i mindre, mer hanterbara delar.
• Använd meningsfulla namn: Ge dina villkorliga och mappade typer beskrivande namn som tydligt indikerar deras syfte.
• Dokumentera dina typer: Lägg till kommentarer för att förklara logiken bakom dina villkorliga och mappade typer, särskilt om de är komplexa.
• Utnyttja hjälptyper: Innan du skapar en anpassad villkorlig eller mappad typ, kontrollera om en inbyggd hjälptyp kan uppnå samma resultat.
• Testa dina typer: Se till att dina villkorliga och mappade typer beter sig som förväntat genom att skriva enhetstester som täcker olika scenarier.
• Tänk på prestanda: Komplexa typberäkningar kan påverka kompileringstiderna. Var medveten om prestandaimplikationerna av dina typdefinitioner.

Slutsats

Villkorliga och mappade typer är väsentliga verktyg för att bemästra TypeScript. De gör det möjligt för dig att skapa mycket flexibla, typsäkra och underhållbara applikationer som anpassar sig till komplexa datastrukturer och dynamiska krav. Genom att förstå och tillämpa de koncept som diskuteras i denna guide kan du låsa upp den fulla potentialen hos TypeScript och skriva mer robust och skalbar kod. När du fortsätter att utforska TypeScript, kom ihåg att experimentera med olika kombinationer av villkorliga och mappade typer för att upptäcka nya sätt att lösa utmanande typproblem. Möjligheterna är verkligen oändliga.