JS TypeScript 编译详解

在前端开发中，TypeScript 因其强大的类型系统而备受青睐。但浏览器无法直接运行 TypeScript 代码，这就需要编译成 JavaScript。

编译工具

常用的是 tsc（TypeScript 编译器）。首先要安装它：

npm install -g typescript

配置文件

创建 tsconfig.json 进行配置：

{
  "compilerOptions": {
    "target": "es6", // 编译目标版本
    "module": "commonjs", // 模块系统
    "outDir": "dist" // 输出目录
  },
  "include": ["src/**/*"] // 要编译的文件
}

编译命令

在项目根目录执行：

tsc

它会根据配置编译 src 目录下的文件到 dist 目录。

假设我们有一个 src/index.ts 文件：

let num: number = 10;
function add(a: number, b: number): number {
  return a + b;
}
console.log(add(num, 5));

编译后在 dist/index.js 中：

var num = 10;
function add(a, b) {
  return a + b;
}
console.log(add(num, 5));

高级用法

可以结合构建工具如 webpack。安装 ts-loader：

npm install ts-loader --save-dev

在 webpack.config.js 中配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
};

这样 webpack 就能处理 TypeScript 文件。

通过合理配置编译，我们能充分利用 TypeScript 的优势，同时让代码在浏览器中顺利运行。从基础的 tsc 到与构建工具集成，JS TypeScript 编译为前端开发带来更高效的流程。