Odvozování podmíněných typů: Ovládnutí klíčového slova 'infer' v TypeScriptu

Typový systém TypeScriptu nabízí výkonné nástroje pro tvorbu robustního a udržovatelného kódu. Mezi těmito nástroji vynikají podmíněné typy jako všestranný mechanismus pro vyjádření složitých typových vztahů. Klíčové slovo infer konkrétně odemyká pokročilé možnosti v rámci podmíněných typů, což umožňuje sofistikovanou extrakci a manipulaci s typy. Tento komplexní průvodce prozkoumá složitosti infer, poskytne praktické příklady a poznatky, které vám pomohou ovládnout jeho použití.

Pochopení podmíněných typů

Předtím než se ponoříme do infer, je klíčové pochopit základy podmíněných typů. Podmíněné typy vám umožňují definovat typy, které závisí na podmínce, podobně jako ternární operátor v JavaScriptu. Syntaxe se řídí tímto vzorem:

            T extends U ? X : Y
            

              
                Copy
              
            
          

Zde, pokud je typ T přiřaditelný typu U, výsledný typ je X; jinak je to Y.

Příklad:

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

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

              
                Copy
              
            
          

Tento jednoduchý příklad demonstruje, jak lze podmíněné typy použít k určení, zda je typ řetězec nebo ne. Tento koncept se rozšiřuje na složitější scénáře a otevírá cestu pro klíčové slovo infer.

Představení klíčového slova 'infer'

Klíčové slovo infer se používá v true větvi podmíněného typu k zavedení typové proměnné, která může být odvozena z kontrolovaného typu. To vám umožňuje extrahovat konkrétní části typu a použít je ve výsledném typu.

Syntaxe:

            T extends (infer R) ? X : Y
            

              
                Copy
              
            
          

V této syntaxi je R typová proměnná, která bude odvozena ze struktury T. Pokud T odpovídá vzoru, R bude obsahovat odvozený typ a výsledný typ bude X; jinak to bude Y.

Základní příklady použití 'infer'

1. Odvození návratového typu funkce

Běžným případem použití je odvození návratového typu funkce. Toho lze dosáhnout pomocí následujícího podmíněného typu:

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

              
                Copy
              
            
          

Vysvětlení:

• T extends (...args: any) => any: Toto omezení zajišťuje, že T je funkce.
• (...args: any) => infer R: Tento vzor odpovídá funkci a odvozuje návratový typ jako R.
• R : any: Pokud T není funkce, výsledný typ je any.

Příklad:

            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
              
            
          

Tento příklad demonstruje, jak ReturnType úspěšně extrahuje návratové typy funkcí greet a calculate.

2. Odvození typu prvku pole

Dalším častým případem použití je extrakce typu prvku pole:

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

              
                Copy
              
            
          

Vysvětlení:

• T extends (infer U)[]: Tento vzor odpovídá poli a odvozuje typ prvku jako U.
• U : never: Pokud T není pole, výsledný typ je never.

Příklad:

            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 ukazuje, jak ElementType správně odvozuje typ prvku různých typů polí.

Pokročilé použití 'infer'

1. Odvození parametrů funkce

Podobně jako u odvozování návratového typu, můžete odvodit parametry funkce pomocí infer a n-tic (tuples):

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

              
                Copy
              
            
          

Vysvětlení:

• T extends (...args: any) => any: Toto omezení zajišťuje, že T je funkce.
• (...args: infer P) => any: Tento vzor odpovídá funkci a odvozuje typy parametrů jako n-tici (tuple) P.
• P : never: Pokud T není funkce, výsledný typ je never.

Příklad:

            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 extrahuje typy parametrů jako n-tici (tuple), přičemž zachovává pořadí a typy argumentů funkce.

2. Extrakce vlastností z objektového typu

infer lze také použít k extrakci specifických vlastností z objektového typu. To vyžaduje složitější podmíněný typ, ale umožňuje výkonnou manipulaci s typy.

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

              
                Copy
              
            
          

Vysvětlení:

• K in keyof T: Toto iteruje přes všechny klíče typu T.
• T[K] extends U ? K : never: Tento podmíněný typ kontroluje, zda je typ vlastnosti s klíčem K (tj. T[K]) přiřaditelný typu U. Pokud ano, klíč K je zahrnut do výsledného typu; jinak je vyloučen pomocí never.
• Celá tato konstrukce vytváří nový objektový typ pouze s vlastnostmi, jejichž typy rozšiřují U.

Příklad:

            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 vám umožňuje vytvořit nový typ obsahující pouze vlastnosti určitého typu z existujícího typu.

3. Odvození vnořených typů

infer lze řetězit a vnořovat k extrakci typů z hluboko vnořených struktur. Například zvažte extrakci typu nejvnitřnějšího prvku vnořeného pole.

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

              
                Copy
              
            
          

Vysvětlení:

• T extends (infer U)[]: Toto kontroluje, zda je T pole, a odvozuje typ prvku jako U.
• DeepArrayElement<U>: Pokud je T pole, typ rekurzivně volá DeepArrayElement s typem prvku U.
• T: Pokud T není pole, typ vrátí samotné T.

Příklad:

            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
              
            
          

Tento rekurzivní přístup vám umožňuje extrahovat typ prvku na nejhlubší úrovni zanoření v poli.

Aplikace v reálném světě

Klíčové slovo infer nachází uplatnění v různých scénářích, kde je vyžadována dynamická manipulace s typy. Zde jsou některé praktické příklady:

1. Vytvoření typově bezpečného Event Emitteru

Můžete použít infer k vytvoření typově bezpečného event emitteru, který zajišťuje, že obsluhy událostí obdrží správný datový typ.

            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
              
            
          

V tomto příkladu EventData používá podmíněné typy a infer k extrakci datového typu spojeného s konkrétním názvem události, což zajišťuje, že obsluhy událostí obdrží správný typ dat.

2. Implementace typově bezpečného Reduceru

Můžete využít infer k vytvoření typově bezpečné redukční funkce pro správu stavu.

            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
              
            
          

Zatímco tento příklad přímo nepoužívá `infer`, pokládá základy pro složitější scénáře reduktorů. `infer` lze aplikovat k dynamické extrakci typu `payload` z různých typů `Action`, což umožňuje přísnější kontrolu typů uvnitř redukční funkce. To je obzvláště užitečné ve větších aplikacích s mnoha akcemi a složitými stavovými strukturami.

3. Dynamická generace typů z API odpovědí

Při práci s API můžete použít infer k automatické generaci typů TypeScriptu ze struktury API odpovědí. To pomáhá zajistit typovou bezpečnost při interakci s externími datovými zdroji.

Zvažte zjednodušený scénář, kde chcete extrahovat datový typ z obecné API odpovědi:

            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 používá infer k extrakci typu U z ApiResponse<U>, čímž poskytuje typově bezpečný způsob přístupu k datové struktuře vrácené API.

Osvědčené postupy a úvahy

• Jasnost a čitelnost: Používejte popisné názvy typových proměnných (např. ReturnType místo pouhého R) pro zlepšení čitelnosti kódu.
• Výkon: Ačkoliv je infer výkonný, nadměrné používání může ovlivnit výkon kontroly typů. Používejte jej uvážlivě, zejména ve velkých kódových bázích.
• Zpracování chyb: Vždy poskytněte záložní typ (např. any nebo never) v false větvi podmíněného typu pro zpracování případů, kdy typ neodpovídá očekávanému vzoru.
• Složitost: Vyhněte se příliš složitým podmíněným typům s vnořenými příkazy infer, protože se mohou stát obtížně srozumitelnými a udržovatelnými. V případě potřeby refaktorujte svůj kód na menší, lépe spravovatelné typy.
• Testování: Důkladně testujte své podmíněné typy s různými vstupními typy, abyste zajistili, že se chovají podle očekávání.

Globální aspekty

Při použití TypeScriptu a infer v globálním kontextu zvažte následující:

• Lokalizace a internacionalizace (i18n): Typy se mohou potřebovat přizpůsobit různým národním prostředím a datovým formátům. Použijte podmíněné typy a `infer` k dynamickému zpracování různých datových struktur na základě požadavků specifických pro dané národní prostředí. Například data a měny mohou být v různých zemích reprezentovány odlišně.
• Návrh API pro globální publikum: Navrhujte svá API s ohledem na globální přístupnost. Používejte konzistentní datové struktury a formáty, které jsou snadno srozumitelné a zpracovatelné bez ohledu na polohu uživatele. Typové definice by měly tuto konzistenci odrážet.
• Časová pásma: Při práci s daty a časy dbejte na rozdíly v časových pásmech. Použijte vhodné knihovny (např. Luxon, date-fns) pro zpracování konverzí časových pásem a zajištění přesné reprezentace dat napříč různými regiony. Zvažte reprezentaci dat a časů ve formátu UTC ve vašich API odpovědích.
• Kulturní rozdíly: Buďte si vědomi kulturních rozdílů v reprezentaci a interpretaci dat. Například jména, adresy a telefonní čísla mohou mít v různých zemích různé formáty. Zajistěte, aby vaše typové definice mohly tyto odchylky pojmout.
• Zpracování měn: Při práci s peněžními hodnotami používejte konzistentní reprezentaci měny (např. kódy měn ISO 4217) a odpovídajícím způsobem zpracujte převody měn. Použijte knihovny určené pro manipulaci s měnami, abyste se vyhnuli problémům s přesností a zajistili přesné výpočty.

Například zvažte scénář, kdy načítáte uživatelské profily z různých regionů a formát adresy se liší v závislosti na zemi. Můžete použít podmíněné typy a `infer` k dynamické úpravě definice typu na základě polohy uživatele:

            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
              
            
          

Zahrnutím `countryCode` do typu `UserProfile` a použitím podmíněných typů založených na tomto kódu můžete dynamicky upravit typ `address` tak, aby odpovídal očekávanému formátu pro každý region. To umožňuje typově bezpečné zpracování různých datových formátů napříč různými zeměmi.

Závěr

Klíčové slovo infer je mocným doplňkem typového systému TypeScriptu, umožňujícím sofistikovanou manipulaci a extrakci typů v rámci podmíněných typů. Ovládnutím infer můžete vytvářet robustnější, typově bezpečnější a udržovatelnější kód. Od odvozování návratových typů funkcí po extrakci vlastností ze složitých objektů jsou možnosti obrovské. Nezapomeňte používat infer uvážlivě, s prioritou jasnosti a čitelnosti, abyste zajistili, že váš kód zůstane srozumitelný a udržovatelný z dlouhodobého hlediska.

Tento průvodce poskytl komplexní přehled infer a jeho aplikací. Experimentujte s uvedenými příklady, prozkoumejte další případy použití a využijte infer k vylepšení vašeho vývojového workflow v TypeScriptu.