В этом уроке вы узнаете, как разработать первую программу и создать проект Hello World на TypeScript.
Программа TypeScript Hello World в node.js
- Сначала создайте новую папку для хранения кода, например,
helloworld. - Во-вторых, запустите VS Code и откройте эту папку.
- В-третьих, создайте новый файл TypeScript с именем
app.ts. Расширение файла TypeScript —.ts. - В-четвертых, введите следующий исходный код в файл
app.ts:
let message: string = 'Hello, World!'; console.log(message);
В-пятых, запустите новый терминал в VS Code, используя сочетание клавиш Ctrl+` или следуя меню Terminal > New Terminal
В-шестых, введите в Терминале следующую команду, чтобы скомпилировать файл app.ts :
tsc app.ts
Если все в порядке, вы увидите, что компилятор TypeScript сгенерировал новый файл с именем app.js :
Чтобы запустить файл app.js в node.js , используйте следующую команду:
node app.js
Если вы установили модуль ts-node , упомянутый в настройке среды разработки TypeScript, вы можете использовать только одну команду для компиляции файла TypeScript и выполнения выходного файла:
ts-node app.ts
Hello World в веб-браузере
Выполните следующие шаги, чтобы создать веб-страницу, которая будет показывать сообщение Hello, World! в веб-браузерах.
Сначала создайте новый файл с именем index.html и app.js следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TypeScript: Hello, World!</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>Во-вторых, измените код app.js на следующий:
let message: string = 'Hello, World!';
// create a new heading 1 element
let heading = document.createElement('h1');
heading.textContent = message;
// add the heading the document
document.body.appendChild(heading);В-третьих, скомпилируйте файл app.ts :
tsc app.ts
В-четвертых, откройте Live Server из кода VS, щелкнув правой кнопкой мыши index.html и выбрав опцию Open with Live Server:
Live Server откроет index.html со следующим сообщением:
Чтобы внести изменения, вам нужно отредактировать файл app.ts . Например:
let message: string = 'Hello, TypeScript!';
let heading = document.createElement('h1');
heading.textContent = message;
document.body.appendChild(heading);И скомпилируйте файл app.ts :
tsc app.ts
Компилятор TypeScript сгенерирует новый файл app.js, и Live Server автоматически перезагрузит его в веб-браузере.
Обратите внимание, что app.js является выходным файлом файла app.ts , поэтому вам никогда не следует напрямую изменять код в этом файле, иначе вы потеряете изменения после повторной компиляции файла app.ts .
В этом руководстве вы узнали, как создать первую программу на TypeScript под названием Hello, World! , которая работает на node.js и веб-браузерах.