TypeScript 在保存时运行 - TypeScript

TypeScript 是一种由微软开发的编程语言，它是 JavaScript 的一个超集，可以在编译时进行类型检查和错误检查。这意味着开发者可以在代码编写时就可以避免一些错误，提高了代码的可维护性和稳定性。

在 TypeScript 中，可以通过使用一些工具和插件来提高开发效率。其中，一种比较常见的工具是在保存代码时自动运行 TypeScript 编译器，以便及时发现和修复潜在的编译错误。

运行 TypeScript 编译器

要运行 TypeScript 编译器，需要使用 Node.js 的命令行。首先，需要安装 TypeScript 编译器和 TypeScript 插件。可以使用以下命令进行安装：

npm install typescript ts-node-dev --save-dev

上述命令会安装 TypeScript 编译器和 ts-node-dev 插件，ts-node-dev 插件可以在保存代码时自动运行 TypeScript 编译器。

安装完成后，可以在 package.json 文件中添加以下命令：

"scripts": {
  "start": "ts-node-dev src/index.ts"
}

上述命令会自动运行 ts-node-dev 插件，如果保存了 index.ts 文件，ts-node-dev 就会自动在后台编译代码，并重新运行程序。

自动运行 TypeScript 编译器

在以上设置完成后，还可以通过其他工具，使得 TypeScript 编译器在每次保存代码时自动运行。其中，比较常见的工具有 VS Code 插件和 Gulp。

VS Code 插件

在 VS Code 中，可以通过安装 TSLint 插件和 Auto Save 插件，来自动保存代码和运行 TypeScript 编译器。

TSLint 插件可以提供代码检查和辅助功能，Auto Save 插件可以在保存代码时自动运行 TypeScript 编译器，如下图所示：

Gulp

Gulp 是一种构建工具，可以用来自动化开发过程中的各种任务。在使用 Gulp 时，可以通过安装 gulp-typescript 插件来自动编译 TypeScript 代码。

var gulp = require('gulp');
var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');

gulp.task('compile', function () {
  return gulp.src('src/**/*.ts')
    .pipe(tsProject())
    .js.pipe(gulp.dest('built/'));
});

gulp.task('watch', function () {
  gulp.watch('src/**/*.ts', ['compile']);
});

上述代码中，compile 任务用来编译 TypeScript 代码，watch 任务用来监视文件变化并运行编译任务。可以通过以下命令来运行 watch 任务：

gulp watch

小结

在开发 TypeScript 项目时，可以通过自动运行 TypeScript 编译器，来提高代码的可维护性和稳定性。通过使用 VS Code 插件或 Gulp，可以很方便地实现自动运行 TypeScript 编译器的功能。