Betinget typeinferens: Mestrer 'infer'-nøgleordet i TypeScript

TypeScript's typesystem tilbyder kraftfulde værktøjer til at skabe robust og vedligeholdelsesvenlig kode. Blandt disse værktøjer skiller betingede typer sig ud som en alsidig mekanisme til at udtrykke komplekse typerelationer. Specifikt åbner infer-nøgleordet op for avancerede muligheder inden for betingede typer, hvilket muliggør sofistikeret typeudtrækning og -manipulation. Denne omfattende guide vil udforske finesserne ved infer, og give praktiske eksempler og indsigter for at hjælpe dig med at mestre dets brug.

Forståelse af betingede typer

Før vi dykker ned i infer, er det afgørende at forstå grundlaget for betingede typer. Betingede typer giver dig mulighed for at definere typer, der afhænger af en betingelse, svarende til en ternær operator i JavaScript. Syntaksen følger dette mønster:

            T extends U ? X : Y
            

              
                Copy
              
            
          

Her, hvis type T kan tildeles type U, er den resulterende type X; ellers er det Y.

Eksempel:

            type IsString<T> = T extends string ? true : false;

type StringCheck = IsString<string>; // type StringCheck = true
type NumberCheck = IsString<number>; // type NumberCheck = false
            

              
                Copy
              
            
          

Dette simple eksempel demonstrerer, hvordan betingede typer kan bruges til at bestemme, om en type er en streng eller ej. Dette koncept udvides til mere komplekse scenarier, hvilket baner vejen for infer-nøgleordet.

Introduktion af 'infer'-nøgleordet

infer-nøgleordet bruges inden for true-grenen af en betinget type til at introducere en typevariabel, der kan udledes fra den type, der kontrolleres. Dette giver dig mulighed for at udtrække specifikke dele af en type og bruge dem i den resulterende type.

Syntaks:

            T extends (infer R) ? X : Y
            

              
                Copy
              
            
          

I denne syntaks er R en typevariabel, der vil blive udledt fra strukturen af T. Hvis T matcher mønsteret, vil R indeholde den udledte type, og den resulterende type vil være X; ellers vil det være Y.

Grundlæggende eksempler på 'infer'-brug

1. Udledning af returtype for en funktion

En almindelig brugssag er at udlede returtypen for en funktion. Dette kan opnås med følgende betingede type:

            type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
            

              
                Copy
              
            
          

Forklaring:

• T extends (...args: any) => any: Denne begrænsning sikrer, at T er en funktion.
• (...args: any) => infer R: Dette mønster matcher en funktion og udleder returtypen som R.
• R : any: Hvis T ikke er en funktion, er den resulterende type any.

Eksempel:

            function greet(name: string): string {
  return `Hello, ${name}!`;
}

type GreetingReturnType = ReturnType<typeof greet>; // type GreetingReturnType = string

function calculate(a: number, b: number): number {
  return a + b;
}

type CalculateReturnType = ReturnType<typeof calculate>; // type CalculateReturnType = number

            

              
                Copy
              
            
          

Dette eksempel demonstrerer, hvordan ReturnType succesfuldt udtrækker returtyperne for funktionerne greet og calculate.

2. Udledning af array-elementtype

En anden hyppig brugssag er at udtrække elementtypen fra et array:

            type ElementType<T> = T extends (infer U)[] ? U : never;
            

              
                Copy
              
            
          

Forklaring:

• T extends (infer U)[]: Dette mønster matcher et array og udleder elementtypen som U.
• U : never: Hvis T ikke er et array, er den resulterende type never.

Eksempel:

            type StringArrayElement = ElementType<string[]>; // type StringArrayElement = string
type NumberArrayElement = ElementType<number[]>; // type NumberArrayElement = number
type MixedArrayElement = ElementType<(string | number)[]>; // type MixedArrayElement = string | number

type NotAnArray = ElementType<number>; // type NotAnArray = never
            

              
                Copy
              
            
          

Dette viser, hvordan ElementType korrekt udleder elementtypen for forskellige array-typer.

Avanceret 'infer'-brug

1. Udledning af parametre for en funktion

I lighed med udledning af returtypen kan du udlede parametrene for en funktion ved hjælp af infer og tupler:

            type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
            

              
                Copy
              
            
          

Forklaring:

• T extends (...args: any) => any: Denne begrænsning sikrer, at T er en funktion.
• (...args: infer P) => any: Dette mønster matcher en funktion og udleder parametertyperne som en tuple P.
• P : never: Hvis T ikke er en funktion, er den resulterende type never.

Eksempel:

            function logMessage(message: string, level: 'info' | 'warn' | 'error'): void {
  console.log(`[${level.toUpperCase()}] ${message}`);
}

type LogMessageParams = Parameters<typeof logMessage>; // type LogMessageParams = [message: string, level: "info" | "warn" | "error"]

function processData(data: any[], callback: (item: any) => void): void {
  data.forEach(callback);
}

type ProcessDataParams = Parameters<typeof processData>; // type ProcessDataParams = [data: any[], callback: (item: any) => void]
            

              
                Copy
              
            
          

Parameters udtrækker parametertyperne som en tuple, hvilket bevarer rækkefølgen og typerne af funktionens argumenter.

2. Udtrækning af egenskaber fra en objekttype

infer kan også bruges til at udtrække specifikke egenskaber fra en objekttype. Dette kræver en mere kompleks betinget type, men det muliggør kraftfuld typemanipulation.

            type PickByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};
            

              
                Copy
              
            
          

Forklaring:

• K in keyof T: Dette itererer over alle nøgler af type T.
• T[K] extends U ? K : never: Denne betingede type kontrollerer, om typen af egenskaben ved nøglen K (d.v.s. T[K]) kan tildeles type U. Hvis det er tilfældet, inkluderes nøglen K i den resulterende type; ellers udelukkes den ved hjælp af never.
• Hele konstruktionen skaber en ny objekttype med kun de egenskaber, hvis typer udvider U.

Eksempel:

            interface Person {
  name: string;
  age: number;
  city: string;
  country: string;
}


type StringProperties = PickByType<Person, string>; // type StringProperties = { name: string; city: string; country: string; }

type NumberProperties = PickByType<Person, number>; // type NumberProperties = { age: number; }

            

              
                Copy
              
            
          

PickByType giver dig mulighed for at oprette en ny type, der kun indeholder egenskaber af en specifik type fra en eksisterende type.

3. Udledning af indlejrede typer

infer kan kædes sammen og indlejres for at udtrække typer fra dybt indlejrede strukturer. Overvej for eksempel at udtrække typen af det inderste element i et indlejret array.

            type DeepArrayElement<T> = T extends (infer U)[] ? DeepArrayElement<U> : T;
            

              
                Copy
              
            
          

Forklaring:

• T extends (infer U)[]: Dette kontrollerer, om T er et array og udleder elementtypen som U.
• DeepArrayElement<U>: Hvis T er et array, kalder typen rekursivt DeepArrayElement med elementtypen U.
• T: Hvis T ikke er et array, returnerer typen T selv.

Eksempel:

            type NestedStringArray = string[][][];
type DeepString = DeepArrayElement<NestedStringArray>; // type DeepString = string

type MixedNestedArray = (number | string)[][][][];
type DeepMixed = DeepArrayElement<MixedNestedArray>; // type DeepMixed = string | number

type RegularNumber = DeepArrayElement<number>; // type RegularNumber = number
            

              
                Copy
              
            
          

Denne rekursive tilgang giver dig mulighed for at udtrække typen af elementet på det dybeste indlejringsniveau i et array.

Praktiske anvendelser

infer-nøgleordet finder anvendelse i forskellige scenarier, hvor dynamisk typemanipulation er påkrævet. Her er nogle praktiske eksempler:

1. Oprettelse af en type-sikker Event Emitter

Du kan bruge infer til at oprette en typesikker event emitter, der sikrer, at eventhandlere modtager den korrekte datatype.

            type EventMap = {
  'data': { value: string };
  'error': { message: string };
};

type EventName<T extends EventMap> = keyof T;

type EventData<T extends EventMap, K extends EventName<T>> = T[K];

type EventHandler<T extends EventMap, K extends EventName<T>> = (data: EventData<T, K>) => void;

class EventEmitter<T extends EventMap> {
  private listeners: { [K in EventName<T>]?: EventHandler<T, K>[] } = {};

  on<K extends EventName<T>>(event: K, handler: EventHandler<T, K>): void {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event]!.push(handler);
  }

  emit<K extends EventName<T>>(event: K, data: EventData<T, K>): void {
    this.listeners[event]?.forEach(handler => handler(data));
  }
}


const emitter = new EventEmitter<EventMap>();

emitter.on('data', (data) => {
  console.log(`Received data: ${data.value}`);
});

emitter.on('error', (error) => {
  console.error(`An error occurred: ${error.message}`);
});

emitter.emit('data', { value: 'Hello, world!' });

emitter.emit('error', { message: 'Something went wrong.' });

            

              
                Copy
              
            
          

I dette eksempel bruger EventData betingede typer og infer til at udtrække den datatype, der er knyttet til et specifikt eventnavn, hvilket sikrer, at eventhandlere modtager den korrekte type data.

2. Implementering af en typesikker reducer

Du kan udnytte infer til at oprette en typesikker reducer-funktion til state management.

            type Action<T extends string, P = undefined> = P extends undefined
  ? { type: T }
  : { type: T; payload: P };

type Reducer<S, A extends Action<string>> = (state: S, action: A) => S;

// Example Actions
type IncrementAction = Action<'INCREMENT'>;
type DecrementAction = Action<'DECREMENT'>;
type SetValueAction = Action<'SET_VALUE', number>;


// Example State
interface CounterState {
  value: number;
}

// Example Reducer
const counterReducer: Reducer<CounterState, IncrementAction | DecrementAction | SetValueAction> = (
  state: CounterState,
  action: IncrementAction | DecrementAction | SetValueAction
): CounterState => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, value: state.value + 1 };
    case 'DECREMENT':
      return { ...state, value: state.value - 1 };
    case 'SET_VALUE':
      return { ...state, value: action.payload };
    default:
      return state;
  }
};

// Usage
const initialState: CounterState = { value: 0 };
const newState1 = counterReducer(initialState, { type: 'INCREMENT' }); // newState1.value is 1
const newState2 = counterReducer(newState1, { type: 'SET_VALUE', payload: 10 }); // newState2.value is 10

            

              
                Copy
              
            
          

Selvom dette eksempel ikke direkte bruger `infer`, danner det grundlaget for mere komplekse reducer-scenarier. `infer` kan anvendes til dynamisk at udtrække `payload`-typen fra forskellige `Action`-typer, hvilket muliggør strengere typekontrol inden for reducer-funktionen. Dette er især nyttigt i større applikationer med mange handlinger og komplekse tilstandsstrukturer.

3. Dynamisk typegenerering fra API-svar

Når du arbejder med API'er, kan du bruge infer til automatisk at generere TypeScript-typer ud fra strukturen af API-svarene. Dette hjælper med at sikre typesikkerhed, når du interagerer med eksterne datakilder.

Overvej et forenklet scenarie, hvor du ønsker at udtrække datatypen fra et generisk API-svar:

            type ApiResponse<T> = {
  status: number;
  data: T;
  message?: string;
};

type ExtractDataType<T> = T extends ApiResponse<infer U> ? U : never;

// Example API Response
type User = {
  id: number;
  name: string;
  email: string;
};

type UserApiResponse = ApiResponse<User>;

type ExtractedUser = ExtractDataType<UserApiResponse>; // type ExtractedUser = User

            

              
                Copy
              
            
          

ExtractDataType bruger infer til at udtrække typen U fra ApiResponse<U>, hvilket giver en typesikker måde at få adgang til datastrukturen returneret af API'en.

Bedste praksis og overvejelser

• Klarhed og læsbarhed: Brug beskrivende typevariabelnavne (f.eks. ReturnType i stedet for blot R) for at forbedre kodelæsbarheden.
• Ydeevne: Selvom infer er kraftfuld, kan overdreven brug påvirke typekontrol-ydeevnen. Brug det med omtanke, især i store kodebaser.
• Fejlhåndtering: Angiv altid en fallback-type (f.eks. any eller never) i false-grenen af en betinget type for at håndtere tilfælde, hvor typen ikke matcher det forventede mønster.
• Kompleksitet: Undgå alt for komplekse betingede typer med indlejrede infer-udsagn, da de kan blive svære at forstå og vedligeholde. Omstrukturer din kode til mindre, mere håndterbare typer, når det er nødvendigt.
• Test: Test grundigt dine betingede typer med forskellige inputtyper for at sikre, at de opfører sig som forventet.

Globale overvejelser

Når du bruger TypeScript og infer i en global kontekst, skal du overveje følgende:

• Lokalisering og internationalisering (i18n): Typer skal muligvis tilpasses forskellige lokaler og dataformater. Brug betingede typer og `infer` til dynamisk at håndtere varierende datastrukturer baseret på lokalespecifikke krav. For eksempel kan datoer og valutaer repræsenteres forskelligt på tværs af lande.
• API-design for et globalt publikum: Design dine API'er med global tilgængelighed for øje. Brug konsistente datastrukturer og formater, der er nemme at forstå og behandle uanset brugerens placering. Typedefinitioner bør afspejle denne konsistens.
• Tidszoner: Når du håndterer datoer og tidspunkter, skal du være opmærksom på tidszoneforskelle. Brug passende biblioteker (f.eks. Luxon, date-fns) til at håndtere tidszonekonverteringer og sikre nøjagtig datarepræsentation på tværs af forskellige regioner. Overvej at repræsentere datoer og tidspunkter i UTC-format i dine API-svar.
• Kulturelle forskelle: Vær opmærksom på kulturelle forskelle i datarepræsentation og fortolkning. For eksempel kan navne, adresser og telefonnumre have forskellige formater i forskellige lande. Sørg for, at dine typedefinitioner kan rumme disse variationer.
• Valutahåndtering: Når du håndterer monetære værdier, skal du bruge en konsistent valutarepræsentation (f.eks. ISO 4217 valutakoder) og håndtere valutaomregninger korrekt. Brug biblioteker designet til valutamanipulation for at undgå præcisionsproblemer og sikre nøjagtige beregninger.

Overvej for eksempel et scenarie, hvor du henter brugerprofiler fra forskellige regioner, og adresseformatet varierer baseret på landet. Du kan bruge betingede typer og `infer` til dynamisk at justere typedefinitionen baseret på brugerens placering:

            type AddressFormat<CountryCode extends string> = CountryCode extends 'US'
    ? { street: string; city: string; state: string; zipCode: string; }
    : CountryCode extends 'CA'
    ? { street: string; city: string; province: string; postalCode: string; }
    : { addressLines: string[]; city: string; country: string; };

type UserProfile<CountryCode extends string> = {
    id: number;
    name: string;
    email: string;
    address: AddressFormat<CountryCode>;
    countryCode: CountryCode; // Add country code to profile
};

// Example Usage
type USUserProfile = UserProfile<'US'>; // Has US address format
type CAUserProfile = UserProfile<'CA'>; // Has Canadian address format
type GenericUserProfile = UserProfile<'DE'>; // Has Generic (international) address format

            

              
                Copy
              
            
          

Ved at inkludere `countryCode` i `UserProfile`-typen og bruge betingede typer baseret på denne kode, kan du dynamisk justere `address`-typen, så den matcher det forventede format for hver region. Dette giver mulighed for typesikker håndtering af forskellige dataformater på tværs af forskellige lande.

Konklusion

infer-nøgleordet er en kraftfuld tilføjelse til TypeScript's typesystem, der muliggør sofistikeret typemanipulation og -udtrækning inden for betingede typer. Ved at mestre infer kan du skabe mere robust, typesikker og vedligeholdelsesvenlig kode. Fra udledning af funktioners returtyper til udtrækning af egenskaber fra komplekse objekter er mulighederne enorme. Husk at bruge infer med omtanke, idet du prioriterer klarhed og læsbarhed for at sikre, at din kode forbliver forståelig og vedligeholdelsesvenlig på lang sigt.

Denne guide har givet et omfattende overblik over infer og dets anvendelser. Eksperimenter med de medfølgende eksempler, udforsk yderligere brugssager, og udnyt infer til at forbedre din TypeScript-udviklingsarbejdsgang.