Обзор TypeScript

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

TypeScript – что это?

TypeScript (или сокращенно TS) представляет собой язык программирования, во многом схожий с JavaScript, но без многочисленных недостатков последнего. Он используется для frontend-разработки, то есть создания той части приложений, с которой непосредственно контактирует пользователь.

Созданный с помощью TypeScript программный код без проблем компилируется в JS и может быть использован для создания самых разнообразных проектов на любых браузерах и платформах.

Дополнительной опцией становится возможность выбора версии JavaScript, для которой пишется программа.

Еще одним достоинством TypeScript становится открытый код языка программирования. Результатом выступает быстрое развитие продукта, запущенного относительно недавно – в октябре 2012 года. Сегодня он имеет многочисленное комьюнити и входит в топы любых рейтингов популярности среди frontend-разработчиков. В настоящее время последней из выпущенных версий является 4.7.4, которая датируется 17.06.2022 года.

Описание TS было бы неполным без упоминания разработчика. Им выступает Андерс Хейлсберг, который стал непосредственным создателем еще нескольких языков программирования. В числе последних Delphi, Turbo Pascal и C#.

Преимущества TS по сравнению с JS

Можно выделить три главных достоинства TypeScript, выгодно отличающих язык программирования от JavaScript. Каждый целесообразно рассмотреть более внимательно.

Строгая (статическая) типизация

Значительная часть проблем JavaScript объясняется динамической типизацией данных. TypeScript использует противоположный принцип работы, то есть статический. Каждому виду данных присваивается определенный тип – числовой, логический, строковый – что позволяет минимизировать неудобства работы с языком. В том числе – за счет простого и понятного описания данных с помощью различных способов, например, функции enum с ограниченным набором значений.

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

Применительно к JS такой принцип не работает, а баг можно обнаружить только в процессе тестирования или даже после запуска приложения.

Улучшенное ООП

Оба языка программирования относятся к объектно-ориентированным, то есть предусматривают несколько обязательных составляющих. В их числе: объекты, классы и наследование. Но TypeScript использует заметно больше возможностей подобных систем, к числу которых относятся:

• активное применение разнообразных интерфейсов;
• задействование сразу трех модификаторов доступа (protected, private и public – по степени защиты);
• опция определения полей, используемых в конструкторе;
• функция обобщения;
• преобразование данных одного типа в другой;
• активация абстрактных классов и т.д.

Существует немалая вероятность включение перечисленных возможностей в функционал традиционного JavaScript. Но даже в этом случае обеспечить поддержку приложений всеми браузерами получится далеко не сразу, если вообще получится.

Совместимость с JS

Ключевое достоинство рассматриваемого программного продукта. Именно на возможности компиляции кода в JavaScript базируется весь набор функциональных возможностей TypeScript. Без подобной интеграции смысл в еще одном языке программирования попросту теряется, так как именно JS используется в подавляющем большинстве уже работающих и проектируемых приложений.

Использование для программирования на Angular

Angular входит в число наиболее популярных фреймворков. Начиная со второй версии и до актуальных на сегодня модификаций, он написан именно на TypeScript. Что становится одним из главных аргументов в пользу изучения языка, позволяющего наиболее полно использовать незаурядные возможности программной платформы.

Минусы TS

Значительная часть программистов охотно использует TypeScript. Тем более – с дополнением в виде широко применяемого фреймворка Angular.

Но даже очевидные преимущества языка программирования не способны поколебать лидирующие позиции JavaScript.

В пользу последнего выступают сразу несколько весомых аргументов, в числе которых:

• намного более продолжительная история;
• огромное число разработанных с его использованием приложений;
• заметно меньшее количество программистов, освоивших TS;
• сравнительно небольшое количество библиотек, рассчитанных на использование TypeScript.

Установка TS

Процедура установки TypeScript на ПК выглядит следующим образом:

1. Подготовительная установка Node.JS.
2. Создание файла, имеющего расширение .ts и расположенного в папке со скриптами.
3. Компиляция файла app.ts посредством введения команды tsc app.ts.

Результатом выполнения перечисленных операций становится появление в указанной папке файла app.ts.

Именно его необходимо подключить к программируемой странице приложения.

Альтернативный вариант получения аналогичного результата – это написание несложной программы для компиляции. Она представляет собой файл конфигурации tscongig.json, в котором размещается следующий программный код.

{

"compilerOptions": {

"target": "es5",

"removeComments": true,

"outFile": "app.js"

}

}

В созданном файле хранятся базовые параметры, необходимые для работы компилятора. Чтобы запустить программу, достаточно ввести команду tsc в комнатную строку. Ее действие распространится на все файлы, которые имеют расширение .ts и расположены в данной папке.

Определение объектов

Базовым принципом работы TypeScript выступает жесткая типизация данных и объектов, которая позволяет контролировать и управлять динамической составляющей JavaScript.

Разработчиками языка программирования предусмотрено нескольких их типов.

Основные необходимо перечислить и описать более подробно.

Множества

Правилами TS предусмотрено несколько типов множеств. Они необходимы для поддержки композиции программного кода и создания взаимосвязи между его отдельными элементами.

Maps

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

type User = {

id: number

username: string

name: string

}

const user: User = {

id: 1,

username: 'Superman',

name: 'Clark Kent',

}

Vectors

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

Tuples

Кортежи имеют аналогичную структуру – последовательную и индексированную. Ключевым отличием от векторов выступает зависимость типа данных от позиции конкретного элемента в базе.

Type Guards

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

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

Валидация

Валидация или доказательство подтверждения выполнения определенного требования выступает характерной особенностью TS. Она обеспечивается за счет грамотного использования предохранителей типов и позволяет установить корректный тип данных для дальнейшей синхронизации системы.

Настройка TS

Настройка Type Script происходит посредством изменения содержимого файла tsconfig.json. Он размещается в корневом каталоге проекта и включает наборы ключей и значений, которые отвечают за решение трех задач:

• определение структуры проекта;
• работу типизатора (устанавливает типы данных и проверяет корректность их значений);
• выполнение транспиляции (трансформация кода с одного языка программирования на другой).

Можно выделить несколько наиболее значимых настроек TypeScript, к числу которых относятся:

• declaration – задает необходимость генерации файлов определения;
• noEmitOnError – устанавливает актуальность прерывания процессе компиляции в случае обнаружения ошибки;
• strict – регламентирвает проведение дополнительных проверок;
• noEmitHelpers – запускает механизм предоставления дополнительных утилит, изначально не предусмотренных модулем;
• removeComments и supressImplicitAnyIndexErrors – для обеих настроек стандартным значением является true.

Пишем первое приложение на TypeScript

Чтобы лучше понять принцип написания программного кода на TypeScript целесообразно привести пример приложения, выполненного с помощью этого языка программирования. Оно предельно простое и предназначено для просмотра сообщений. Задачей программы выступает определение типа сообщения (один из трех – информационное, предупреждающее и сообщение об ошибке) и придание ему определенного стиля в зависимости от этого.

Дополнительная опция – просмотр сообщения, который активируется нажатием специальной кнопки. Программный код в файле msg.html приложения будет выглядеть следующим образом.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Сообщения</title>

<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="script.js"></script>

</head>

<body>

<h1>Сообщения</h1>

<div class="param">

<div>

<p>Заголовок</p>

<input type="text" id="header" value="Заголовок">

</div>

<div>

<p>Текст</p>

<textarea id="body" rows="10">Текст сообщения</textarea>

</div>

<div>

<p>Тип</p>

<select id="type">

<option value="info">Сообщение</option>

<option value="warning">Предупреждение</option>

<option value="error">Ошибка</option>

</select>

</div>

<button onclick="updateMessage();">Показать</button>

</div>

<div id="result" class="result">

<div class="info message">

<div class="info header">Заголовок</div>

<div class="info body">Текст сообщения</div>

</div>

</div>

</body>

</html>

Еще один файл – style.css – отвечает за настройку внешнего вида элементов. Его содержимое выглядит так.

body {

 font-family: Verdana, sans-serif;

 color: #336699;

}

div {

 margin: 5px;

 padding: 5px; 

}

.param {

 width:300px;

 display: inline-block;

 float: left;

 background-color: #336699;

 color: #ffffff;

 border-radius: 10px;

}

.result {

 display: inline-block;

 float: left;

 width: 300px;

 background-color: #ffffff;

 color: #336699;

 border: 1px solid #003366;

 border-radius: 10px;

}

.message {

 border: 1px solid;

 border-radius: 10px;

 padding: 0px;

}

.header {

 font-weight: bold;

 font-size: larger;

}

.body {

 font-style: italic;

}

.info {

color: #009900;

border-color: #009900;

}

.warning {

color: #FF8C00;

border-color: #FF8C00;

}

.error {

color: #990000;

border-color: #990000;

}

Третий файл приложения – script.ts. Он отвечает за изменение стиля элемента в зависимости от его типа. Программный код имеет следующий вид.

type msgTypes = "info" | "warning" | "error";

type msgParts = "header" | "body";

class Message {

 header: string;

 body: string;

 type: msgTypes;

 constructor(header: string, body: string, type: msgTypes) {

this.header = header;

this.body = body;

this.type = type;

 }

 insert(resultElement: HTMLElement) : void {

resultElement.innerHTML =

`<div class="${this.type} message" id="message">

 <div class="${this.type} header">${this.header}</div>

 <div class="${this.type} body">${this.body}</div>

</div>`;

 }

}

function updateMessage() {

const header = (document.getElementById("header") as HTMLInputElement).value;

 const body = (document.getElementById("body") as HTMLInputElement).value;

 const type = (document.getElementById("type") as HTMLSelectElement).value;

let msg = new Message(header, body, type as msgTypes);

 msg.insert(document.getElementById("result"));

}

Результатом компиляции становится файл script.js. Он содержит итоговый вариант приложения со следующим программным кодом.

var Message = /** @class */ (function () {

function Message(header, body, type) {

this.header = header;

this.body = body;

this.type = type;

}

Message.prototype.insert = function (resultElement) {

resultElement.innerHTML =

"<div class=\"".concat(this.type, " message\" id=\"message\">\n <div class=\"").concat(this.type, " header\">").concat(this.header, "</div>\n <div class=\"").concat(this.type, " body\">").concat(this.body, "</div>\n</div>");

};

return Message;

}());

function updateMessage() {

var header = document.getElementById("header").value;

var body = document.getElementById("body").value;

var type = document.getElementById("type").value;

var msg = new Message(header, body, type);

msg.insert(document.getElementById("result"));

}

Где учить TypeScript?

Если вы хотите стать фронтэнд-разработчиком, то TypeScript вам в любом случае придется осваивать – на нем работают как уже готовые приложения (которые вам нужно будет дописывать), так и популярные фреймворки. Проще всего выучить TypeScript с помощью курсов, как и фронтэнд-разработку в целом:

• React + Next.js - с нуля. TypeScript, Hooks, SSR и CSS Grid. Этот курс даст вам не просто знания в TypeScript, он даст вам стэк технологий на базе фреймворка Next.js, с помощью которого вы сможете разрабатывать большие приложения самостоятельно. В основе курса лежит непосредственно TypeScript – на этом языке вы будете писать код. Кроме того, вы освоите работу с Figma, работу с хуками Реакта, основы роутинга, верстку, создание компонентов и так далее. Курс – полностью онлайн без временных рамок, можете проходить его тогда, когда вам удобно. Всего в курсе 149 уроков, 19 часов видео. Курс – дешевый, 1 690 рублей.
• Дистанционное обучение Frontend-разработчиков с любого уровня. Название курса полностью себя описывает: вам дадут профессию фронтэнда через дистанционное обучение, ваш начальный уровень значения не имеет. Длительность курса – 12 месяцев. В первые 4 месяца вы будете изучать основы основ: Web в целом и JavaScript. Затем за 3 месяца вы освоите React.js, последующие 3 месяца вы будете делать крупный командный проект с другими учениками. В последние 2 месяца обучения вас будут готовить к собеседованию и оказывать помощь в трудоустройстве. Учеба – в небольших группах, под присмотром ментора. Обучение стоит 22 000 рублей в месяц.
• Курс Front-end разработчик. Курс дает самые базовые основы и подойдет тем, кто вообще не понимает, что делают фронтэнд-разработчики. Весь курс разбит на 2 модуля: верстка и JS. В рамках первого модуля вы глубоко погрузитесь в HTML и CSS: тэги, селекторы, стили, позиционирование, потоки, сетка. В конце модуля вам нужно будет самостоятельно сделать верстку сложного сайта. Второй модуль полностью посвящен JavaScript: основы языка, объектно-ориентированная модель в JS, работа с DOM, расширение возможностей HTML и CSS с помощью JS, работа с популярными фреймворками. Дополнительный модуль: инструменты командной разработки, то есть Git, Jira и так далее. Стоимость курса: 39 200 рублей.
• Frontend-разработчик. Курс от учебного цента Сбербанка. Государство дает грант на курс, грант покрывает от 50% до 100% стоимости обучения. Поэтому на курс просто так не попасть – надо будет пройти собеседование и сделать тестовое. Сам курс – это 355 академических часов, после которых вы получите профессию junior frontend developer. В среднем обучение длится 20 часов в неделю, выделите время. Курс состоит из двух модулей: базовый и профильный. В базовом модуле рассказывают про основы верстки, языков и так далее – учиться вы в основном будете самостоятельно, по видеолекциям, которые предоставит платформа. В профильном модуле уже более детально рассматриваются JS, TypeScript, фреймворки и вот это вот все. Вы будете учиться на лекциях и делать домашние задания. Стоимость курса: 95 000 рублей.
• Frontend-разработчик. Курс длится 12 месяцев, в неделю надо будет уделать по 12 часов обучению. Вы будете учить JavaScript и TypeScript, их взаимодействие с HTML/CSS через DOM, популярные фреймворки разработки во фронтэнде, сопроводительные технологии (вроде SQL). Платформа дает вам гарантию трудоустройства через 9 месяцев и активно помогает с этим самым трудоустройством. Большой упор в курсе делается непосредственно на процесс разработки: командная работа, методологии разработки, совместный контроль версий и прочее. Стоимость курса – 3 834 рубля в месяц при рассрочке на 36 месяцев.

Что почитать или посмотреть по теме?

1. Документация по языку программирования с официального сайта компании-разработчика.
2. Документация по TypeScript на русском языке.
3. Файн Яков, Моисеев Антон «TypeScript быстро» («TypeScript для чайников»).
4. Видео ролик на YouTube «TypeScript. Полный курс».
5. Видео ролик на YouTube «Зачем нужен TypeScript – простые примеры использования».
6. Видео ролик на YouTube «TypeScript – Быстрый курс за 70 минут».

FAQ

Что такое TypeScript?

Это язык программирования, предназначенный для frontend-разработки и последующей компиляции программного кода в JavaScript.

В чем особенности и преимущества этого языка программирования?

Главным преимуществом TS при сравнении с намного более популярным JS выступает строгая типизация данных, что позволяет избавиться от многочисленных недостатков второго, включая невозможность обнаружения ошибок на стадии написания кода.

Есть ли у TypeScript недостатки?

Программирование на TS обходится несколько дороже и требует больших трудозатрат. Что частично компенсируется возможность создавать ПО с помощью фреймворка Angular, очень популярного и востребованного среди фронтенд-программистов.

Насколько популярным является TypeScript?

TS постепенно набирает популярность, хотя еще сильно уступает JavaScript. По большинству опросов он уже входит в топ-10 среди языков программирования.

Подведем итоги

1. TypeScript – язык для фронтенд-разработки с опцией компиляции программного кода в JavaScript.
2. Его главным преимуществом, помимо совместимости с JS, выступает строгая (или статическая) типизация данных, благодаря которой удается обнаружить ошибки на стадии написания кода.
3. Основной недостаток языка программирования – большие трудозатраты при создании ПО.
4. На сегодняшний день TypeScript уже входит в топ-10 среди популярных языков программирования, а его востребованность среди разработчиков стабильно растет.