Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>1 июл 2020</li>

3 <li>0</li>

4 - </ul>Frontend-разработка шагнула далеко за пределы JavaScript. Разбираемся, что такое TypeScript и почему его так любят.

4 + </ul>Frontend-разработк�� шагнула далеко за пределы JavaScript. Разбираемся, что такое TypeScript и почему его так любят.

5 vlada_maestro / shutterstock

6 Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.

7 На JavaScript написаны веб-интерфейсы практически всех сайтов. Однако не все его любят, а альтернатив почти нет. Единственный конкурент JS - WebAssembly, однако за несколько лет своего существования он пока не смог стать достаточно популярным.

8 Из-за такого расклада у разработчиков остаётся два выхода:

9 <ul><li>Использовать JS со всеми его недостатками.</li>

10 <li>Писать код на другом языке и компилировать его в JS.</li>

11 </ul>И многие выбирают второе решение. Поэтому за последние годы появилось сразу несколько языков-надстроек над JavaScript:

12 <ul><li>Dart;</li>

13 <li>CoffeeScript;</li>

14 <li>ClojureScript;</li>

15 <li>TypeScript.</li>

16 </ul>О последнем и пойдёт речь в этой статье. В 2019 году TypeScript стал одним из самых любимых языков программирования и попал в топ-10 по популярности:

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

18 Код на TypeScript компилируется в JS и подходит для разработки любых проектов под любые браузеры - тем более что можно выбрать версию JS, в которую будет компилироваться код.

19 TypeScript - проект с открытым исходным кодом, поэтому он очень быстро развивается. Многое, что появляется в TS, позже переходит и в JavaScript: например,<a>let и const</a>, стрелочные функции и так далее.

20 Давайте разберём два главных преимущества TS перед JS.

21 Многие проблемы в JavaScript появляются из-за динамической типизации и в целом странного поведения типов данных:

22 В TypeScript типизация статическая, что избавляет от множества проблем. Есть числовой тип, строковый, логический и другие. Возможно описывать и свои типы данных, например, с помощьюenum:

23 //Создаём перечисление Direction, в котором находятся направления (вверх, вниз, влево, вправо и никуда) enum Direction { Up, Down, Left, Right, None } //Переменной d можно указать направление let d : Direction = Direction.Up;И в JS, и в TS есть поддержка объектно-ориентированного программирования: классы, объекты, наследование. Однако TypeScript шагнул чуть дальше и использует больше возможностей ОПП. В том числе, например, интерфейсы:

24 //Объявляем интерфейс interface IPost { id: number; text: string; } //Создаём классы, которые реализуют этот интерфейс class Message implements IPost { id: number; text: string; senderId: number; recieverId: number; } class ArticleComment implements IPost { id: number; text: string; senderId: number; articleId: number; }Другой большой плюс - модификаторы доступа. Их в TypeScript три:public, privateиprotected. Вот пример их использования:

25 class User { //Приватные члены класса, которые недоступны извне private id: number; private login: number; constructor(id: number, login: number) { this.id = id; this.login = login; } //Аксессор в стиле Java public GetId(): number { return this.id; } //Аксессор в стиле C# public get Login(): number { return this.login; } }Также есть и другие возможности:

26 <ul><li>определение полей в конструкторе;</li>

27 <li>преобразование типов;</li>

28 <li>абстрактные классы;</li>

29 <li>обобщение и так далее.</li>

30 </ul>В будущем всё это может появиться и в JavaScript, но браузеры начнут поддерживать такие возможности ещё очень нескоро.

31 Разработчики любят этот язык, а некоторые крупные проекты уже переходят на него. Например, популярный фреймворк Angular.JS. Но этого всё равно недостаточно, чтобы он стал таким же востребованным, как JavaScript. Это связано с тем, что разработка веб-приложения на TypeScript стоит дороже и отнимает больше времени.

32 Особенно если необходимо использовать какую-нибудь библиотеку или фреймворк, которые не портированы на TS. В этом случае разработчикам придётся самостоятельно описывать сигнатуры (указывать типы данных) всех функций и методов - достаточно длительный процесс, учитывая размеры современных библиотек.

33 Также порог входа в TypeScript выше - чтобы использовать его преимущества, важно знать типы данных и объектно-ориентированное программирование.

34 Чтобы использовать TypeScript, установите сначала Node.JS. Как это сделать, можете прочитать в <a>нашей статье</a>. После этого введите в консоли команду:

35 npm install -g typescript

36 Теперь создайте в папке со скриптами файл с расширением.ts - в нём мы будем писать код. Для компиляции кода пригодится командаtsc. Чтобы скомпилировать файлapp.ts, введите команду:

37 Если всё пройдёт успешно, то в папке появится файлapp.js, который и подключим к странице.

38 Также можно составить конфиг в файлеtsconfig.json, чтобы максимально упростить компиляцию.

39 { "compilerOptions": { "target": "es5", "removeComments": true, "outFile": "app.js" } }В compilerOptionsхранятся все параметры для компилятора:

40 <ul><li>target - стандарт JS, в который компилируется код. Здесь указан ECMAScript 5, потому что он поддерживается всеми современными браузерами;</li>

41 <li>removeComments - параметр определяет, нужно ли удалять комментарии;</li>

42 <li>outFile - файл, в который сохраняется JS-код.</li>

43 </ul>Теперь достаточно просто вводить командуtscбез параметров, чтобы скомпилировать наш TypeScript. Обратите внимание, что компилятор затронет все файлы с расширением.tsв текущей директории.

44 Теперь создадим простой калькулятор и посмотрим, как отличается код для него на JS и на TS. Сначала сверстаем форму:

45 <input type="number" id="num1" value="0"/> + <input type="number" id="num2" value="0"/> <button id="btn">=</button> <div id="result"></div>Здесь два поля для ввода чисел, кнопка, которая запускает скрипт и элемент для вывода результата:

46 Код TypeScript выглядит так:

47 //Получая элемент, мы можем указать, какого он типа //В данном случае - поле ввода //Это говорит, что полученный элемент точно содержит свойства value и valueAsNumber, которые нам нужны //Если мы не укажем тип HTMLInputElement, компилятор не поймет, что у этого элемента есть свойство value, и откажется компилировать const num1 = <HTMLInputElement>document.getElementById("num1"); const num2 = <HTMLInputElement>document.getElementById("num2"); //Можно и не указывать тип элемента, если вам не нужны какие-то специфические свойства const result = document.getElementById("result"); const btn = document.getElementById("btn"); //Пока ещё не все современные браузеры поддерживают стрелочные функции, но компилятор TypeScript заменит её на обычную анонимную функцию //При условии, что в конфиге указана спецификация es5 btn.addEventListener("click", (e) => { Sum(); }); function Sum() { //В эту переменную можно добавить только числовое значение //Однако ввод всё равно стоит проверять, потому что пользователь может ввести что угодно вместо числа let sum : number = num1.valueAsNumber + num2.valueAsNumber; //Тип свойства innerHTML - string, поэтому мы должны конвертировать переменную sum в строку result.innerHTML = sum.toString(); }А скомпилированный JS-код для такого калькулятора выглядит вот так:

48 var num1 = document.getElementById("num1"); var num2 = document.getElementById("num2"); var result = document.getElementById("result"); var btn = document.getElementById("btn"); btn.addEventListener("click", function (e) { Sum(); }); function Sum() { var sum = num1.valueAsNumber + num2.valueAsNumber; result.innerHTML = sum.toString(); }Несмотря на то что в TypeScript очень достойный синтаксис, JavaScript ещё долго будет доминировать во frontend-разработке. Поэтому его в любом случае нужно знать, даже если он вам не нравится.

49 <a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>