TypeScript - Общие интерфейсы

Здравствуйте, будущая звезда программирования! Сегодня мы отправимся в увлекательное путешествие в мир TypeScript и познакомимся с одной из его самых мощных функций: Общие интерфейсы (Generic Interfaces). Не волнуйтесь, если вы новички в программировании - я буду вашим доброжелательным проводником, и мы будем двигаться шаг за шагом. К концу урока вы будете удивлены, сколько вы узнали!

Что такое Общие интерфейсы?

Прежде чем мы погрузимся в общие интерфейсы, давайте быстро освежим в памяти, что такое интерфейсы в TypeScript. Интерфейс - это как контракт, который определяет структуру объекта. Он告诉我们, какие свойства и методы должен иметь объект.

Теперь представьте, если бы мы могли сделать эти интерфейсы более гибкими, способными работать с различными типами данных. Вот где на помощь приходят общие интерфейсы! Они позволяют нам создавать интерфейсы, которые могут адаптироваться к различным типам данных, делая наш код более повторяемым и универсальным.

Основной Общий Интерфейс

Давайте начнем с простого примера:

interface Box<T> {
contents: T;
}

let numberBox: Box<number> = { contents: 42 };
let stringBox: Box<string> = { contents: "Hello, TypeScript!" };

В этом примере Box - это общий интерфейс. <T> - это как placeholder для типа, который мы укажем позже. Мы можем использовать этот интерфейс для создания коробок, способных удерживать различные типы предметов:

• numberBox - это Box, который удерживает число.
• stringBox - это Box, который удерживает строку.

Не правда ли, это здорово? Это как если бы у нас была магическая коробка, которая может адаптироваться под то, что мы в нее положим!

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

Общие интерфейсы могут иметь более одного параметра типа. Давайте посмотрим на пример:

interface Pair<T, U> {
first: T;
second: U;
}

let pair1: Pair<number, string> = { first: 1, second: "one" };
let pair2: Pair<boolean, Date> = { first: true, second: new Date() };

Здесь Pair - это общий интерфейс с двумя параметрами типа, T и U. Это позволяет нам создавать пары предметов, где каждый предмет может быть другого типа. Это как создание динамической пары из любых двух типов, которые мы хотим!

Общие интерфейсы с методами

Интерфейсы также могут включать методы, и эти методы могут использовать общие типы. Давайте посмотрим на пример:

interface Reversible<T> {
data: T[];
reverse(): T[];
}

class NumberArray implements Reversible<number> {
constructor(public data: number[]) {}

reverse(): number[] {
return this.data.slice().reverse();
}
}

let numbers = new NumberArray([1, 2, 3, 4, 5]);
console.log(numbers.reverse()); // Вывод: [5, 4, 3, 2, 1]

В этом примере Reversible - это общий интерфейс, который включает метод reverse(). Класс NumberArray реализует этот интерфейс для чисел. Прелесть этого подхода заключается в том, что мы могли бы легко создать аналогичные классы для строк, объектов или любого другого типа!

Общий интерфейс как тип функции

Теперь давайте разберемся, как мы можем использовать общие интерфейсы для описания типов функций. Это место, где вещи становятся真的很 интересными!

interface Transformer<T, U> {
(input: T): U;
}

let stringToNumber: Transformer<string, number> = (input) => parseInt(input);

console.log(stringToNumber("42")); // Вывод: 42

В этом примере Transformer - это общий интерфейс, описывающий функцию. Он принимает входного параметра типа T и возвращает значение типа U. Затем мы создаем функцию stringToNumber, которая преобразует строку в число, используя этот интерфейс.

Реальный пример: Обработчик данных

Давайте рассмотрим более сложный пример, с которым вы можете столкнуться в реальном программировании:

interface DataProcessor<T, U> {
processItem(item: T): U;
processArray(items: T[]): U[];
}

class StringToNumberProcessor implements DataProcessor<string, number> {
processItem(item: string): number {
return parseInt(item);
}

processArray(items: string[]): number[] {
return items.map(item => this.processItem(item));
}
}

let processor = new StringToNumberProcessor();
console.log(processor.processItem("42"));          // Вывод: 42
console.log(processor.processArray(["1", "2", "3"])); // Вывод: [1, 2, 3]

В этом примере мы определяем DataProcessor интерфейс, который может обрабатывать отдельные элементы или массивы элементов. Класс StringToNumberProcessor реализует этот интерфейс для преобразования строк в числа. Этот паттерн极其 полезен, когда вам нужно обрабатывать данные различными способами, поддерживая при этом типобезопасность.

Заключение

Поздравляю! Вы сделали большой шаг в своем пути по TypeScript, узнав о общих интерфейсах. Эти мощные инструменты позволяют нам писать гибкий, повторяемый код, который может работать с различными типами данных. Помните, что практика делает мастера, поэтому не бойтесь экспериментировать с этими концепциями в своих проектах.

Вот quick reference таблица методов, которые мы рассмотрели:

Метод	Описание
interface Box<T>	Создает общий интерфейс для коробки, которая может удерживать любой тип
interface Pair<T, U>	Создает общий интерфейс для пары предметов разных типов
interface Reversible<T>	Создает общий интерфейс с методом для反转 массива
interface Transformer<T, U>	Создает общий интерфейс для функции, которая преобразует один тип в другой
interface DataProcessor<T, U>	Создает общий интерфейс для обработки отдельных элементов или массивов элементов

Продолжайте программировать, продолжайте учиться, и помните - в мире TypeScript, обобщения - это ваша суперсила! ?‍♀️?‍♂️

Credits: Image by storyset