Начать работу с TypeScript сейчас проще, чем когда-либо. Ты можешь настроить среду разработки прямо в своем браузере или быстро собрать локальную среду с помощью сборщика пакетов parcel bundler.
Самый быстрый способ опробовать TypeScript - перейти на CodeSandbox.io, нажать на Сreate Sandbox и выбрать сэндбокс Vanilla + TS
. Также, всегда можно перейти по ссылке Vanilla + TS. Здесь уже есть файл TypeScript, с которым можно играть и редактировать на свой вкус. Каждое внесенное изменение будет автоматически отражено в окне.
В ином случае, можно развернуть локально среду с установленным Node. Для этого нужно установить parcel bundler, выполнив команду npm install -g parcel-bundler
. Это установит parcel
глобально. С установленным parcel
, создать новый файл index.html
в корне директории. Внутри 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
автоматически обрабатывает всё для нас. Для этого нужно выполнить команду 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!
.