Это руководство предназначено для новичков в TypeScript и VS Code. Его содержимое напоминает формат какой-то электронной таблицы. Вы не найдете здесь глубоких концепций программирования или проблем, поскольку я пытался придумать простейшее возможное решение. Изначально это было написано специально для меня, но потом я решил им поделиться. Кроме того, он предназначен для платформы Windows, но если вы используете другую ОС, переключиться несложно.

Предисловие

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

Установка

  • Загрузите последнюю версию Node.js
  • Node.js поставляется с npm менеджером пакетов. Откройте командную строку (Win+X - ›Командная строка) и выполните следующую команду, чтобы установить последнюю стабильную версию TypeScript.
npm install -g typescript

Чтобы проверить установленные пакеты

npm list -g --depth=0

Конфигурация

Создайте пустую папку, откройте Visual Studio Code и перейдите в эту папку.

Первое, что нам нужно сделать, это создать tsconfig.jsonfile. Для этого мы выполним эту команду в терминале (Ctrl+`для открытия терминала)

tsc --init
  • Создайте исходный код. Например main.ts файл
  • Теперь мы хотим настроить удобный процесс сборки, чтобы запускать проект с помощью пары кнопок. Нажмите Ctrl+Shift+P и введите Настроить средство запуска задач, нажмите Enter, чтобы выбрать его, затем TypeScript - tsconfig.json. Это создаст файл с именем tasks.json в .vscodefolder. Он содержит все необходимые команды и аргументы для нашей сборки.

Это структура нашего проекта после всех этапов.

Запустить

Пришло время наконец запустить задачу сборки. Нажмите Ctrl+Shift+B, и если все пойдет хорошо, будет создан новый файл (main.js). Чтобы увидеть результат, нам нужно передать его команде node.

node main.js

Давайте посмотрим на это в действии!

Хорошо! Мы повеселились с командной строкой и очень хотели попробовать что-то новое. Давайте создадим минимальный html и изменим некоторые свойства DOM страницы через TypeScript.

Работа с DOM

Создайте новый файл с именем index.html. Он настолько минималистичен, что я даже немного смущаюсь.

Давайте изменим main.ts файл и изменим внутренний текст <p>element, используя TypeScript. Основная часть здесь - это элемент <script src=”main.js”>. main.js - это переведенный код из TypeScript, который будет выполняться естественным образом.

ПРЕДУПРЕЖДЕНИЕ!!! Еще один минималистичный пример!

Окончательная структура проекта после всех изменений.

Нажмите Ctrl+Shift+B и проверьтеmain.js файл (из любопытства). Затем откройте index.html и посмотрите на результат. Ух ты! Так просто!

Замечательно, но в этом примере есть что-то странное. Что здесь делает символ !? Он называется ненулевым оператором утверждения или просто оператором взрыва на других языках. Компилятор заставляет нас проверять значения null/undefined, если исходный код скомпилирован с — strictNullChecks flag. Более подробную информацию можно найти здесь. Если мы попытаемся его пропустить, компилятор будет на меня кричать.

Мы должны явно проверить null/undefined, чтобы безопасно использовать возвращаемое значение из .getElementById. Но в этом примере это избыточно, потому что я на 100% уверен, что он не вернет никаких null/undefined. Так что я просто использую !.

Вот и все!