# TypeScript 简介

URL: https://caijiao.org/ts/part1/intro
Source: docs/ts/part1/intro.md
Description: TypeScript 是由 Microsoft 开发的开源编程语言，它是 JavaScript 的一个超集（superset），也就是说，所有合法的 JavaScript 代码在 TypeScript 中都是合法的

## 什么是 TypeScript？

TypeScript 是由 Microsoft 开发的**开源编程语言**，它是 JavaScript 的一个超集（superset），也就是说，**所有合法的 JavaScript 代码在 [TypeScript](/ts/) 中都是合法的**。

TypeScript 最大的特点是：

> **为 JavaScript 添加了静态类型系统和开发时的类型检查能力。**

这意味着你可以在开发阶段捕获大量潜在错误，提高代码可维护性和开发效率。

## 为什么使用 TypeScript？

使用 TypeScript 的主要优势包括：

### ✅ 更好的可读性与可维护性

类型注解可以明确表达代码意图，对于协作开发或多人项目尤其重要。

### ✅ 更强的开发体验

配合编辑器（如 VS Code），可以获得自动补全、类型提示、跳转定义等增强功能。

### ✅ 提前发现潜在错误

类型检查器可以在编译期发现错误，避免运行时报错。

### ✅ 更适合大型项目

TypeScript 强调模块化、接口定义、面向对象编程，有助于构建大型系统。

## TypeScript 与 JavaScript 的关系

| 特性       | JavaScript             | TypeScript               |
| ---------- | ---------------------- | ------------------------ |
| 类型系统   | 动态类型（运行时检查） | 静态类型（编译时检查）   |
| 语法兼容性 | 原生                   | 向下兼容所有 JS 写法     |
| 开发体验   | 较弱                   | 强类型支持、IDE 提示强大 |
| 编译流程   | 无需编译，直接运行     | 需先编译为 JS 才能运行   |
| 适合项目   | 小型脚本、快速原型开发 | 中大型项目、团队协作开发 |

简言之：

> TypeScript 不替代 JavaScript，而是增强 JavaScript 的能力。

## TypeScript 是如何运行的？

- TypeScript 文件使用 `.ts`（或 `.tsx`）扩展名；
- 需要通过 **TypeScript 编译器 `tsc`** 将 `.ts` 文件转译为浏览器可识别的 `.js` 文件；
- 在实际部署时，运行的仍然是 JavaScript 代码。

```bash
# 安装 TypeScript
npm install -g typescript

# 编译 .ts 文件
tsc hello.ts  # → 生成 hello.js
```

## TypeScript 开发工具支持

### ✅ Visual Studio Code（VS Code）

- Microsoft 官方编辑器，完美支持 TypeScript；
- 自动补全、类型提示、错误检查、跳转定义一应俱全；
- 支持 `tsconfig.json` 识别项目结构。

### ✅ ts-node

- 允许直接运行 `.ts` 文件，而无需手动编译；
- 常用于本地开发或脚本运行。

```bash
npm install -g ts-node
ts-node index.ts
```

### ✅ 其他工具链支持

- Webpack / Vite / Rollup 均支持 TypeScript；
- 前端框架（如 React、Vue）也提供了完善的 TS 支持；
- 后端框架如 NestJS、Express 也支持 TypeScript 开发。

## tsconfig.json 简介

`tsconfig.json` 是 TypeScript 的配置文件，定义了编译行为及项目结构。

一个基本示例如下：

```json
{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "strict": true,
    "outDir": "./dist",
    "baseUrl": "./src",
    "paths": {
      "@utils/*": ["utils/*"]
    }
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
```

### 常见配置项说明：

- `target`: 编译后的 JS 目标版本；
- `module`: 模块化方式，如 ESNext, CommonJS；
- `strict`: 开启所有严格类型检查；
- `baseUrl` 与 `paths`: 配置路径别名；
- `include` / `exclude`: 控制编译包含/排除的文件。