Серия «Typescript» — Массив включает тип

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

Давайте создадим тип для функции JavaScript Array.includes в системе типов. Тип принимает два аргумента. На выходе должно получиться булево true или false.

Функция JavaScript Array.includes выглядит следующим образом:

const arr = ["a","b","c"]:
arr.includes("a") // true
Войти в полноэкранный режим Выйти из полноэкранного режима

А наш тип должен выглядеть примерно так:

<Includes<[1, 2, 3, 5, 6, 7], 7> // true
<Includes<[1, 2, 3, 5, 6, 7], 4> // false
Вход в полноэкранный режим Выход из полноэкранного режима

Итак, что мы знаем?

  • Мы знаем, что наш тип должен принимать массив и значение в качестве входных данных.
  • Мы должны проверить, существует ли нужное значение в массиве.
  • После проверки каждого элемента в массиве мы возвращаем соответствующее булево значение.
type Includes<TArray extends readonly unknown[], Value> = 
TArray extends [infer FIRST,... infer REST] ? 
Equal<Value,FIRST> extends true ? true : Includes<REST,Value> : false
Вход в полноэкранный режим Выйти из полноэкранного режима

Для этого типа нам понадобится утилита Equal, которая проверяет, равны ли два входа.

TArray расширяет readonly unknown[] Сначала мы проверяем, что наш TArray имеет тип array.

Понимание ключевого слова infer
Ключевое слово infer можно использовать в условии в условном типе, чтобы поместить выводимый тип в переменную. Затем эта переменная может быть использована внутри условных ветвей.

TArray extends [infer FIRST,... infer REST] Мы инферируем первый элемент массива, а затем остальные элементы.

Equal<Value,FIRST> extends true Мы проверяем, равен ли первый элемент искомому значению, если да, то мы его получили и поэтому должны вернуть true. В противном случае мы рекурсивно проверяем остальные элементы : Includes<REST,Value>.

И наконец, если элемент не найден в массиве, мы возвращаем false : false.

Эта задача была сложной, но мы узнали, как работает функция includes под капотом.

Спасибо!

Вы можете найти меня здесь Мой Твиттер

Оцените статью
devanswers.ru
Добавить комментарий