TypeScript 简介

什么是 TypeScript？

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

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 代码。

# 安装 TypeScript
npm install -g typescript

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

TypeScript 开发工具支持

✅ Visual Studio Code（VS Code）

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

✅ ts-node

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

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

✅ 其他工具链支持

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

tsconfig.json 简介

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

一个基本示例如下：

{
  "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: 控制编译包含/排除的文件。