Это руководство предназначено для новичков в 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.json
file. Для этого мы выполним эту команду в терминале (Ctrl+`
для открытия терминала)
tsc --init
- Создайте исходный код. Например
main.ts
файл
- Теперь мы хотим настроить удобный процесс сборки, чтобы запускать проект с помощью пары кнопок. Нажмите
Ctrl+Shift+P
и введите Настроить средство запуска задач, нажмите Enter, чтобы выбрать его, затем TypeScript - tsconfig.json. Это создаст файл с именемtasks.json
в.vscode
folder. Он содержит все необходимые команды и аргументы для нашей сборки.
Это структура нашего проекта после всех этапов.
Запустить
Пришло время наконец запустить задачу сборки. Нажмите 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
. Так что я просто использую !
.
Вот и все!