Я буду использовать
Node.js
Поэтому, если вы не установили
Node.js, тогда
Устанавливать Node.js ...
как сделать самому вручную
План (12 шагов)
Шаг 1. Открываем Visual Studio Code
Если у вас не установлена
Visual Studio Code нужно
установить Visual Studio Code ...
Открываем
Visual Studio Code
Шаг 2. Создаем новую папку my_typescript_project1 на диске D: и в Visual Studio Code выбираем эту папку
Создаем новую папку my_typescript_project1 на диске D: и
в Visual Studio Code нажимаем
File → Open Folder ...
и выбираем эту папку D:/my_typescript_project1
Шаг 3. Создаем новый файл index.html внутри Visual Studio Code
Добавим код в
Файл index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- include js script -->
<script src="./build/my.js" ></script>
<!-- my script -->
<script>
var book = new Book();
alert(book.Name);
</script>
</body>
</html>
Сохраним файл для этого нажимаем File → Save
Шаг 4. В терминальной строке выполним npm init для создания файла package.json
Откроем терминальную строку:
Нажимаем Terminal → New Terminal
Введем
Все время нажимаем кнопку
Enter
Читать:
что такое npm init ...
Результат: создался файл package.json
Добавим скрит MyBuild в файл package.json
Файл D:/my_typescript_project1/package.json
{
"name": "my_typescript_project1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"MyBuild": "tsc"
},
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^3.9.7"
}
}
Скрипт
MyBuild будет запускать
tsc
tsc это программа TypeScript которая конвертирует
ts файл в
js файл
Запуск
tsc без параметров означает что настройки будут браться из файла
tsconfig.json
Читайте
подробнее о npm скриптах ...
Шаг 5. В терминальной строке выполним npm install --save-dev typescript для установки пакета TypeScript
Введем
npm install --save-dev typescript
Читать:
что такое npm install --save-dev имя_пакета ...
Шаг 6. Создаем новый файл tsconfig.json внутри Visual Studio Code для конвертации файла ts в файл js
Добавим код в
Файл tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"lib": ["es6"],
"sourceMap": true, // true means that will be generating debug information(map file). And you can debug application with breakpoints.
"outDir": "./build"
},
"exclude": [
"node_modules"
]
}
Сохраним файл для этого нажимаем File → Save
Шаг 7. Создаем новый файл src/my.ts внутри Visual Studio Code
Добавим код в
файл src/my.ts
class Book
{
public Name: string;
constructor()
{
this.Name = "Good book";
}
}
Сохраним файл для этого нажимаем File → Save
Шаг 8. Создаем новый файл .vscode/launch.json внутри Visual Studio Code
Добавим код в
Файл .vscode/launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "${workspaceFolder}/index.html"
}
]
}
Шаг 9. Компилируем проект (выполним npm run MyBuild для конвертации файла ts В js)
Увидим что в папке build создался файл my.js
Шаг 10. Запускаем проект нажимаем Run → Start Debugging. Ошибка "Configured debug type 'chrome' is not supported"
Ошибка "Configured debug type 'chrome' is not supported"
Установим Chrome Debugger
Шаг 11. Запускаем проект в отладчике (для этого нажимаем Run → Start Debugging или клавиша F5)
На экране увидим результат:
Шаг 12. Ставим точки остановки (Breakpoints)
Поставим точки остановки в файле index.js
Точки остановки ставятся нажатием клавиши F9
Запускаем программу в отладчике (debug). Нажимаем Run → Run debugger или кнопку F5
Программа запущена и мы можем смотреть:
• WATCH (значение переменных)
• CALL STACK (стэк вызова функций)
• BREAKPOINTS (ставить, убирать точки остановки)
На заметку!
После нажатия клавиши F5 в первый раз отладчик не останавливается на точке остановки (breakpoints).
Отладчик заходит в точку остановки (breakpoints) когда я нажимаю Restart
Скачать пример
D:/my_typescript_project1
index.html
package.json файл настройки Node.js (содержит названия пакетов)
tsconfig.json файл настройки TypeScript (путь куда конвертировать js файл)
.vscode
launch.json файл настройки для Visual Studio Code (путь к запускаемому файлу)
src
my.ts
build
my.js появится этот файл когда скомпилируем проект
Смотрим файлы
1)
Файл
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- include js script -->
<script src="./build/my.js" ></script>
<!-- my script -->
<script>
var book = new Book();
alert(book.Name);
</script>
</body>
</html>
2)
Файл
package.json
{
"name": "my_typescript_project1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"MyBuild": "tsc"
},
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^3.9.7"
}
}
3)
Файл
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"lib": ["es6"],
"sourceMap": true, // true means that will be generating debug information(map file). And you can debug application with breakpoints.
"outDir": "./build"
},
"exclude": [
"node_modules"
]
}
4)
Файл
.vscode/launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "${workspaceFolder}/index.html"
}
]
}
5)
Файл
src/my.ts
class Book
{
public Name: string;
constructor()
{
this.Name = "Good book";
}
}
Как запустить пример локально у себя на компьютере?
Шаг 2.
Устанавливаем библиотеки
В
Visual Studio Code нажимаем на меню
Terminal →
New Terminal
Выполним:
Смотрите картинку:
Объяснение:
В этом zip архиве нет
js библиотек.
Название и версии
js библиотек написаны в файле
package.json.
При выполнении в командной строке
npm install библиотеки с названием и версии из
package.json скачаются из интернета и установятся в папку
node_modules
Шаг 3.
Компилируем проект
Выполним:
Смотрите картинку:
Объяснение:
Команда
npm run MyBuild запускает скрипт
MyBuild.
Скрипт
MyBuild определен в файле
package.json.
Файл D:/my_typescript_project1/
package.json:
{
...
"scripts": {
"MyBuild": "tsc"
}
...
}
Скрипт
MyBuild запустит
tsc.
tsc это программа TypeScript которая конвертирует
ts файл в
js файл
Запуск
tsc без параметров означает что настройки будут браться из файла
tsconfig.json
Шаг 4.
Открываем страницу
В
Visual Studio Code нажимаем на меню
Run →
Start Debugging
Смотрите картинку:
В браузере
Google Chrome откроется страница с таким адресом:
file:///D:/my_typescript_project1/index.html
Объяснение:
Запускается
index.html
потому что файл настройки
.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "${workspaceFolder}/index.html"
}
]}
создержит
"url": "${workspaceFolder}/index.html"
На заметку!
Если поменяли файл src/my.ts то нужно выполнить:
Шаг 3. (компилируем проект)
Шаг 4. (запускаем)
Афишу
Ваши Отзывы ... комментарии ...