TypeScript Generics: Овладяване на сложни типове данни за надеждни приложения

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

Какво са генеричните типове?

Генеричните типове предоставят начин за писане на преизползваем код, който може да работи с различни типове. Вместо да пишете отделни функции или класове за всеки тип, който искате да поддържате, можете да напишете една функция или клас, които използват типови параметри. Тези типови параметри са заместители (placeholders) за действителните типове, които ще бъдат използвани, когато функцията или класът се извиква или инстанцира. Това е особено полезно при работа със сложни структури от данни, където типът на данните в тези структури може да варира.

Предимства от използването на генерични типове

• Преизползваемост на кода: Пишете код веднъж и го използвайте с различни типове. Това намалява дублирането на код и прави кодовата ви база по-лесна за поддръжка.
• Типова безопасност: Генеричните типове позволяват на компилатора на TypeScript да налага типова безопасност по време на компилация. Това помага за предотвратяване на грешки по време на изпълнение (runtime errors), свързани с несъответствие на типове.
• Подобрена четимост: Генеричните типове правят кода ви по-четим, като ясно указват типовете, с които вашите функции и класове са проектирани да работят.
• Подобрена производителност: В някои случаи генеричните типове могат да доведат до подобрения в производителността, тъй като компилаторът може да оптимизира генерирания код въз основа на конкретните използвани типове.

Основен синтаксис на генеричните типове

Основният синтаксис на генеричните типове включва използването на ъглови скоби (< >) за деклариране на типови параметри. Тези типови параметри обикновено се назовават T, K, V и т.н., но можете да използвате всеки валиден идентификатор. Ето един прост пример за генерична функция:

function identity<T>(arg: T): T {
  return arg;
}

let myString: string = identity<string>("hello");
let myNumber: number = identity<number>(123);
let myBoolean: boolean = identity<boolean>(true);

console.log(myString); // Output: hello
console.log(myNumber); // Output: 123
console.log(myBoolean); // Output: true

В този пример <T> декларира типов параметър с име T. Функцията identity приема аргумент от тип T и връща стойност от тип T. Когато извиквате функцията, можете изрично да посочите типовия параметър (напр. identity<string>) или да оставите TypeScript да го изведе въз основа на типа на аргумента.

Работа със сложни типове данни

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

Генерични масиви

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

function arrayToString<T>(arr: T[]): string {
  return arr.join(", ");
}

let numberArray: number[] = [1, 2, 3, 4, 5];
let stringArray: string[] = ["apple", "banana", "cherry"];

console.log(arrayToString(numberArray)); // Output: 1, 2, 3, 4, 5
console.log(arrayToString(stringArray)); // Output: apple, banana, cherry

Тук функцията arrayToString приема масив от тип T[] и връща текстово представяне на масива. Тази функция работи с масиви от всякакъв тип, което я прави силно преизползваема.

Генерични обекти

Генеричните типове могат да се използват и за дефиниране на функции или класове, които работят с обекти с различни форми:

interface Person {
  name: string;
  age: number;
  country: string; // Added country for global context
}

interface Product {
  id: number;
  name: string;
  price: number;
  currency: string; // Added currency for global context
}

function displayInfo<T extends { name: string }>(item: T): void {
  console.log(`Name: ${item.name}`);
}

let person: Person = { name: "Alice", age: 30, country: "USA" };
let product: Product = { id: 1, name: "Laptop", price: 1200, currency: "USD" };

displayInfo(person); // Output: Name: Alice
displayInfo(product); // Output: Name: Laptop

В този пример функцията displayInfo приема обект от тип T, който трябва да има свойство name от тип string. Клаузата extends { name: string } е ограничение (constraint), което определя минималните изисквания за типовия параметър T. Това гарантира, че функцията може безопасно да достъпи свойството name.

Напреднала употреба на генерични типове

Генеричните типове в TypeScript предлагат по-напреднали функции, които ви позволяват да създавате още по-гъвкав и мощен код. Нека разгледаме някои от тези функции:

Множество типови параметри

Можете да дефинирате функции или класове с множество типови параметри:

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

interface Name {
  firstName: string;
}

interface Age {
  age: number;
}

const person: Name = { firstName: "Bob" };
const details: Age = { age: 42 };

const merged = merge(person, details);
console.log(merged.firstName); // Output: Bob
console.log(merged.age); // Output: 42

Функцията merge приема два обекта от типове T и U и връща нов обект, който съдържа свойствата и на двата обекта. Това е мощен начин за комбиниране на данни от различни източници.

Генерични ограничения

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

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity([1, 2, 3]); // Output: 3
loggingIdentity("hello"); // Output: 5
// loggingIdentity(123); // Error: Argument of type 'number' is not assignable to parameter of type 'Lengthwise'.

Функцията loggingIdentity приема аргумент от тип T, който трябва да има свойство length от тип number. Това гарантира, че функцията може безопасно да достъпи свойството length.

Генерични класове

Генеричните типове могат да се използват и с класове:

class DataStorage<T> {
  private data: T[] = [];

  addItem(item: T) {
    this.data.push(item);
  }

  removeItem(item: T) {
    this.data = this.data.filter(d => d !== item);
  }

  getItems(): T[] {
    return [...this.data];
  }
}

const textStorage = new DataStorage<string>();
textStorage.addItem("apple");
textStorage.addItem("banana");
textStorage.removeItem("apple");
console.log(textStorage.getItems()); // Output: [ 'banana' ]

const numberStorage = new DataStorage<number>();
numberStorage.addItem(1);
numberStorage.addItem(2);
numberStorage.removeItem(1);
console.log(numberStorage.getItems()); // Output: [ 2 ]

Класът DataStorage може да съхранява данни от всякакъв тип T. Това ви позволява да създавате преизползваеми структури от данни, които са типово безопасни.

Генерични интерфейси

Генеричните интерфейси са полезни за дефиниране на договори (contracts), които могат да работят с различни типове. Например:

interface Result<T, E> {
  success: boolean;
  data?: T;
  error?: E;
}

interface User {
  id: number;
  username: string;
  email: string;
}

interface ErrorMessage {
  code: number;
  message: string;
}

function fetchUser(id: number): Result<User, ErrorMessage> {
  if (id === 1) {
    return { success: true, data: { id: 1, username: "john.doe", email: "john.doe@example.com" } };
  } else {
    return { success: false, error: { code: 404, message: "User not found" } };
  }
}

const userResult = fetchUser(1);
if (userResult.success) {
  console.log(userResult.data.username);
} else {
  console.log(userResult.error.message);
}

Интерфейсът Result дефинира генерична структура за представяне на резултата от дадена операция. Той може да съдържа или данни от тип T, или грешка от тип E. Това е често срещан модел за обработка на асинхронни операции или операции, които могат да се провалят.

Помощни типове (Utility Types) и генерични типове

TypeScript предоставя няколко вградени помощни типа, които работят добре с генерични типове. Тези помощни типове могат да ви помогнат да трансформирате и манипулирате типове по мощни начини.

Partial<T>

Partial<T> прави всички свойства на тип T незадължителни (optional):

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

type PartialPerson = Partial<Person>;

const partialPerson: PartialPerson = { name: "Alice" }; // Valid

Readonly<T>

Readonly<T> прави всички свойства на тип T само за четене (readonly):

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

type ReadonlyPerson = Readonly<Person>;

const readonlyPerson: ReadonlyPerson = { name: "Bob", age: 42 };
// readonlyPerson.age = 43; // Error: Cannot assign to 'age' because it is a read-only property.

Pick<T, K>

Pick<T, K> избира набор от свойства K от тип T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type NameAndAge = Pick<Person, "name" | "age">;

const nameAndAge: NameAndAge = { name: "Charlie", age: 28 };

Omit<T, K>

Omit<T, K> премахва набор от свойства K от тип T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type PersonWithoutEmail = Omit<Person, "email">;

const personWithoutEmail: PersonWithoutEmail = { name: "David", age: 35 };

Record<K, T>

Record<K, T> създава тип с ключове K и стойности от тип T:

type CountryCodes = "US" | "CA" | "UK" | "DE" | "FR" | "JP" | "CN" | "IN" | "BR" | "AU"; // Expanded list for global context
type Currency = "USD" | "CAD" | "GBP" | "EUR" | "JPY" | "CNY" | "INR" | "BRL" | "AUD"; // Expanded list for global context

type CurrencyMap = Record<CountryCodes, Currency>;

const currencyMap: CurrencyMap = {
  "US": "USD",
  "CA": "CAD",
  "UK": "GBP",
  "DE": "EUR",
  "FR": "EUR",
  "JP": "JPY",
  "CN": "CNY",
  "IN": "INR",
  "BR": "BRL",
  "AU": "AUD",
};

Mapped Types

Mapped types ви позволяват да трансформирате съществуващи типове чрез итериране по техните свойства. Това е мощен начин за създаване на нови типове въз основа на съществуващи. Например, можете да създадете тип, който прави всички свойства на друг тип само за четене:

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

type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
};

const readonlyPerson: ReadonlyPerson = { name: "Eve", age: 25 };
// readonlyPerson.age = 26; // Error: Cannot assign to 'age' because it is a read-only property.

В този пример [K in keyof Person] итерира по всички ключове на интерфейса Person, а Person[K] достъпва типа на всяко свойство. Ключовата дума readonly прави всяко свойство само за четене.

Условни типове (Conditional Types)

Условните типове ви позволяват да дефинирате типове въз основа на условия. Това е мощен начин за създаване на типове, които се адаптират към различни сценарии.

type NonNullable<T> = T extends null | undefined ? never : T;

type MaybeString = string | null | undefined;
type StringType = NonNullable<MaybeString>; // string

function getValue<T>(value: T): NonNullable<T> {
  if (value == null) { // Handles both null and undefined
    throw new Error("Value cannot be null or undefined");
  }
  return value as NonNullable<T>;
}

try {
  const validValue = getValue("hello");
  console.log(validValue.toUpperCase()); // Output: HELLO

  const invalidValue = getValue(null); // This will throw an error
  console.log(invalidValue); // This line will not be reached
} catch (error: any) {
  console.error(error.message); // Output: Value cannot be null or undefined
}

В този пример типът NonNullable<T> проверява дали T е null или undefined. Ако е така, той връща never, което означава, че типът не е позволен. В противен случай връща T. Това ви позволява да създавате типове, които гарантирано не са null-способни.

Най-добри практики за използване на генерични типове

Ето някои най-добри практики, които трябва да имате предвид, когато използвате генерични типове:

• Използвайте описателни имена за типовите параметри: Избирайте имена, които ясно показват целта на типовия параметър.
• Използвайте ограничения, за да лимитирате типовете, които могат да се използват с генеричен типов параметър: Това гарантира, че вашият генеричен код може безопасно да работи с посочените типове.
• Поддържайте генеричния си код прост и фокусиран: Избягвайте прекаленото усложняване на генеричния код с твърде много типови параметри или сложни ограничения.
• Документирайте генеричния си код подробно: Обяснете целта на типовите параметри и всички използвани ограничения.
• Обмислете компромисите между преизползваемостта на кода и типовата безопасност: Въпреки че генеричните типове могат да подобрят преизползваемостта на кода, те също могат да направят кода ви по-сложен. Претеглете ползите и недостатъците, преди да използвате генерични типове.
• Обмислете локализация и глобализация (l10n и g11n): Когато работите с данни, които трябва да се показват на потребители в различни региони, уверете се, че вашите генерични типове поддържат подходящо форматиране и културни конвенции. Например, форматирането на числа и дати може да варира значително в различните езикови променливи (locales).

Примери в глобален контекст

Нека разгледаме някои примери за това как генеричните типове могат да се използват в глобален контекст:

Конвертиране на валута

interface ConversionRate {
  rate: number;
  fromCurrency: string;
  toCurrency: string;
}

function convertCurrency<T extends ConversionRate>(amount: number, rate: T): number {
  return amount * rate.rate;
}

const usdToEurRate: ConversionRate = { rate: 0.85, fromCurrency: "USD", toCurrency: "EUR" };
const amountInUSD = 100;
const amountInEUR = convertCurrency(amountInUSD, usdToEurRate);
console.log(`${amountInUSD} USD is equal to ${amountInEUR} EUR`); // Output: 100 USD is equal to 85 EUR

Форматиране на дата

interface DateFormatOptions {
  locale: string;
  options: Intl.DateTimeFormatOptions;
}

function formatDate<T extends DateFormatOptions>(date: Date, format: T): string {
  return date.toLocaleDateString(format.locale, format.options);
}

const currentDate = new Date();

const usDateFormat: DateFormatOptions = { locale: "en-US", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const germanDateFormat: DateFormatOptions = { locale: "de-DE", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const japaneseDateFormat: DateFormatOptions = { locale: "ja-JP", options: { year: 'numeric', month: 'long', day: 'numeric' } };

console.log("US Date: " + formatDate(currentDate, usDateFormat));
console.log("German Date: " + formatDate(currentDate, germanDateFormat));
console.log("Japanese Date: " + formatDate(currentDate, japaneseDateFormat));

Услуга за превод

interface Translation {
  [key: string]: string; // Allows for dynamic language keys
}

interface LanguageData<T extends Translation> {
  languageCode: string;
  translations: T;
}

const englishTranslations: Translation = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our website!"
};

const spanishTranslations: Translation = {
  "hello": "Hola",
  "goodbye": "Adiós",
  "welcome": "¡Bienvenido a nuestro sitio web!"
};

const frenchTranslations: Translation = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre site web !"
};


const languageData: LanguageData<typeof englishTranslations>[] = [
  {languageCode: "en", translations: englishTranslations },
  {languageCode: "es", translations: spanishTranslations },
  {languageCode: "fr", translations: frenchTranslations}
];

function translate<T extends Translation>(key: string, languageCode: string, languageData: LanguageData<T>[]): string {
  const lang = languageData.find(lang => lang.languageCode === languageCode);
  if (!lang) {
    return `Translation for ${key} in ${languageCode} not found.`;
  }
  return lang.translations[key] || `Translation for ${key} not found.`;
}

console.log(translate("hello", "en", languageData)); // Output: Hello
console.log(translate("hello", "es", languageData)); // Output: Hola
console.log(translate("welcome", "fr", languageData)); // Output: Bienvenue sur notre site web !
console.log(translate("missingKey", "de", languageData)); // Output: Translation for missingKey in de not found.

Заключение

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