TypeScript（TS）， TypeScript（TS）的编译

Batman_curry

已于 2024-12-09 19:07:20 修改

阅读量1.1k

点赞数 18

文章标签： typescript javascript

于 2024-12-09 14:20:12 首次发布

本文链接：https://blog.youkuaiyun.com/Batman_curry/article/details/144347337

版权

很棒的提问！🎉 TypeScript（TS）的编译是一个非常核心的概念，下面我会用清晰易懂的方式来解释。

🎯 1. 编译的定义

编译（Compilation） 是指将一种高级语言转换为另一种语言的过程。在 TypeScript 中，编译是指将 TypeScript 代码（.ts 文件） 转换为 JavaScript 代码（.js 文件） 的过程。

TypeScript 是一种超集语言，它扩展了 JavaScript，增加了类型系统、接口、泛型等特性，但这些特性并不能直接被 JavaScript 引擎（如 V8）识别。
JavaScript 是浏览器、Node.js 等环境中实际运行的代码。

因此，TS 编译的主要目的是：把 TS 转换成标准的 JavaScript，以便在浏览器或 Node.js 中运行。

🎯 2. 为什么 TypeScript 需要编译？

TS 语法超出 JS 的范围
- TypeScript 支持很多 JavaScript 不支持的特性，比如类型注解、接口、枚举等。
- 比如：
```
const add = (a: number, b: number): number => {
  return a + b;
};
```
  - 这里的 : number 是 TypeScript 的类型注解，它不能被 JavaScript 直接理解。
- 编译后变成标准的 JavaScript：
```
const add = (a, b) => {
  return a + b;
};
```
去掉类型信息
- TypeScript 的类型检查只在开发阶段有效，编译后类型信息会被删除，因为 JavaScript 本身是动态类型语言。
兼容性
- TypeScript 编译器（tsc）可以将 TS 转换为不同版本的 JavaScript，以兼容不同的运行环境。
- 比如：
  - 将 ES6 的箭头函数 ()=> 转换为 ES5 的普通函数 function()。
  - 将 ES6 的类转换为 ES5 的原型模式。

🎯 3. 编译后生成的文件

.js 文件
- 这是 TypeScript 编译后的纯 JavaScript 文件。
- 这个文件可以直接运行在浏览器、Node.js 等环境中。
.d.ts 文件
- 这是 TypeScript 的类型声明文件，描述了 .js 文件的类型结构。
- 它的作用是为使用该库的其他 TypeScript 开发者提供类型提示。
示例：
- TypeScript 代码：
```
export const add = (a: number, b: number): number => a + b;
```
- 编译后：
  - .js 文件：
```
export const add = (a, b) => a + b;
```
  - .d.ts 文件：
```
export declare const add: (a: number, b: number) => number;
```
- 重要性：.d.ts 文件在库开发中尤为重要，它让 TypeScript 用户在使用你的 JavaScript 库时也能享受类型提示。

🎯 4. TypeScript 编译器（tsc）的工作流程

安装 TypeScript
- 如果未安装，运行以下命令：
```
npm install -g typescript
```

初始化项目

创建 tsconfig.json 配置文件：
```
tsc --init
```

配置文件示例：

{
  "compilerOptions": {
    "target": "es5",              // 转换为 ES5 的 JavaScript
    "module": "commonjs",         // 使用 CommonJS 模块规范
    "declaration": true,          // 生成 .d.ts 文件
    "outDir": "./dist",           // 输出目录
    "strict": true                // 启用严格模式
  },
  "include": ["src/**/*"],        // 编译 src 文件夹中的所有文件
  "exclude": ["node_modules"]    // 排除 node_modules 文件夹
}

编译项目
- 编译所有 TypeScript 文件：
```
tsc
```
- 如果没有配置 tsconfig.json，也可以直接编译单个文件：
```
tsc example.ts
```
生成的文件
- 如果配置了 outDir: "./dist"，你会在 dist 文件夹中看到：
  - .js 文件（编译后的 JavaScript）。
  - .d.ts 文件（类型声明）。

🎯 5. TypeScript 编译的优势

类型安全

在编译阶段发现潜在的类型错误，从而提高代码的可靠性。

示例：

const greet = (name: string) => {
  return `Hello, ${name}`;
};
greet(123); // 编译时会报错，因为传入的参数类型不匹配

跨版本支持
- TypeScript 可以将最新版本的 JavaScript（如 ES2023）代码编译为兼容旧环境（如 ES5）的代码。
类型声明文件
- 为使用者提供良好的开发体验（类型提示、自动补全）。
编译优化
- TypeScript 在编译过程中可能会对代码进行优化，比如删除未使用的变量、简化表达式。

🎯 6. 编译和解释的区别

编译（Compilation）
- 将源代码转换为目标代码（如 TypeScript 转为 JavaScript）。
- 编译结果是一个新的文件（.js 文件）。
解释（Interpretation）
- 源代码在运行时直接被逐行解析和执行（如 V8 引擎直接运行 JavaScript）。
- 不会生成中间文件，代码逐行运行。

🎯 7. 总结

TypeScript 编译的目的是将 TS 转换为兼容的 JavaScript，删除类型信息，确保代码能在运行时执行。
编译后会生成 .js 和 .d.ts 文件：
- .js：实际运行的 JavaScript 文件。
- .d.ts：类型声明文件，用于帮助开发者提供类型提示。
使用 TypeScript 编译器 tsc 来管理和编译项目。

如果你对某些配置选项或实际编译过程还有疑问，随时告诉我！😊