Bedingte Typinferenz: Das 'infer'-Schlüsselwort in TypeScript meistern

Das Typsystem von TypeScript bietet leistungsstarke Werkzeuge zur Erstellung von robustem und wartbarem Code. Unter diesen Werkzeugen stechen bedingte Typen als vielseitiger Mechanismus hervor, um komplexe Typbeziehungen auszudrücken. Das infer-Schlüsselwort, insbesondere, eröffnet erweiterte Möglichkeiten innerhalb bedingter Typen und ermöglicht anspruchsvolle Typextraktion und -manipulation. Dieser umfassende Leitfaden wird die Feinheiten von infer untersuchen und praktische Beispiele sowie Einblicke bieten, die Ihnen helfen, dessen Verwendung zu meistern.

Grundlagen der bedingten Typen

Bevor wir uns mit infer befassen, ist es entscheidend, die Grundlagen der bedingten Typen zu verstehen. Bedingte Typen ermöglichen es Ihnen, Typen zu definieren, die von einer Bedingung abhängen, ähnlich wie ein ternärer Operator in JavaScript. Die Syntax folgt diesem Muster:

            T extends U ? X : Y
            

              
                Copy
              
            
          

Hier ist der resultierende Typ X, wenn der Typ T dem Typ U zugewiesen werden kann; andernfalls ist er Y.

Beispiel:

            type IsString = T extends string ? true : false;

type StringCheck = IsString; // type StringCheck = true
type NumberCheck = IsString; // type NumberCheck = false
            

              
                Copy
              
            
          

Dieses einfache Beispiel zeigt, wie bedingte Typen verwendet werden können, um festzustellen, ob ein Typ ein String ist oder nicht. Dieses Konzept lässt sich auf komplexere Szenarien erweitern und ebnet den Weg für das infer-Schlüsselwort.

Einführung des 'infer'-Schlüsselworts

Das infer-Schlüsselwort wird innerhalb des true-Zweigs eines bedingten Typs verwendet, um eine Typvariable einzuführen, die aus dem zu prüfenden Typ abgeleitet (inferiert) werden kann. Dies ermöglicht es Ihnen, bestimmte Teile eines Typs zu extrahieren und im resultierenden Typ zu verwenden.

Syntax:

            T extends (infer R) ? X : Y
            

              
                Copy
              
            
          

In dieser Syntax ist R eine Typvariable, die aus der Struktur von T abgeleitet wird. Wenn T dem Muster entspricht, enthält R den abgeleiteten Typ, und der resultierende Typ ist X; andernfalls ist er Y.

Grundlegende Anwendungsbeispiele für 'infer'

1. Ableiten des Rückgabetyps einer Funktion

Ein häufiger Anwendungsfall ist das Ableiten des Rückgabetyps einer Funktion. Dies kann mit dem folgenden bedingten Typ erreicht werden:

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

              
                Copy
              
            
          

Erklärung:

• T extends (...args: any) => any: Diese Einschränkung stellt sicher, dass T eine Funktion ist.
• (...args: any) => infer R: Dieses Muster passt auf eine Funktion und leitet den Rückgabetyp als R ab.
• R : any: Wenn T keine Funktion ist, ist der resultierende Typ any.

Beispiel:

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

type GreetingReturnType = ReturnType; // type GreetingReturnType = string

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

type CalculateReturnType = ReturnType; // type CalculateReturnType = number

            

              
                Copy
              
            
          

Dieses Beispiel zeigt, wie ReturnType die Rückgabetypen der Funktionen greet und calculate erfolgreich extrahiert.

2. Ableiten des Elementtyps eines Arrays

Ein weiterer häufiger Anwendungsfall ist die Extraktion des Elementtyps eines Arrays:

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

              
                Copy
              
            
          

Erklärung:

• T extends (infer U)[]: Dieses Muster passt auf ein Array und leitet den Elementtyp als U ab.
• U : never: Wenn T kein Array ist, ist der resultierende Typ never.

Beispiel:

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

type NotAnArray = ElementType; // type NotAnArray = never
            

              
                Copy
              
            
          

Dies zeigt, wie ElementType den Elementtyp verschiedener Array-Typen korrekt ableitet.

Fortgeschrittene Anwendung von 'infer'

1. Ableiten der Parameter einer Funktion

Ähnlich wie beim Ableiten des Rückgabetyps können Sie die Parameter einer Funktion mit infer und Tupeln ableiten:

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

              
                Copy
              
            
          

Erklärung:

• T extends (...args: any) => any: Diese Einschränkung stellt sicher, dass T eine Funktion ist.
• (...args: infer P) => any: Dieses Muster passt auf eine Funktion und leitet die Parametertypen als Tupel P ab.
• P : never: Wenn T keine Funktion ist, ist der resultierende Typ never.

Beispiel:

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

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

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

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

              
                Copy
              
            
          

Parameters extrahiert die Parametertypen als Tupel, wobei die Reihenfolge und die Typen der Funktionsargumente erhalten bleiben.

2. Extrahieren von Eigenschaften aus einem Objekttyp

infer kann auch verwendet werden, um spezifische Eigenschaften aus einem Objekttyp zu extrahieren. Dies erfordert einen komplexeren bedingten Typ, ermöglicht aber eine leistungsstarke Typmanipulation.

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

              
                Copy
              
            
          

Erklärung:

• K in keyof T: Dies iteriert über alle Schlüssel des Typs T.
• T[K] extends U ? K : never: Dieser bedingte Typ prüft, ob der Typ der Eigenschaft am Schlüssel K (d.h. T[K]) dem Typ U zugewiesen werden kann. Wenn ja, wird der Schlüssel K in den resultierenden Typ aufgenommen; andernfalls wird er mit never ausgeschlossen.
• Die gesamte Konstruktion erstellt einen neuen Objekttyp nur mit den Eigenschaften, deren Typen U erweitern.

Beispiel:

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


type StringProperties = PickByType; // type StringProperties = { name: string; city: string; country: string; }

type NumberProperties = PickByType; // type NumberProperties = { age: number; }

            

              
                Copy
              
            
          

PickByType ermöglicht es Ihnen, einen neuen Typ zu erstellen, der nur die Eigenschaften eines bestimmten Typs aus einem vorhandenen Typ enthält.

3. Ableiten von verschachtelten Typen

infer kann verkettet und verschachtelt werden, um Typen aus tief verschachtelten Strukturen zu extrahieren. Betrachten Sie zum Beispiel die Extraktion des Typs des innersten Elements eines verschachtelten Arrays.

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

              
                Copy
              
            
          

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

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

type RegularNumber = DeepArrayElement; // type RegularNumber = number
            

              
                Copy
              
            
          

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

type EventName = keyof T;

type EventData> = T[K];

type EventHandler> = (data: EventData) => void;

class EventEmitter {
  private listeners: { [K in EventName]?: EventHandler[] } = {};

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

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


const emitter = new EventEmitter();

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
              
            
          

            type Action = P extends undefined
  ? { type: T }
  : { type: T; payload: P };

type Reducer> = (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 = (
  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
              
            
          

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

type ExtractDataType = T extends ApiResponse ? U : never;

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

type UserApiResponse = ApiResponse;

type ExtractedUser = ExtractDataType; // type ExtractedUser = User

            

              
                Copy
              
            
          

            type AddressFormat = 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 = {
    id: number;
    name: string;
    email: string;
    address: AddressFormat;
    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