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

Programming, development, testing

→

TypeScript - programming language similar to JavaScript. TypeScript uses types, classes, inheritance. TypeScript converted to JavaScript

→

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

Looked at 4767 times Comments 2

Last Comment: (28 October 2024 1:26) Исправил: package.json [bgcolor=lightgray]old:[/bgcolor] [json_code]{ "name":... read... Write a comment...

last updated: 28 October 2024

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

my_typescript_project2.zip ...
размер: 3 kb

D:/my_typescript_project2

index.html

package.json файл настройки Node.js (содержит названия пакетов)

tsconfig.json файл настройки TypeScript

webpack.config.js файл настройки Webpack (как объединять js файлы в один)

.vscode

launch.json файл настройки для Visual Studio Code (путь к запускаемому файлу)

src

book.ts

main.ts

build

transformed.js после запуска Webpack сгенерируется этот файл

Let's look at файлы >> ...

Файл index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <meta charset="utf-8" />
     <title></title>
</head>

<body>

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

     
     <script>
          // add books
          var lib = new MyBookLibrary();
          lib.AddBook("Hello");
          lib.AddBook("Good morning");

          // show books
          for (i=0; i<lib.books.length; i++)
          {
               var book = lib.books[i];
               alert(book.Name);
          }
     </script>

</body>

</html>

Файл package.json

{
     "name": "my_typescript_project2",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
          "MyBuild": "webpack"
     },
     "author": "",
     "license": "ISC",
     "devDependencies": {
          "typescript": "~5.6.0",
          "ts-loader": "^9.4.1",
          "webpack": "^5.74.0",
          "webpack-cli": "^4.10.0",
          "webpack-dev-server": "^4.11.1"
     },
     "dependencies": {}
}

Файл tsconfig.json

{
     "compilerOptions": {
          "module": "commonjs",
          "target": "es6",
          "lib": ["es6"],
          "sourceMap": true, // will be debug information(map file). You can use breakpoints in your application.
          "outDir": "./build"
     },
     "include": [
          "src/*.ts"
     ],
     "exclude": [
          "node_modules"
     ]
}

Файл webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
     entry: {
          'app': './src/main.ts'
     },
     mode: 'development', // in 'development' we can watch variable in debug
     devtool: "source-map", // that will generate debug information(map file). And you can debug application with breakpoints.
     output: {
          path: __dirname + '/build',
          filename: 'transformed.js',
          libraryTarget: 'var',
          library: 'MyBookLibrary'
     },
     resolve: {
          extensions: ['.ts', '.js']
     },
     module: {
          rules: [
               {
                    test: /\.ts$/,
                    loader: "ts-loader",
                    exclude: /node_modules/,
               }
          ]
     }
}

Файл .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"
          }
     ]
}

Файл src/book.ts

export class Book
{
     public Name: string;

     constructor()
     {
     }
}

Файл src/main.ts

import {Book} from './book';

class MyBookLibrary
{
     public books: Book[];

     constructor()
     {
          this.books = Array<Book>();
     }

     public AddBook(bookName: string)
     {
          var book = new Book();
          book.Name = bookName;
          this.books.push(book);
     }
}

module.exports = MyBookLibrary;

На заметку! Чтобы класс MyBookLibrary из файла main.ts мог использоваться в index.html нужно:

В файле webpack.config.js указать:

libraryTarget: 'var'
в опции libraryTarget указывается, что мы будем использовать для экспорта. 'var' означает что это переменная (то есть это класс или метод).
'var' это стандартное название для webpack.

library: 'MyBookLibrary'
в опции library указывается название класса или функции или название переменной.
Я указал название моего класса MyBookLibrary

в файле src/main.ts указать:

module.exports = MyBookLibrary;
то есть я указал мой класс MyBookLibrary

Как запустить пример?

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

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

Шаг 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_project2/package.json:
{
...
    "scripts": {
        "MyBuild": "webpack"
    }
...
}

Скрипт MyBuild запустит Webpack:
• Webpack запустит TypeScript.
• TypeScript сконвертирует наши файлы main.ts, book.ts в файлы main.js, book.js
• Webpack соберет файлы main.js, book.js в один файл transformed.js

Шаг 4.
Открываем страницу

В Visual Studio Code нажимаем на меню Run → Start Debugging

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

В браузере Google Chrome откроется страница с таким адресом: file:///D:/my_typescript_project2/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"

Если вы сделали изменения в каком-нибудь файле

Если поменяли любой ts файл (main.ts или book.ts) или поменяли webpack.config.js то нужно:
1) перекомпилировать проект т.е. выполнить npm run MyBuild
2) запустить проект т.е. в Visual Studio Code нажимаем на меню Run → Start Debugging

Если вы помещяете свое приложениене на сервер то используйте опцию production

Если вы помещяете свое приложениене на сервер то желательно указать в файле webpack.config.js опцию 'production' чтобы все ts файлы получилились при конвертациии в js сжатыми.

Файл webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
     entry: {
          'app': './src/book.ts'
     },

     mode: 'production',
     ...
}

Помните!
При опции production отладка приложения не получится потому что, плохо отображаются названия переменных в debug и не везде ставятся breakpoints.

Просто для информации! Что нужно чтобы в проекте с Webpack и TypeScript работала debug информация ?

Чтобы при запуске приложения в Debug режиме (в меню Visual Studio Code нажимаем Run → Start Debugging) можно было поставить breakpoint или посмотреть значение переменной мы должны указать:

1) В файле tsconfig.json
"sourceMap": true

Файл tsconfig.json

{
     "compilerOptions": {
          ...
          "sourceMap": true, // will be debug information(map file). You can use breakpoints in your application.
          ...
     }
}

2) В файле webpack.config.js
mode: 'development'
devtool: 'source-map'

Файл webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
     ...
     mode: 'development', // in 'development' we can watch variable in debug
     devtool: 'source-map', // will be debug information(map file). You can use breakpoints in your application.
     ...
}

В результате мы увидим и breakpoint и значения переменных вот так:

← Previous topic
Create a new application TypeScript in Visual Studio Code. Debug the application. We look in debugging how TypeScript is executed step by step. Breakpoints.

Next topic →
Создаем новое Node.js консольное приложение в Visual Studio 2017 для изучения Typescript

Your feedback ... 2 Comments

guest
16 October 2024 1:22

запускаю и ошибка

> webpack
i ｢atl｣: Using typescript@3.9.7 from typescript
i ｢atl｣: Using tsconfig.json from D:/my_typescript_project2/tsconfig.json
i ｢atl｣: Using typescript@3.9.7 from typescript
i ｢atl｣: Using tsconfig.json from D:/my_typescript_project2/tsconfig.json
i ｢atl｣: Using tsconfig.json from D:/my_typescript_project2/tsconfig.json
Error in bail mode: Error: callback(): The callback was already called.
at context.callback (D:\my_typescript_project2\node_modules\loader-runner\lib\LoaderRunner.js:106:10)
at processTicksAndRejections (node:internal/process/task_queues:95:5) Error: callback(): The callback was already called.
at context.callback (D:\my_typescript_project2\node_modules\loader-runner\lib\LoaderRunner.js:106:10)
at processTicksAndRejections (node:internal/process/task_queues:95:5)

answer

admin
28 October 2024 1:26

Исправил:

package.json
old:

json

{
      "name": "my_typescript_project2",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
             "MyBuild": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
             "typescript": "^3.9.7",
             "webpack": "^4.32.0",
             "webpack-cli": "^3.3.2",
             "webpack-dev-server": "^3.4.1",
             "awesome-typescript-loader": "^5.2.1"
      },
      "dependencies": {}
}

package.json
new:

json

{
      "name": "my_typescript_project2",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
             "MyBuild": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
             "typescript": "~5.6.0",
             "ts-loader": "^9.4.1",
             "webpack": "^5.74.0",
             "webpack-cli": "^4.10.0",
             "webpack-dev-server": "^4.11.1"
      },
      "dependencies": {}
}

old:
webpack.config.js

JavaScript

...
module: {
      rules: [
      {
            test: /\.ts$/,
            use: [
                  {
                        loader: 'awesome-typescript-loader',
                        options:
                        {
                              configFileName: __dirname + '/tsconfig.json'
                        }
                  }
            ]
      }]
},
...

new:
webpack.config.js

JavaScript

...
module: {
      rules: [
      {
            test: /\.ts$/,
            loader: "ts-loader",
            exclude: /node_modules/
      }]
}
...

answer