Самоучитель для начинающих как освоить TypeScript с нуля за 30 минут

Самоучитель для начинающих как освоить TypeScript с нуля за 30 минут

Мы расскажем об истории создания и особенностях синтаксиса TypeScript, а также приведем список литературы для более полного погружения в тему и развития навыков программирования.

История TypeScript

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

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

Главные преимущества TypeScript:

  1. Если тип переменной не поддерживает некую операцию, компилятор выдаст ошибку.
  2. Читаемость кода упрощает разработчикам поддержку чужих приложений.
  3. Если код компилируется, скорее всего он работает.
  4. При внесении правок в код среда сразу укажет на измененные классы и функции, а также предупредит об ошибках компиляции (упрощается рефакторинг).

Начало работы с TypeScript

Чтобы начать работать с TypeScript, рассмотрим два варианта: установку через NPM или как плагин к Visual Studio.

Установка через NPM

Node.js – самая популярная платформа для исполнения серверных и клиентских приложений. После ее установки потребуется выполнить команду:

В некоторых случаях (например, в OS X) для установки пакета нужно использовать механизм повышения привилегий sudo:

Использование Visual Studio

Если при инсталляции IDE отметить опцию “Node.js development”, установятся все средства для работы с TypeScript.

Самоучитель для начинающих как освоить TypeScript с нуля за 30 минут

Синтаксис TypeScript

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

Можно добавлять объявления типов к переменным, параметрам функций и возвращаемым значениям. Тип записывается после двоеточия после имени переменной.

Основные типы данных:

Ключевое слово Тип данных Описание Пример кода
Any Динамичный Описывает данные, тип которых может быть неизвестен на момент написания приложения. let AnyVar: any = “green”; console.log(AnyVar); // сейчас AnyVar – это string AnyVar = 30; console.log(AnyVar); // сейчас AnyVar – это number
Number Числовой Целые числа или числа с плавающей запятой let decimal: number = 6;
String Строчный Последовательность символов Unicode let color: string = “blue”; color = ‘grey’;
Boolean Логический Используется для логических значений true и false let isDone: boolean = false;
Void Void Отсутствие конкретного значения. Используется для функций, которые не возвращают значений button.onclick = () => void doSomething();
Null Null Используется, когда переменная определена (например, строка или число), а значение неопределенно. let x: null = null; console.log(x);
Undefined Undefined Используется для всех неинициализированных переменных let x: undefined = undefined; console.log(x);

Большинство из этих типов соотносится с примитивными типами из JavaScript.

<> – комплексный объект, которому можно определить свойства или индикатор:

Рассмотрим пример кода:

Во второй строке мы получим ошибку, поскольку объект person имеет два свойства name и age . Должно быть соответствие по названиям, количеству и типу свойств.

Array используется для определения типов элементов массива.

Указать тип можно двумя способами: Array <T> и T[ ]

Массив чисел Number [ ]

Массив строк Array <string>:

Enum – перечисление, возможность дать имена наборам числовых значений:

Кортежи в TypeScript имеют фиксированное количество элементов определенных типов:

Компилятор выдаст приблизительно такие сообщения об ошибках:Type ‘number’ is not assignable to type ‘string’.

Type ‘string’ is not assignable to type ‘number’.

Параметры функций подразделяются на параметры по умолчанию, однотипные и необязательные.

  1. По умолчанию function NAME_F (NAME_P:тип = “х”):

Для определения классов поддерживаются модификаторы контроля доступа public , protected и private :

Класс, название, атрибуты:

Тот же класс, вместе с модификаторами:

Идентификаторы чувствительны к регистру, не могут быть ключевыми словами и не должны содержать пробелы.

Например, Name_one , Name_1 , Name1 , Name$ .

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

Hello world

TypeScript является надмножеством ES5 и включает предлагаемые для ES6 функции, поэтому любая программа на JavaScript – уже и программа на TypeScript (обратное неверно).

  • Создаём базовый файл index.html
  • Создаем файл с расширением HelloWorld.ts и добавляем в него следующую строку:
  • Компиляция. Чтобы преобразовать наш файл в файл на JavaScript нужно в командной строке запустить:

6 книг по TypeScript для углубленного изучения

Мануал по TypeScript занимает всего 10 страниц. Восполнить пробелы помогут книги с задачами и описаниями чужого опыта. Больше практики, меньше теории.

  • «Профессиональный TypeScript. Разработка масштабируемых JavaScript-приложений», Борис Черный.
  • «Эффективный TypeScript: 62 способа улучшить код», Дэн Вандеркам.
  • «Изучаем TypeScript 3», Натан Розенталс.
  • «TypeScript», Jesse Russell, Ronald Cohn.
  • «Angular и TypeScript. Сайтостроение для профессионалов», Яков Файн, Антон Моисеев.
  • Бесплатное пособие «TypeScript Deep Dive».

Если вы любите статически типизированные подходы в больших приложениях, TypeScript – то что нужно. Легкий в изучении, понятный и строгий на практике – отличный вариант для освоения премудростей веб-разработки. Удачи!