TypeScript – популярный язык программирования, предлагающий статическую типизацию и расширенную поддержку инструментов для разработки JavaScript. Одним из ключевых преимуществ TypeScript является возможность выявлять ошибки на ранних этапах разработки. Чтобы упростить процесс разработки и сэкономить время, важно включить автоматическую компиляцию TypeScript при сохранении. В этой статье мы рассмотрим несколько способов добиться этого, а также приведем примеры кода.

Метод 1: использование встроенного средства запуска задач Visual Studio Code
Visual Studio Code (VS Code) — широко используемый редактор кода, обеспечивающий отличную поддержку разработки TypeScript. Он включает в себя встроенный инструмент запуска задач, который можно настроить для компиляции файлов TypeScript при сохранении.

1. Откройте проект TypeScript в VS Code.
2. Создайте файл tasks.jsonв папке .vscodeвашего проекта (если он еще не существует).
3. Добавьте следующую конфигурацию в файл tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "tsc: build",
      "type": "shell",
      "command": "tsc",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ]
}

1. Сохраните файл tasks.json.
2. Откройте файл TypeScript и внесите любые изменения. VS Code автоматически скомпилирует файл TypeScript при сохранении.

Метод 2: использование средства запуска задач/сборки (например, Gulp, Grunt)
Если вы предпочитаете использовать средство запуска задач или инструмент сборки, например Gulp или Grunt, вы можете настроить задачу для компиляции файлов TypeScript. при сохранении.

1. Установите необходимые зависимости. Например, чтобы использовать Gulp:

npm install --save-dev gulp gulp-typescript

1. Создайте gulpfile.js(для Gulp) или Gruntfile.js(для Grunt) в корне вашего проекта.
2. Добавьте следующий код в соответствующий файл:

Для Gulp:

const gulp = require('gulp');
const ts = require('gulp-typescript');
const tsProject = ts.createProject('tsconfig.json');
gulp.task('compile', function () {
  return gulp.src('src//*.ts')
    .pipe(tsProject())
    .pipe(gulp.dest('dist'));
});
gulp.task('watch', function () {
  gulp.watch('src//*.ts', gulp.series('compile'));
});

Для Grunt:

module.exports = function (grunt) {
  grunt.initConfig({
    ts: {
      default: {
        tsconfig: './tsconfig.json'
      }
    }
  });
  grunt.loadNpmTasks('grunt-ts');
  grunt.registerTask('default', ['ts']);
};

1. Сохраните файл и запустите соответствующую команду запуска задач (gulp watchдля Gulp или gruntдля Grunt). Средство запуска задач будет отслеживать изменения в файлах TypeScript и компилировать их при сохранении.

Метод 3. Использование системы сборки (например, веб-пакета).
Если вы используете систему сборки, например веб-пакет, вы можете настроить ее для компиляции файлов TypeScript при сохранении.

1. Установите необходимые зависимости. Например, чтобы использовать веб-пакет:

npm install --save-dev webpack webpack-cli ts-loader

1. Создайте файл webpack.config.jsв корне вашего проекта.
2. Добавьте в файл следующую конфигурацию:

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: `${__dirname}/dist`
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

1. Сохраните файл и запустите соответствующую команду системы сборки (webpack --watchдля веб-пакета). Система сборки будет отслеживать изменения в файлах TypeScript и компилировать их при сохранении.

Включение автоматической компиляции TypeScript при сохранении может значительно улучшить рабочий процесс разработки. В этой статье мы рассмотрели три метода достижения этой цели: использование встроенного средства запуска задач Visual Studio Code, использование инструмента запуска задач/сборки, такого как Gulp или Grunt, и настройку системы сборки, такой как webpack. Выберите метод, соответствующий требованиям вашего проекта, и наслаждайтесь более простой и продуктивной разработкой TypeScript.