Warunkowe Wnioskowanie Typów: Opanowanie Słowa Kluczowego 'infer' w TypeScript

System typów TypeScript oferuje potężne narzędzia do tworzenia solidnego i łatwego w utrzymaniu kodu. Wśród tych narzędzi wyróżniają się typy warunkowe jako wszechstronny mechanizm do wyrażania złożonych relacji między typami. W szczególności słowo kluczowe infer odblokowuje zaawansowane możliwości w ramach typów warunkowych, pozwalając na zaawansowane wyodrębnianie i manipulację typami. Ten kompleksowy przewodnik zgłębi zawiłości infer, dostarczając praktycznych przykładów i spostrzeżeń, które pomogą Ci opanować jego użycie.

Zrozumienie Typów Warunkowych

Zanim zagłębimy się w infer, kluczowe jest zrozumienie podstaw typów warunkowych. Typy warunkowe pozwalają definiować typy, które zależą od warunku, podobnie jak operator trójargumentowy w JavaScript. Składnia jest następująca:

            T extends U ? X : Y
            

              
                Copy
              
            
          

W tym przypadku, jeśli typ T jest przypisywalny do typu U, wynikowym typem jest X; w przeciwnym razie jest to Y.

Przykład:

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

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

              
                Copy
              
            
          

Ten prosty przykład pokazuje, jak typy warunkowe mogą być używane do określenia, czy dany typ jest stringiem. Ta koncepcja rozszerza się na bardziej złożone scenariusze, torując drogę dla słowa kluczowego infer.

Wprowadzenie do Słowa Kluczowego 'infer'

Słowo kluczowe infer jest używane w gałęzi true typu warunkowego do wprowadzenia zmiennej typowej, która może być wywnioskowana z sprawdzanego typu. Pozwala to na wyodrębnienie określonych części typu i użycie ich w typie wynikowym.

Składnia:

            T extends (infer R) ? X : Y
            

              
                Copy
              
            
          

W tej składni R jest zmienną typową, która zostanie wywnioskowana ze struktury T. Jeśli T pasuje do wzorca, R będzie przechowywać wywnioskowany typ, a wynikowym typem będzie X; w przeciwnym razie będzie to Y.

Podstawowe Przykłady Użycia 'infer'

1. Wnioskowanie Typu Zwracanego przez Funkcję

Częstym przypadkiem użycia jest wnioskowanie typu zwracanego przez funkcję. Można to osiągnąć za pomocą następującego typu warunkowego:

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

              
                Copy
              
            
          

Wyjaśnienie:

• T extends (...args: any) => any: To ograniczenie zapewnia, że T jest funkcją.
• (...args: any) => infer R: Ten wzorzec dopasowuje funkcję i wnioskuje typ zwracany jako R.
• R : any: Jeśli T nie jest funkcją, wynikowym typem jest any.

Przykład:

            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
              
            
          

Ten przykład pokazuje, jak ReturnType pomyślnie wyodrębnia typy zwracane przez funkcje greet i calculate.

2. Wnioskowanie Typu Elementu Tablicy

Innym częstym przypadkiem użycia jest wyodrębnianie typu elementu tablicy:

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

              
                Copy
              
            
          

Wyjaśnienie:

• T extends (infer U)[]: Ten wzorzec dopasowuje tablicę i wnioskuje typ elementu jako U.
• U : never: Jeśli T nie jest tablicą, wynikowym typem jest never.

Przykład:

            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
              
            
          

To pokazuje, jak ElementType poprawnie wnioskuje typ elementu dla różnych typów tablic.

Zaawansowane Użycie 'infer'

1. Wnioskowanie Parametrów Funkcji

Podobnie jak w przypadku wnioskowania typu zwracanego, można wnioskować parametry funkcji, używając infer i krotek:

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

              
                Copy
              
            
          

Wyjaśnienie:

• T extends (...args: any) => any: To ograniczenie zapewnia, że T jest funkcją.
• (...args: infer P) => any: Ten wzorzec dopasowuje funkcję i wnioskuje typy parametrów jako krotkę P.
• P : never: Jeśli T nie jest funkcją, wynikowym typem jest never.

Przykład:

            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 wyodrębnia typy parametrów jako krotkę, zachowując kolejność i typy argumentów funkcji.

2. Wyodrębnianie Właściwości z Typu Obiektowego

infer może być również używane do wyodrębniania określonych właściwości z typu obiektowego. Wymaga to bardziej złożonego typu warunkowego, ale umożliwia potężną manipulację typami.

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

              
                Copy
              
            
          

Wyjaśnienie:

• K in keyof T: To iteruje po wszystkich kluczach typu T.
• T[K] extends U ? K : never: Ten typ warunkowy sprawdza, czy typ właściwości o kluczu K (tj. T[K]) jest przypisywalny do typu U. Jeśli tak, klucz K jest włączany do typu wynikowego; w przeciwnym razie jest wykluczany za pomocą never.
• Cała konstrukcja tworzy nowy typ obiektowy zawierający tylko te właściwości, których typy rozszerzają U.

Przykład:

            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 pozwala na utworzenie nowego typu zawierającego tylko właściwości o określonym typie z istniejącego typu.

3. Wnioskowanie Typów Zagnieżdżonych

infer można łączyć i zagnieżdżać, aby wyodrębniać typy z głęboko zagnieżdżonych struktur. Na przykład, rozważmy wyodrębnienie typu najbardziej wewnętrznego elementu zagnieżdżonej tablicy.

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

              
                Copy
              
            
          

Wyjaśnienie:

• T extends (infer U)[]: To sprawdza, czy T jest tablicą i wnioskuje typ elementu jako U.
• DeepArrayElement<U>: Jeśli T jest tablicą, typ rekurencyjnie wywołuje DeepArrayElement z typem elementu U.
• T: Jeśli T nie jest tablicą, typ zwraca sam siebie (T).

Przykład:

            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
              
            
          

To rekurencyjne podejście pozwala na wyodrębnienie typu elementu na najgłębszym poziomie zagnieżdżenia w tablicy.

Zastosowania w Rzeczywistych Projektach

Słowo kluczowe infer znajduje zastosowanie w różnych scenariuszach, gdzie wymagana jest dynamiczna manipulacja typami. Oto kilka praktycznych przykładów:

1. Tworzenie Bezpiecznego Typowo Emitera Zdarzeń

Możesz użyć infer, aby stworzyć bezpieczny typowo emiter zdarzeń, który zapewnia, że procedury obsługi zdarzeń otrzymują dane o poprawnym typie.

            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
              
            
          

W tym przykładzie EventData używa typów warunkowych i infer do wyodrębnienia typu danych powiązanego z konkretną nazwą zdarzenia, zapewniając, że procedury obsługi zdarzeń otrzymują dane o poprawnym typie.

2. Implementacja Bezpiecznego Typowo Reducera

Możesz wykorzystać infer do stworzenia bezpiecznej typowo funkcji reducera do zarządzania stanem.

            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
              
            
          

Chociaż ten przykład nie używa bezpośrednio `infer`, stanowi podstawę dla bardziej złożonych scenariuszy z reducerami. `infer` można zastosować do dynamicznego wyodrębniania typu `payload` z różnych typów `Action`, co pozwala на surowsze sprawdzanie typów wewnątrz funkcji reducera. Jest to szczególnie przydatne w większych aplikacjach z licznymi akcjami i złożonymi strukturami stanu.

3. Dynamiczne Generowanie Typów z Odpowiedzi API

Podczas pracy z API można użyć infer do automatycznego generowania typów TypeScript na podstawie struktury odpowiedzi API. Pomaga to zapewnić bezpieczeństwo typów podczas interakcji z zewnętrznymi źródłami danych.

Rozważmy uproszczony scenariusz, w którym chcesz wyodrębnić typ danych z generycznej odpowiedzi API:

            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 używa infer do wyodrębnienia typu U z ApiResponse<U>, zapewniając bezpieczny typowo sposób na dostęp do struktury danych zwracanej przez API.

Dobre Praktyki i Wskazówki

• Przejrzystość i czytelność: Używaj opisowych nazw zmiennych typowych (np. ReturnType zamiast samego R), aby poprawić czytelność kodu.
• Wydajność: Chociaż infer jest potężne, nadmierne użycie może wpłynąć na wydajność sprawdzania typów. Używaj go z umiarem, zwłaszcza w dużych projektach.
• Obsługa błędów: Zawsze zapewniaj typ zapasowy (np. any lub never) w gałęzi false typu warunkowego, aby obsłużyć przypadki, gdy typ nie pasuje do oczekiwanego wzorca.
• Złożoność: Unikaj nadmiernie złożonych typów warunkowych z zagnieżdżonymi instrukcjami infer, ponieważ mogą stać się trudne do zrozumienia i utrzymania. W razie potrzeby refaktoryzuj swój kod na mniejsze, łatwiejsze do zarządzania typy.
• Testowanie: Dokładnie testuj swoje typy warunkowe z różnymi typami wejściowymi, aby upewnić się, że działają zgodnie z oczekiwaniami.

Uwarunkowania Globalne

Używając TypeScript i infer w kontekście globalnym, należy wziąć pod uwagę następujące kwestie:

• Lokalizacja i internacjonalizacja (i18n): Typy mogą wymagać dostosowania do różnych lokalizacji i formatów danych. Użyj typów warunkowych i `infer`, aby dynamicznie obsługiwać różne struktury danych w oparciu o wymagania specyficzne dla danej lokalizacji. Na przykład daty i waluty mogą być reprezentowane inaczej w różnych krajach.
• Projektowanie API dla globalnej publiczności: Projektuj swoje API z myślą o globalnej dostępności. Używaj spójnych struktur danych i formatów, które są łatwe do zrozumienia i przetwarzania niezależnie od lokalizacji użytkownika. Definicje typów powinny odzwierciedlać tę spójność.
• Strefy czasowe: Pracując z datami i godzinami, pamiętaj o różnicach w strefach czasowych. Używaj odpowiednich bibliotek (np. Luxon, date-fns) do obsługi konwersji stref czasowych i zapewnienia dokładnej reprezentacji danych w różnych regionach. Rozważ reprezentowanie dat i godzin w formacie UTC w odpowiedziach API.
• Różnice kulturowe: Bądź świadomy różnic kulturowych w reprezentacji i interpretacji danych. Na przykład imiona, nazwiska, adresy i numery telefonów mogą mieć różne formaty w różnych krajach. Upewnij się, że twoje definicje typów mogą uwzględniać te wariacje.
• Obsługa walut: Pracując z wartościami pieniężnymi, używaj spójnej reprezentacji walut (np. kody walut ISO 4217) i odpowiednio obsługuj konwersje walut. Używaj bibliotek przeznaczonych do manipulacji walutami, aby uniknąć problemów z precyzją i zapewnić dokładne obliczenia.

Rozważmy na przykład scenariusz, w którym pobierasz profile użytkowników z różnych regionów, a format adresu różni się w zależności od kraju. Możesz użyć typów warunkowych i `infer`, aby dynamicznie dostosować definicję typu na podstawie lokalizacji użytkownika:

            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
              
            
          

Dzięki włączeniu `countryCode` do typu `UserProfile` i użyciu typów warunkowych opartych na tym kodzie, możesz dynamicznie dostosować typ `address`, aby pasował do oczekiwanego formatu dla każdego regionu. Pozwala to na bezpieczne typowo obsługiwanie różnorodnych formatów danych w różnych krajach.

Podsumowanie

Słowo kluczowe infer jest potężnym dodatkiem do systemu typów TypeScript, umożliwiającym zaawansowaną manipulację i wyodrębnianie typów w ramach typów warunkowych. Opanowując infer, możesz tworzyć bardziej solidny, bezpieczny typowo i łatwy w utrzymaniu kod. Od wnioskowania typów zwracanych przez funkcje po wyodrębnianie właściwości ze złożonych obiektów, możliwości są ogromne. Pamiętaj, aby używać infer z umiarem, priorytetowo traktując przejrzystość i czytelność, aby Twój kod pozostał zrozumiały i łatwy w utrzymaniu na dłuższą metę.

Ten przewodnik przedstawił kompleksowy przegląd infer i jego zastosowań. Eksperymentuj z podanymi przykładami, odkrywaj dodatkowe przypadki użycia i wykorzystaj infer, aby usprawnić swój proces tworzenia oprogramowania w TypeScript.