Условно извличане на типове: Овладяване на ключовата дума 'infer' в TypeScript

Системата от типове на TypeScript предлага мощни инструменти за създаване на здрав и лесен за поддръжка код. Сред тези инструменти, условните типове се открояват като универсален механизъм за изразяване на сложни връзки между типове. Ключовата дума infer, по-специално, отключва разширени възможности в рамките на условните типове, позволявайки сложни извличания и манипулации на типове. Това изчерпателно ръководство ще разгледа тънкостите на infer, предоставяйки практически примери и прозрения, които да ви помогнат да овладеете употребата му.

Разбиране на условните типове

Преди да се потопим в infer, е изключително важно да разберем основите на условните типове. Условните типове ви позволяват да дефинирате типове, които зависят от условие, подобно на тернарния оператор в JavaScript. Синтаксисът следва този модел:

            T extends U ? X : Y
            

              
                Copy
              
            
          

Тук, ако типът T може да бъде присвоен на тип U, резултантният тип е X; в противен случай е Y.

Пример:

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

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

              
                Copy
              
            
          

Този прост пример демонстрира как условните типове могат да се използват, за да се определи дали даден тип е низ (string) или не. Тази концепция се разширява до по-сложни сценарии, проправяйки пътя за ключовата дума infer.

Представяне на ключовата дума 'infer'

Ключовата дума infer се използва в рамките на true разклонението на условен тип, за да се въведе променлива на тип, която може да бъде изведена от проверявания тип. Това ви позволява да извлечете конкретни части от даден тип и да ги използвате в резултантния тип.

Синтаксис:

            T extends (infer R) ? X : Y
            

              
                Copy
              
            
          

В този синтаксис R е променлива на тип, която ще бъде изведена от структурата на T. Ако T съответства на модела, R ще съдържа изведения тип, а резултантният тип ще бъде X; в противен случай ще бъде Y.

Основни примери за употреба на 'infer'

1. Извличане на типа на връщаната стойност от функция

Често срещан случай на употреба е извличането на типа на връщаната стойност от функция. Това може да бъде постигнато със следния условен тип:

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

              
                Copy
              
            
          

Обяснение:

• T extends (...args: any) => any: Това ограничение гарантира, че T е функция.
• (...args: any) => infer R: Този модел съответства на функция и извежда типа на връщаната стойност като R.
• R : any: Ако T не е функция, резултантният тип е any.

Пример:

            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
              
            
          

Този пример демонстрира как ReturnType успешно извлича типовете на връщаните стойности от функциите greet и calculate.

2. Извличане на типа на елементите на масив

Друг често срещан случай на употреба е извличането на типа на елементите на масив:

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

              
                Copy
              
            
          

Обяснение:

• T extends (infer U)[]: Този модел съответства на масив и извежда типа на елемента като U.
• U : never: Ако T не е масив, резултантният тип е never.

Пример:

            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
              
            
          

Това показва как ElementType правилно извежда типа на елемента на различни видове масиви.

Напреднала употреба на 'infer'

1. Извличане на параметрите на функция

Подобно на извличането на типа на връщаната стойност, можете да извлечете параметрите на функция, използвайки infer и кортежи (tuples):

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

              
                Copy
              
            
          

Обяснение:

• T extends (...args: any) => any: Това ограничение гарантира, че T е функция.
• (...args: infer P) => any: Този модел съответства на функция и извежда типовете на параметрите като кортеж P.
• P : never: Ако T не е функция, резултантният тип е never.

Пример:

            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 извлича типовете на параметрите като кортеж, запазвайки реда и типовете на аргументите на функцията.

2. Извличане на свойства от обектен тип

infer може да се използва и за извличане на конкретни свойства от обектен тип. Това изисква по-сложен условен тип, но позволява мощна манипулация на типове.

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

              
                Copy
              
            
          

Обяснение:

• K in keyof T: Итерира през всички ключове на тип T.
• T[K] extends U ? K : never: Този условен тип проверява дали типът на свойството с ключ K (т.е. T[K]) може да бъде присвоен на тип U. Ако е така, ключът K се включва в резултантния тип; в противен случай се изключва с помощта на never.
• Цялата конструкция създава нов обектен тип само със свойствата, чиито типове наследяват U.

Пример:

            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 ви позволява да създадете нов тип, съдържащ само свойствата от определен тип от съществуващ тип.

3. Извличане на вложени типове

infer може да бъде верижно свързван и влаган, за да се извличат типове от дълбоко вложени структури. Например, разгледайте извличането на типа на най-вътрешния елемент на вложен масив.

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

              
                Copy
              
            
          

Обяснение:

• T extends (infer U)[]: Проверява дали T е масив и извежда типа на елемента като U.
• DeepArrayElement<U>: Ако T е масив, типът рекурсивно извиква DeepArrayElement с типа на елемента U.
• T: Ако T не е масив, типът връща самия T.

Пример:

            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
              
            
          

Този рекурсивен подход ви позволява да извлечете типа на елемента на най-дълбокото ниво на влагане в масив.

Приложения в реалния свят

Ключовата дума infer намира приложения в различни сценарии, където се изисква динамична манипулация на типове. Ето няколко практически примера:

1. Създаване на типово-безопасен Event Emitter

Можете да използвате infer, за да създадете типово-безопасен event emitter, който гарантира, че обработчиците на събития (event handlers) получават правилния тип данни.

            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
              
            
          

В този пример EventData използва условни типове и infer, за да извлече типа данни, свързан с конкретно име на събитие, като гарантира, че обработчиците на събития получават правилния тип данни.

2. Имплементиране на типово-безопасен Reducer

Можете да използвате infer, за да създадете типово-безопасна reducer функция за управление на състоянието.

            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
              
            
          

Въпреки че този пример не използва директно `infer`, той поставя основата за по-сложни сценарии с редусери. `infer` може да бъде приложен за динамично извличане на типа на `payload` от различни `Action` типове, което позволява по-строга проверка на типовете в рамките на reducer функцията. Това е особено полезно в по-големи приложения с множество действия и сложни структури на състоянието.

3. Динамично генериране на типове от API отговори

Когато работите с API-та, можете да използвате infer за автоматично генериране на TypeScript типове от структурата на API отговорите. Това помага да се гарантира типова безопасност при взаимодействие с външни източници на данни.

Разгледайте опростен сценарий, в който искате да извлечете типа данни от генеричен 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 използва infer, за да извлече типа U от ApiResponse<U>, осигурявайки типово-безопасен начин за достъп до структурата от данни, върната от API.

Най-добри практики и съображения

• Яснота и четимост: Използвайте описателни имена на променливи на типове (напр. ReturnType вместо само R), за да подобрите четимостта на кода.
• Производителност: Въпреки че infer е мощен, прекомерната му употреба може да повлияе на производителността на проверката на типовете. Използвайте го разумно, особено в големи кодови бази.
• Обработка на грешки: Винаги предоставяйте резервен тип (напр. any или never) в false разклонението на условния тип, за да обработите случаите, в които типът не съответства на очаквания модел.
• Сложност: Избягвайте прекалено сложни условни типове с вложени infer изрази, тъй като те могат да станат трудни за разбиране и поддръжка. Рефакторирайте кода си в по-малки и по-управляеми типове, когато е необходимо.
• Тестване: Тествайте щателно вашите условни типове с различни входни типове, за да се уверите, че се държат според очакванията.

Глобални съображения

Когато използвате TypeScript и infer в глобален контекст, вземете предвид следното:

• Локализация и интернационализация (i18n): Типовете може да се наложи да се адаптират към различни езикови променливи и формати на данни. Използвайте условни типове и `infer`, за да обработвате динамично различни структури от данни въз основа на специфични за езика изисквания. Например, датите и валутите могат да бъдат представени по различен начин в различните държави.
• Дизайн на API за глобална аудитория: Проектирайте вашите API-та с мисъл за глобална достъпност. Използвайте последователни структури от данни и формати, които са лесни за разбиране и обработка, независимо от местоположението на потребителя. Дефинициите на типовете трябва да отразяват тази последователност.
• Часови зони: Когато работите с дати и часове, имайте предвид разликите в часовите зони. Използвайте подходящи библиотеки (напр. Luxon, date-fns), за да обработвате преобразуванията на часови зони и да гарантирате точно представяне на данните в различните региони. Обмислете представянето на дати и часове в UTC формат във вашите API отговори.
• Културни различия: Бъдете наясно с културните различия в представянето и интерпретацията на данни. Например, имената, адресите и телефонните номера могат да имат различни формати в различните държави. Уверете се, че вашите дефиниции на типове могат да поемат тези вариации.
• Обработка на валута: Когато работите с парични стойности, използвайте последователно представяне на валутата (напр. ISO 4217 кодове на валути) и обработвайте валутните преобразувания по подходящ начин. Използвайте библиотеки, предназначени за валутни манипулации, за да избегнете проблеми с точността и да осигурите точни изчисления.

Например, представете си сценарий, в който извличате потребителски профили от различни региони и форматът на адреса варира в зависимост от държавата. Можете да използвате условни типове и `infer`, за да коригирате динамично дефиницията на типа въз основа на местоположението на потребителя:

            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
              
            
          

Като включите countryCode в типа UserProfile и използвате условни типове, базирани на този код, можете динамично да коригирате типа на address, за да съответства на очаквания формат за всеки регион. Това позволява типово-безопасна обработка на разнообразни формати на данни в различните държави.

Заключение

Ключовата дума infer е мощно допълнение към системата от типове на TypeScript, което позволява сложна манипулация и извличане на типове в рамките на условните типове. Като овладеете infer, можете да създавате по-здрав, типово-безопасен и лесен за поддръжка код. От извличане на типове на връщани стойности от функции до извличане на свойства от сложни обекти, възможностите са огромни. Не забравяйте да използвате infer разумно, като давате приоритет на яснотата и четимостта, за да гарантирате, че кодът ви остава разбираем и лесен за поддръжка в дългосрочен план.

Това ръководство предостави изчерпателен преглед на infer и неговите приложения. Експериментирайте с предоставените примери, изследвайте допълнителни случаи на употреба и използвайте infer, за да подобрите своя работен процес при разработка с TypeScript.