Я хотел бы начать с того, что делаю эту серию статей, чтобы лучше изучить и понять 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 под капотом.
Спасибо!
Вы можете найти меня здесь Мой Твиттер