TypeScript 是由 Microsoft 开发的开源编程语言，它是 JavaScript 的超集。即所有合法的 JavaScript 代码，同时也是合法的 TypeScript 代码。

TypeScript 通过添加可选的静态类型、接口、枚举等特性，大大增强了 JavaScript 的开发体验。

![](https://www.runoob.com/wp-content/uploads/2019/09/a7d401cd-db77-411e-aea1-daaad18a770c.webp)
### TypeScript 的主要优势

- **静态类型检查：** 在编译时发现类型错误，减少运行时错误
- **强大的 IDE 支持：** 智能代码补全、导航和重构
- **更好的代码可读性：** 类型本身就是最好的文档
- **现代 JavaScript 特性：** 支持 ES 6+ 语法，如箭头函数、模块、类等
- **渐进式迁移：** 可以逐步将现有 JavaScript 项目迁移到 TypeScript

### TypeScript 工作原理

TypeScript 不能直接在浏览器中运行，它需要先编译为 JavaScript。这个编译过程会检查类型错误，并将 TypeScript 特有的语法转换为纯 JavaScript。

TypeScript 编译器 (tsc) 在编译过程中进行类型检查，如果发现类型错误会报错并阻止编译。编译成功后生成纯 JavaScript 代码，可以在任何浏览器或 Node.js 环境中运行。

---


# 核心特性
TypeScript 是对 JavaScript 的类型增强扩展，在保持原有语法兼容的基础上，引入了更强的类型系统和工程能力。
TypeScript 在 JavaScript 的基础上引入了一套完整的类型系统，以下是最常用的核心特性。

### 核心增强能力

| 特性              | 说明                       |
| --------------- | ------------------------ |
| 类型批注 & 编译时检查    | 在开发阶段发现类型错误，提高代码可靠性      |
| 类型推断            | 无需显式声明类型，编译器可自动推断        |
| 类型擦除            | 编译后移除类型信息，输出纯 JavaScript |
| 接口（Interface）   | 用于定义对象结构，增强代码约束          |
| 枚举（Enum）        | 提供命名常量集合，提升可读性           |
| 泛型（Generics）    | 支持类型复用，增强函数和类的灵活性        |
| Mixin           | 实现多重继承的组合模式              |
| 命名空间（Namespace） | 组织代码结构（旧方案，现多用模块）        |
| 元组（Tuple）       | 固定长度、不同类型的数组             |
| 异步（Await）       | 提供更直观的异步流程控制             |

## 一、类型系统（核心）

### 1. 基础类型注解

用冒号 `:` 声明类型，是最基本的写法。

typescript

let name: string = "Alice";
let age: number = 25;
let isActive: boolean = true;

### 2. 类型推断（Type Inference）

TypeScript 会根据赋值**自动推断**类型，不必每次都手动标注。

typescript

let name = "Alice";  // 自动推断为 string
// name = 123;       // ❌ 报错：不能将 number 赋给 string

> **最佳实践**：函数参数需要显式标注类型；局部变量和返回值依赖推断即可。

### 3. 类型别名（Type Alias）

用 `type` 为复杂类型起一个"别名"，方便复用。

typescript

type StringOrNumber = string | number;
type UserID = string | number;
let id: UserID = "abc 123";

### 4. 接口（Interface）

用来描述对象的**形状（Shape）**，定义对象该有哪些属性和方法。

typescript

interface Person {
    name: string;
    age: number;
    greet(): void;
}

**接口 vs 类型别名**：

|特性| `interface` | `type` |
|---|---|---|
|声明合并|✅ 可以|❌ 不可以|
|扩展方式| `extends` | `&`（交叉）|
|适用场景|对象结构|联合类型、元组、工具类型|

### 5. 枚举（Enum）

定义一组**命名常量**，消除代码中的"魔法值"。

typescript

enum Direction { Up, Down, Left, Right }
let dir = Direction.Up;  // 0
enum Status { Pending = "PENDING", Done = "DONE" }  // 字符串枚举

### 6. 元组（Tuple）

固定数量和类型的数组。

typescript

let point: [number, number] = [10, 20];
let user: [string, number] = ["Alice", 25];

### 7. 类型守卫（Type Guard）

在运行时检查类型，让 TypeScript 能**精确推断**。

typescript

function printId(id: string | number) {
    if (typeof id === "string") {
        console.log(id.toUpperCase());  // id 是 string
    } else {
        console.log(id.toFixed(2));     // id 是 number
    }
}

### 8. 工具类型（Utility Types）

TypeScript 内置了常用的类型转换工具。

|工具类型|作用|示例|
|---|---|---|
| `Partial<T>` |所有属性变为可选| `Partial<Todo>` |
| `Readonly<T>` |所有属性变为只读| `Readonly<Todo>` |
| `Pick<T, K>` |选取部分属性| `Pick<Todo, "title">` |
| `Omit<T, K>` |排除部分属性| `Omit<Todo, "description">` |
| `Record<K, T>` |创建键值对类型| `Record<string, number>` |

---

## 二、面向对象增强

### 1. 类与访问修饰符

TS 在 ES 6 类基础上新增 4 种访问控制：

typescript

class Person {
    public name: string;       // 外部可访问（默认）
    private age: number;        // 仅类内部
    protected gender: string;   // 类内部 + 子类
    readonly id: number;        // 只读，不可修改
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
        this.id = Date.now();
    }
}

|修饰符|访问范围|
|---|---|
| `public`（默认）|任何地方|
| `private` |仅类内部|
| `protected` |类内部 + 子类|
| `readonly` |只读（初始化后不能改）|

### 2. 抽象类（Abstract Class）

定义**不能被实例化**的基类，由子类实现抽象方法。

typescript

abstract class Animal {
    abstract makeSound(): void;  // 子类必须实现
    move(): void { console.log("moving..."); }
}
class Dog extends Animal {
    makeSound() { console.log("Woof!"); }
}

### 3. 接口继承与实现

typescript

interface Person { name: string; }
interface Employee extends Person { salary: number; }
class Developer implements Employee {
    name: string;
    salary: number;
    constructor(name: string, salary: number) {
        this.name = name;
        this.salary = salary;
    }
}

---

## 三、泛型（Generics）

**泛型 = 类型的变量**，使用时再传入具体类型，实现复用。

typescript

```ts
// 函数泛型
function identity<T>(value: T): T { return value; }
identity<number>(42);
// 类泛型
class Stack<T> {
    private items: T[] = [];
    push(item: T) { this.items.push(item); }
    pop(): T | undefined { return this.items.pop(); }
}
// 泛型约束（限制类型范围）
function getById<T extends { id: number }>(items: T[], id: number): T | undefined {
    return items.find(item => item.id === id);
}
```

---

## 四、高级特性

### 1. 装饰器（Decorator）

用于在类、方法、属性上**附加额外行为**（AOP 编程），常见于 Angular、NestJS。

typescript

// TypeScript 5.0 已是正式标准（无需 experimentalDecorators）
function Log(target: any, key: string) {
    console.log(`方法 ${key} 被调用`);
}
class Calculator {
    @Log
    add(a: number, b: number) { return a + b; }
}

### 2. 可选链（Optional Chaining）`?.`

安全地访问深层嵌套属性，遇到 `null/undefined` 返回 `undefined`。

typescript

let user = { address: { city: "Wonderland" } };
console.log(user?.address?.city);  // "Wonderland"
console.log(user?.profile?.age);   // undefined（不报错）

### 3. 空值合并（Nullish Coalescing）`??`

只有值为 `null` 或 `undefined` 时才使用默认值。

typescript

let value = null;
console.log(value ?? "default");   // "default"
let count = 0;
console.log(count ?? 100);         // 0（0 不是 null/undefined）

---


## 五、模块与组织

### ES Module 支持

使用 `import` / `export` 组织代码，TS 完全支持。

typescript

// math.ts
export function add(a: number, b: number): number { return a + b; }
// main.ts
import { add } from "./math.js";
console.log(add(2, 3));

---

## 六、TypeScript 的关键优势

|优势|说明|
|---|---|
|**静态类型检查**|编译时捕获类型错误，减少运行时 bug|
|**智能提示**|VS Code 等编辑器提供自动补全、重构支持|
|**兼容 JavaScript**|所有 `.js` 文件都是合法的 `.ts`，渐进式迁移|
|**提前支持 ES 新特性**|装饰器、async/await 等可编译为旧版本兼容代码|
|**大型项目必备**|多人协作时类型即文档，降低沟通成本|

## 应用领域

TypeScript 凭借其对 JavaScript 的完全兼容性，几乎可以用在所有 JavaScript 能运行的地方，并且在大型项目中带来额外收益。

### 前端 Web 开发

这是 TypeScript 使用最广泛的场景。三大主流前端框架均对 TypeScript 提供一级支持：

|框架|TypeScript 支持情况|典型场景|
|---|---|---|
|Angular|官方语言，默认使用 TypeScript，无法绕过|企业级 SPA、后台管理系统|
|React|官方提供 `@types/react`，Create React App 和 Vite 均内置 TypeScript 模板|电商、内容平台、中后台应用|
|Vue|Vue 3 核心代码用 TypeScript 重写，组合式 API 对 TypeScript 友好度显著提升|中小型项目、渐进式迁移|
|Next.js / Nuxt|内置 TypeScript 支持，新项目默认开启|全栈 SSR/SSG 应用|

### 后端 Node.js 开发

TypeScript 在 Node.js 后端开发中同样普及。NestJS 是目前最流行的 TypeScript 后端框架，采用与 Angular 相近的模块化架构，内置依赖注入和装饰器支持。

此外，Deno 运行时从第一天起就原生支持 TypeScript，无需任何配置即可直接运行 `.ts` 文件。Bun 同样内置 TypeScript 支持。

### 命令行工具与脚本

借助 `ts-node`、`tsx` 等工具，TypeScript 代码可以在不预编译的情况下直接执行，非常适合编写构建脚本和 CLI 工具。

### 移动端与跨平台

React Native 完整支持 TypeScript，大量企业级移动应用（如 Microsoft Office 移动版、Shopify 等）均采用此技术栈。Expo 的新项目模板默认也以 TypeScript 为基础。

### 游戏开发与图形

Babylon.js（微软出品的 3D 引擎）完全用 TypeScript 编写，并将 TypeScript 类型定义作为一等公民。Phaser 等 2D 游戏引擎同样提供完整的类型定义。
## TypeScript 与其他强类型语言的对比

如果你有其他强类型语言的背景，以下对比可以帮助你快速定位 TypeScript 的设计理念。

|对比项|TypeScript|Java / C#|Go|
|---|---|---|---|
|类型系统|结构化类型（鸭子类型）|名义类型（必须显式声明继承关系）|结构化类型（隐式接口）|
|空值安全|开启 `strictNullChecks` 后支持|Java 需借助注解或 Optional，C# 8+ 支持|通过 error 值和 nil 检查|
|泛型|支持，语法与 Java/C# 相近|支持，Java 有类型擦除限制|Go 1.18+ 支持，语法较简洁|
|编译产物|JavaScript（在 JS 环境运行）|字节码（在 JVM / CLR 上运行）|原生机器码|
|运行时类型检查|无（类型信息编译后抹除）|有（反射机制）|无|
|学习曲线|对 JS 开发者友好，可渐进采用|对初学者较陡|相对简洁，学习曲线中等|

> TypeScript 使用的是**结构化类型系统**（Structural Typing）：只要两个类型的"形状"一致，就认为它们是兼容的，不要求显式声明继承关系。这与 Java/C# 的名义类型（Nominal Typing）有本质区别，也是 TypeScript 能与 JavaScript 无缝互操作的关键原因。

---

## TypeScript 的局限性

TypeScript 不是银弹，了解它的边界同样重要。

|局限|说明|应对思路|
|---|---|---|
|运行时无类型|类型信息在编译后全部抹除，运行时无法依赖类型做判断|需要运行时校验时使用 `zod`、`io-ts` 等库|
|编译步骤|相比纯 JS 多了一个编译环节，增加了工程复杂度|现代构建工具（Vite、esbuild）对此已有良好优化|
|any 类型逃生舱|滥用 `any` 会让类型检查形同虚设|开启 `noImplicitAny` 和 `strict` 模式，配合 ESLint 规则|
|类型体操门槛|复杂的条件类型和映射类型对初学者不友好|大多数业务代码不需要高级类型，循序渐进即可|
|第三方库支持|少数老旧库缺少类型定义，需要自行编写 .d.ts|先查 `@types/*`，确实没有再手写声明文件|
## TS 文件创建
通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。
```
let message : string ="Hello world";

console.log(message);
```
然后执行以下命令将 TypeScript 转换为 JavaScript 代码：
tsc .\app.ts
这时候在当前目录下（与 app.ts 同一目录）就会生成一个 app.js 文件
```
"use strict";

let message = "Hello world";

console.log(message);
```

打开编译后的 helloworld.js 可以发现：代码移除了类型声明,加上了 strict 模式，否则 let 被降级为 var。
使用 node 命令来执行 app.js 文件：

```
$ node .\app.js 
Hello World
```

TypeScript 转换为 JavaScript 过程如下图：

![](https://www.runoob.com/wp-content/uploads/2019/01/typescript_compiler.png)

![](https://www.runoob.com/wp-content/uploads/2019/01/ts-2020-12-01-1.png)


## TypeScript 注释

注释是一个良好的习惯，虽然很多程序员讨厌注释，但还是建议你在每段代码写上文字说明。

注释可以提高程序的可读性。

注释可以包含有关程序一些信息，如代码的作者，有关函数的说明等。

编译器会忽略注释。

### TypeScript 支持两种类型的注释

- **单行注释 ( // )** − 在 // 后面的文字都是注释内容。
    
- **多行注释 (/* */)** − 这种注释可以跨越多行。
    

注释实例：

```// 这是一个单行注释
 
/* 
 这是一个多行注释 
 这是一个多行注释 
 这是一个多行注释 
*/
```

我们可以同时编译多个 ts 文件：

tsc file1.ts file2.ts file3.ts

tsc 常用编译参数如下表所示：

| 序号  | 编译参数说明                                                                                                                   |
| --- | ------------------------------------------------------------------------------------------------------------------------ |
| 1.  | **--help**<br><br>显示帮助信息                                                                                                 |
| 2.  | **--module**<br><br>载入扩展模块                                                                                               |
| 3.  | **--target**<br><br>设置 ECMA 版本                                                                                           |
| 4.  | **--declaration**<br><br>额外生成一个 .d.ts 扩展名的文件。<br><br>tsc ts-hw.ts --declaration<br><br>以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。 |
| 5.  | **--removeComments**<br><br>删除文件的注释                                                                                      |
| 6.  | **--out**<br><br>编译多个文件并合并到一个输出的文件                                                                                       |
| 7.  | **--sourcemap**<br><br>生成一个 sourcemap (.map) 文件。<br><br>sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。                              |
| 8.  | **--module noImplicitAny**<br><br>在表达式和声明上有隐含的 any 类型时报错                                                                 |
| 9.  | **--watch**<br><br>在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。                                                                       |


# VSCODE 中 TS 实现
## 智能提示（IntelliSense）

智能提示提供代码自动补全、悬浮文档、函数参数签名提示，提升编码效率与准确率。
VS Code 对单个 TS 文件、带 `tsconfig.json` 配置的 TS 项目均提供全套智能提示。

### 悬浮文档提示

鼠标悬浮在任意 TS 标识符上，快速查看变量/函数的类型与说明文档；  
快捷键 `kb(editor.action.showHover)` 可在光标位置手动唤起悬浮提示。
### 函数签名提示

编写函数调用代码时，编辑器自动展示函数入参说明，并高亮当前正在填写的参数；  
输入左括号 `(` 或逗号 `,` 自动触发签名提示，快捷键 `kb(editor.action.triggerParameterHints)` 手动唤起。

## 代码片段（Snippets）

除智能补全外，VS Code 内置基础 TS 代码片段，输入关键字时自动弹出快捷模板。
可安装第三方扩展扩充片段库，也能自定义 TS 代码片段，详情参考【用户自定义代码片段】文档。

> **小贴士**：在配置文件中将 `editor.snippetSuggestions` 设为 `"none"` 可关闭片段提示；如需保留，可配置片段展示优先级：`top`（置顶）、`bottom`（置底）、`inline`（和普通提示混排、字母排序，默认配置）。

---

## 错误与警告提示

TS 语言服务实时校验代码，自动标记语法与逻辑问题：

- 编辑器状态栏汇总当前项目错误、警告总数；
- 点击状态栏统计数字，或快捷键 `kb(workbench.actions.view.problems)` 打开【问题】面板，罗列全部报错；
- 存在异常的代码行，行内标红提示，同时在右侧缩略标尺标注错误位置。


快捷键 `kb(editor.action.marker.nextInFiles)` / `kb(editor.action.marker.prevInFiles)` 跳转当前文件上下一处问题，弹窗展示详情与可用快速修复。
## 代码跳转导航

依托导航功能快速浏览大型 TS 项目源码：

- **跳转到定义** `kb(editor.action.revealDefinition)`：定位标识符源码定义处；
- **预览定义** `kb(editor.action.peekDefinition)`：弹窗预览源码，不切换当前文件；
- **查找所有引用** `kb(editor.action.goToReferences)`：列出项目内所有调用该标识符的位置；
- **跳转至类型定义**：定位变量所属的类型源码（类实例会跳转至类本体，而非实例创建代码）；
- **跳转至实现** `kb(editor.action.goToImplementation)`：查找接口/抽象方法的具体实现代码。

通过命令面板（`kb(workbench.action.showCommands)`）的符号检索实现快速跳转：

- **当前文件内查找符号** `kb(editor.action.gotoSymbol)`
- **全工作区检索符号** `kb(workbench.action.showAllSymbols)`

---

## 代码格式化

VS Code 内置 TS 格式化工具，默认规则开箱即用。

通过 `js/ts.format.*` 系列配置自定义格式化规则（例如大括号单独换行）不需要内置格式化时，设置:

"js/ts.format.enable": false

关闭。

如需贴合团队自定义编码规范，可在插件市场安装专用格式化扩展。

---

## 代码重构

VS Code 自带常用 TS 重构能力，如**提取函数、提取常量**。选中待重构代码，点击编辑器侧边灯泡图标或快捷键 `kb(editor.action.quickFix)` 调出重构菜单。


更多重构规则、自定义重构快捷键参考【TypeScript 代码重构】文档。

### 统一重命名

选中变量/方法，快捷键 `kb(editor.action.rename)` 一键修改项目内所有同名标识符。
## 调试功能

VS Code 原生完善支持 TS 调试，兼容源码映射（SourceMap），支持断点、变量查看、调用栈追溯、调试控制台交互；详情查阅【TS 调试指南】与通用调试文档。

### 前端网页调试

借助内置 Chrome/Edge 调试插件，或 Firefox 调试扩展，调试浏览器端 TS 代码。

### 后端 Node 调试

使用内置调试器调试 Node.js 服务，官方配套教程可快速上手 Express 项目调试。

## 代码校验工具（Linter）

Linter 用于检查代码隐患、规范编码风格。VS Code 未内置 TS 校验工具，可在插件市场安装对应扩展。

主流工具 **ESLint** 全面兼容 TS，安装 ESLint 插件后，编辑器实时标错，大量问题支持一键快速修复；`typescript-eslint` 文档指导 TS 项目 ESLint 环境配置。