Создаем новое приложение TypeScript в Visual Studio Code. Отладка приложения. Смотрим в отладке, как по шагам выполняется TypeScript. Точки остановки.

Компьютер, программы

→

TypeScript - язык программирования похожий на JavaScript. TypeScript использует типы, классы, наследование. TypeScript преобразуется в JavaScript

Создаем новое приложение TypeScript в Visual Studio Code. Отладка приложения. Смотрим в отладке, как по шагам выполняется TypeScript. Точки остановки.

посмотрели 6328 раз

обновлено: 19 апреля 2023

Я буду использовать Node.js
Поэтому, если вы не установили Node.js, тогда Устанавливать Node.js ...

как сделать самому вручную

План (12 шагов)

Шаг 1.

Открываем Visual Studio Code

Шаг 2.

Создаем новую папку my_typescript_project1 на диске D: и в Visual Studio Code выбираем эту папку

Шаг 3.

Создаем новый файл index.html внутри Visual Studio Code

Шаг 4.

В терминальной строке выполним npm init для создания файла package.json

Шаг 5.

В терминальной строке выполним npm install --save-dev typescript для установки пакета TypeScript

Шаг 6.

Создаем новый файл tsconfig.json внутри Visual Studio Code

Шаг 7.

Создаем новый файл src/my.ts внутри Visual Studio Code

Шаг 8.

Создаем новый файл .vscode/launch.json внутри Visual Studio Code

Шаг 9.

Компилируем проект (выполним npm run MyBuild для конвертации файла ts в js)

Шаг 10.

Запускаем проект нажимаем Run → Start Debugging. Ошибка "Configured debug type 'chrome' is not supported"

Шаг 11.

Запускаем проект в отладчике (для этого нажимаем Run → Start Debugging или клавиша F5)

Шаг 12.

Ставим точки остановки (Breakpoints)

Скачать пример ...

Шаг 1. Открываем Visual Studio Code

Если у вас не установлена 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>

     
     <script src="./build/my.js" ></script>

     
     <script>
          var book = new Book();
          alert(book.Name);
     </script>

</body>
</html>

Сохраним файл для этого нажимаем File → Save

Шаг 4. В терминальной строке выполним npm init для создания файла package.json

Откроем терминальную строку:
Нажимаем Terminal → New Terminal

Введем

npm init

Все время нажимаем кнопку 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)

Введем

npm run MyBuild

Увидим что в папке 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

Скачать пример

my_typescript_project1.zip ...
размер: 2.7 kb

Структура файлов:

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 появится этот файл когда скомпилируем проект

Смотрим файлы

Файл index.html

Файл package.json

Файл tsconfig.json

Файл .vscode/launch.json

Файл src/my.ts

class Book
{
     public Name: string;

     constructor()
     {
          this.Name = "Good book";
     }
}

Как запустить пример локально у себя на компьютере?

Шаг 1.
Открываем
Visual Studio Code
и выбираем папку

В Visual Studio Code нажимаем на меню File → Open Folder
и выбираем папку D:/my_typescript_project1

Шаг 2.
Устанавливаем библиотеки

В Visual Studio Code нажимаем на меню Terminal → New Terminal
Выполним:

npm install

Смотрите картинку:

Объяснение:
В этом zip архиве нет js библиотек.
Название и версии js библиотек написаны в файле package.json.
При выполнении в командной строке npm install библиотеки с названием и версии из package.json скачаются из интернета и установятся в папку node_modules

Шаг 3.
Компилируем проект

Выполним:

npm run MyBuild

Смотрите картинку:

Объяснение:
Команда 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. (запускаем)

← Предыдущая тема
Настройки компиляции Typescript в Javascript в командной строке : removeComments, outFile, outDir

Следующая тема →
Создаем новое приложение с TypeScript в Visual Studio Code. Я создал несколько ts файлов. Поэтому использую Webpack (собирает все файлы в один js). Работает отладка (Debug) и ставятся точки остановки Breakpoints.