Встроенные типы объектов в TypeScript

В JavaScript существует много встроенных классов, имеющих свой тип для объектов. К примеру, объекты с датой, с регулярными выражениями, а также DOM элементы.

Давайте посмотрим на примерах.

Дата

Пусть в переменной будет храниться дата, которую мы создадим средствами JavaScript через команду new Date.

Получится, что наша переменная будет иметь тип Date:

let date: Date;

Давайте запишем в эту переменную объект с датой, содержащей текущий момент времени:

let date: Date = new Date;

А теперь запишем объект с датой, содержащей заданный момент времени:

let date: Date = new Date(2030, 11, 31);

Регулярки

Давайте сделаем переменную, содержащую регулярное выражение:

let reg: RegExp;

Запишем в нее регулярное выражение:

let reg: RegExp = /.+?/;

Либо воспользуемся альтернативным способом задания регулярки:

let reg: RegExp = new RegExp('.+?');

DOM элементы

Для DOM элементов также есть свои типы данных. Посмотреть их иерархию можно, к примеру, вот тут. Давайте посмотрим работу DOM элементами на примере. Пусть у нас есть следующий див:

<div></div>

Давайте получим ссылку на этот див в переменную. Все DOM элементы относятся к типу HTMLElement. Укажем этот тип нашей переменной:

let elem: HTMLElement;

Запишем теперь в эту переменную ссылку на наш див:

let elem: HTMLElement = document.querySelector('div');
console.log(elem);

Все дивы, помимо того, что являются DOM элементами с типом HTMLElement, также относятся к типу HTMLDivElement (аналогичные типы есть и у других тегов). Давайте для нашего элемента укажем более точный тип:

let elem: HTMLDivElement = document.querySelector('div');
console.log(elem);

Коллекции

Пусть у нас есть несколько дивов:

<div></div>
<div></div>
<div></div>

Давайте запишем в переменную коллекцию этих DOM элементов:

let lst: NodeList = document.querySelectorAll('div');

Практические задачи

Сделайте переменную, которая будет содержать объект с датой.

Сделайте переменную, которая будет содержать регулярное выражение.

Сделайте переменную, которая будет содержать промис.

Сделайте переменную, которая будет содержать DOM элемент.

Сделайте переменную, которая будет содержать ссылку на тег ul.

Сделайте переменную, которая будет содержать коллекцию Map.

Сделайте переменную, которая будет содержать коллекцию Set.

Сделайте переменную, которая будет содержать коллекцию NodeList.

Сделайте переменную, которая будет содержать коллекцию HTMLCollection.