TypeScript — отличный способ добавить намерения в ваш код JavaScript и приложения. Возможность явно определять типы переменных при объявлении переменных — отличный способ избежать конфликтов типов позже в вашем коде. Хотя это просто с примитивными типами, такими как числа и строки, не так ясно, как это реализовать, когда речь идет о таких объектах, как массивы.
В этой статье мы рассмотрим, как создавать массивы TypeScript, в частности, можно ли создавать массивы смешанного типа.
Создание массивов в TypeScript
Массивы TypeScript отлично подходят для того, чтобы гарантировать, что вы не получите случайные типы данных в своем массиве. Чтобы определить тип массива, вы можете сделать следующее:
Синтаксис для создания массива TypeScript заключается в том, чтобы назвать вашу переменную, а затем добавить ‹element-type›[], чтобы объявить тип. Это можно использовать для любого примитивного типа JavaScript, как мы видели выше, с числами, строками и даже элементами HTML.
Вы, наверное, заметили, что все эти объявления относятся к одному типу. Это полезно для обеспечения того, чтобы в наш массив не попадали никакие типы, кроме объявленного типа, но что, если нам нужен другой тип? Возможно ли иметь массив TypeScript с несколькими типами?
Как использовать операторы объединения
Сначала я думал, что это невозможно. После продолжительного чтения документации по TypeScript мне еще предстояло увидеть, как можно объявить тип массива, допускающий несколько типов. Затем я нашел оператор объединения.
Если вы не знакомы, оператор union — это инструмент, используемый для обеспечения строгости проверки типов TypeScript, при этом обеспечивая гибкость нескольких типов из белого списка. Это полезно, если ваш ввод может быть целым числом или строкой, и вы хотите иметь возможность присвоить их переменной myNumber.
Вот пример оператора объединения, используемого для аргументов функции, чтобы разрешить строковые «числа» перед отображением подтверждения или сообщения об ошибке:
Здесь мы позволяем функции принимать либо числа, либо строки в случае, если кто-то передает «1» вместо 1. Затем мы можем использовать дополнительные проверки типов, чтобы убедиться, что данное нам значение допустимо.
Смешивание типов в массивах TypeScript
Теперь, когда мы рассмотрели присваивание типов с одним аргументом с помощью операторов объединения, давайте посмотрим, как использовать операторы объединения с массивами. Ниже у меня есть пример кода из игры Hangman, которую я создал на TypeScript:
Здесь я хотел создать отображение ввода, которое добавлялось бы в DOM всякий раз, когда я переключался между этапами игры. Я использовал TypeScript для установки типов каждого из создаваемых мной элементов DOM, а затем помещал их в массив inputChildren, чтобы облегчить итерацию вставки.
Это работает, но я не использую TypeScript в полной мере, чтобы гарантировать, что inputChildren получает только правильные типы элементов. Чтобы исправить это, мы можем использовать оператор union для внесения в белый список типов, которые могут быть приняты в наш массив. После рефакторинга создания моего массива я получил этот код, в котором явно указано, какие типы переменных должны быть разрешены в нашем массиве:
Намного лучше!
Заключение
Одна проблема, которая у меня все еще есть с этим кодом, заключается в том, что все еще зависит от порядка аргументов и предоставления правильного количества каждого типа. Сейчас я проверяю, чтобы убедиться, что мы не передаем неправильный тип, такой как числовой тип или HTMLImageElement. Однако я не проверяю, что я передаю один из каждого из желаемых типов. Это то, что я могу рассмотреть более подробно в следующей статье. Дайте мне знать в комментариях ваши любимые расширенные методы TypeScript
Примечания
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#unions
https://stackoverflow.com/questions/29382389/defining-array-with-multiple-types-in-typescript
https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html
