How to compile a TypeScript file at real time while updating the file?

在实际开发环境中，我们往往需要在修改 TypeScript 文件后能即时看到编译的结果，以加速开发过程和及时发现编译错误。为了实现这一需求，我们可以使用几种方法：

1. 使用 TypeScript 编译器的 Watch 模式

TypeScript 自身提供了一个非常方便的功能，即 watch 模式，通过这个模式，TypeScript 编译器可以监视文件的变化，并在文件被修改后自动重新编译。

要使用这种方式，你只需要在命令行中运行以下命令：

bash
tsc --watch

或者缩写为：

bash
tsc -w

这条命令将会启动 TypeScript 编译器的监视模式，自动编译所有在 tsconfig.json 文件中指定的 TypeScript 文件。

2. 集成到构建工具中

在现代前端开发中，我们通常会使用如 Webpack、Gulp 等构建工具，这些工具提供了丰富的插件系统，可以很容易地集成 TypeScript 的实时编译功能。

使用 Webpack

如果你使用的是 Webpack，可以通过 ts-loader 或 awesome-typescript-loader 这样的 loader 来处理 TypeScript 文件。Webpack 配置示例：

javascript
module: {
    rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }
    ]
}

然后启动 Webpack 的 watch 模式：

bash
webpack --watch

使用 Gulp

对于 Gulp，你可以使用 gulp-typescript 插件。一个基本的 Gulp task 可能看起来像这样：

javascript
const gulp = require('gulp');
const ts = require('gulp-typescript');

const tsProject = ts.createProject('tsconfig.json');

gulp.task('scripts', () => {
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest('dist'));
});

gulp.task('watch', () => {
    gulp.watch('src/**/*.ts', gulp.series('scripts'));
});

3. 使用 IDE 的实时编译功能

许多现代 IDE，如 Visual Studio Code, WebStorm 等，都支持 TypeScript 并内置了实时编译功能。例如，在 Visual Studio Code 中，你可以配置文件保存时自动编译 TypeScript 文件，或者使用扩展工具来增强这一功能。

示例

假设你正在开发一个 Node.js 应用，并且使用 TypeScript。你可以将 ts-node 和 nodemon 结合使用，实现在修改 TypeScript 文件后自动重启应用。配置 nodemon.json 如下：

json
{
  "watch": ["src/"],
  "ext": "ts",
  "exec": "ts-node src/index.ts"
}

这样每当你修改 src 目录下的 .ts 文件时，nodemon 会触发 ts-node 来执行 src/index.ts，从而实现实时编译并运行 TypeScript 文件。

这些方法提供了灵活的选择，适应不同的开发环境和需求，可以有效提高开发效率并实时反馈编译状态。