如何自动编译 .ts 文件并实时更新 .ts 文件?
TypeScript 是一种流行的编程语言，广泛用于开发大型应用程序。它是 JavaScript 的超集，并添加了可选的静态类型、接口和泛型。使用 TypeScript 时，拥有流畅的开发工作流程至关重要，其中包括自动编译 .ts 文件并实时更新。
在本文中，我们将探讨可用于实现此目的的不同工具和技术。
为什么要自动编译 TypeScript 文件?
在 TypeScript 项目开发中，开发人员经常会更改 .ts 文件。更改后，他们必须编译这些文件以获取相应的 JavaScript 文件。手动编译 TypeScript 文件可能非常耗时，尤其是在项目包含大量文件的情况下。
这时，自动编译就派上用场了。自动编译可以实时编译 TypeScript 文件，从而节省开发人员的时间和精力。这意味着每次开发人员保存对 TypeScript 文件的更改时，该文件都会自动编译为相应的 JavaScript 文件。
语法
自动编译实时更改的 TypeScript 文件的语法取决于您选择的工具或库。通常，该语法涉及运行命令或设置配置文件来监视 .ts 文件中的更改，然后自动编译它们。以下是可用的通用语法 -
命令行 -
tsc --watch [path/to/ts/files]
配置文件 -
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "dist"
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}
用于自动编译 .ts 文件的不同工具
让我们来看看一些常用的工具和库，它们可以用来自动编译实时更改的 TypeScript 文件。
工具 1:TypeScript 编译器 (tsc)
TypeScript 编译器 (tsc) 是 TypeScript 安装时附带的官方 TypeScript 编译器。它可以用来将 TypeScript 文件编译成 JavaScript 文件。--watch 选项可以与 tsc 一起使用，以监视 .ts 文件中的更改，然后自动编译它们。以下是示例 -
命令行 -
tsc --watch src/app.ts
此命令将监视 src 目录中 app.ts 文件的更改，并在发生更改时自动编译该文件。编译后的 JavaScript 文件将输出到同一目录。
示例 1
使用以下命令创建 src/app.ts 和 tsconfig.json 文件
touch src/app.ts && tsc --init
现在，启动终端/命令提示符并运行以下命令来查看 src/app.ts 文件中保存的更改
tsc –w
src/app.ts
class Person {
name: string
age: number
constructor(name: string, age: number){
this.name = name
this.age = age
}
sayHello() {
console.log(`Hello ${this.name}`)
console.log(`You are ${this.age} year(s) old.`)
}
}
const firstPerson = new Person("Aditya", 21)
firstPerson.sayHello()
使用此配置，.ts 文件的更改将自动与 .js 文件实时同步。
现在，为了检查这些更改是否生效，我们将使用 nodemon 在 .js 文件更改时自动重新运行这些文件。
nodemon src/app.js
最终输出
我们在终端中得到的输出是 −
Hello Aditya You are 19 year(s) old.
工具 2:Webpack
Webpack 是现代 Web 开发中流行的构建工具，可用于打包和优化 JavaScript 文件，同时它还通过使用加载器内置了对 TypeScript 的支持。Webpack 内部使用 tsc 来转译 .ts 文件。ts-loader 用作 webpack 和 tsc 之间的粘合剂。因此，您仍然需要 tsconfig.json 文件。
示例 2
我们将在上一个示例的基础上，使用 Webpack 自动转译 TS 文件并打包 JS 文件。
要使用 Webpack 将 TS 文件转译为 JS 文件，您需要安装必要的依赖项，包括 webpack、webpack-cli 和 ts-loader −
npm install webpack webpack-cli ts-loader
安装这些依赖项后，您可以在项目目录中创建 Webpack 配置文件 webpack.config.js。以下是配置文件示例 −
配置文件 (webpack.config.js) −
const path = require('path');
module.exports = {
entry: './src/app.ts',
mode: 'development',
devtool: 'inline-source-map',
watch: true,
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.ts', '.js'],
},
module: {
rules: [{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},],
},
};
在此配置文件中，entry 属性指定应用程序的入口点，它是一个 TypeScript 文件(本例中为 app.ts)。mode 属性指定构建模式(本例中为 development)，devtool 属性指定源映射类型。output 属性指定输出文件名和目录，resolve 属性指定要解析的文件扩展名。最后，module 属性指定了用于不同文件类型的加载器，包括用于 TS 文件的 ts-loader。
将 watch 选项设置为 true，指定 Webpack 在后台运行，并在 .ts 文件中检测到已保存的更改时自动编译。
此图显示了 src/app.ts 文件 的目录结构和内容。不用担心，dist 目录会在我们启动打包过程后自动创建。
现在运行以下命令启动 webpack 打包过程 -
npx webpack
这将自动实时将您的 TS 文件转译为 JS 文件，并在您更改 TS 文件时创建 dist/bundle.js 文件。为了查看更改，我们将使用 nodemon。
nodemon dist/bundle.js
转译后的 JS 包位于 webpack 指定的 dist/bundle.js 文件中。配置。
输出
我们在终端中得到的输出是 −
Hello Aditya You are 19 year(s) old.
结论
自动编译实时更改的 TypeScript 文件可以为开发人员节省大量开发时间和精力。目前有多种工具和库可以帮助实现这一点。TypeScript 编译器 (tsc)、Webpack 和 Gulp 是一些常用的工具，它们可以自动编译实时更改的 TypeScript 文件。我们在本文中讨论了其中两种工具。
每种工具都有各自的语法和配置选项，因此选择最适合您需求的工具至关重要。无论您是在开发小型项目还是大型应用程序，拥有包含自动编译功能的流畅开发工作流程都有助于提高生产力并减少错误。
