Разбор

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

Самый быстрый способ опробовать TypeScript - перейти на CodeSandbox.io, нажать на Сreate Sandbox и выбрать сэндбокс Vanilla + TS. Также, всегда можно перейти по ссылке Vanilla + TS. Здесь уже есть файл TypeScript, с которым можно играть и редактировать на свой вкус. Каждое внесенное изменение будет автоматически отражено в окне.

В ином случае, можно развернуть локально среду с установленным Node. Нужно установить parcel bundler глобально: npm install -g parcel-bundler. После этого создать новый файл index.html в корне директории и добавить внутрь тег script с src="./index.ts":

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="./index.ts"></script>
</html>

Затем, создать файл index.ts, на который указали ссылку. Внутри файла index.ts напишем console.log("Hello from TypeScript!").

Для запуска достаточно выполнить parcel index.html — он установит TypeScript, создаст папку dist с нужными файлами и поднимет сервер на http://localhost:1234. Открыв консоль в браузере, увидим сообщение Hello from TypeScript!.

Если ты Node разработчик, тебе необходимо удалить папку dist (если она есть и её сгенерировал parcel). Затем запустить parcel, указав файл TypeScript index.ts и цель --target=node.

parcel index.ts --target=node

Ты увидишь, что он снова скомпилировался в папку dist, но на этот раз с index.js. Запускаешь node с нужным файлом node dist/index.js и в консоли увидишь то же сообщение Hello from TypeScript!.