一、TypeScript 简介

TypeScript 是 JavaScript 的超集，它为 JavaScript 增加了静态类型检查，让代码更安全、易维护、适合大型项目，最终会编译成标准 JavaScript 运行。

TypeScript弥补了JavaScript的什么缺点？

JavaScript的缺点

• 无静态类型检查：
  变量类型随时可变，运行时才会报错，开发阶段无法提前发现错误
• 代码可读性差：
  没有类型标注，别人 / 后期看代码不知道变量、函数参数是什么类型
• 大型项目维护难：
  多人协作、代码量变大后，重构、改代码极易出隐性 Bug
• 无接口 / 泛型：
  复杂业务无法做类型约束，代码结构混乱
• IDE 智能提示弱：
  没有类型信息，编辑器无法精准补全、跳转、校验

---

二、JavaScript 有什么缺点？TypeScript 弥补了 JS 的什么缺点？

1. JavaScript 的主要缺点

• 无静态类型检查：变量类型随时可变，运行时才会报错，开发阶段无法提前发现错误
• 代码可读性差：没有类型标注，别人/后期看代码不知道变量、函数参数是什么类型
• 大型项目维护难：多人协作、代码量变大后，重构、改代码极易出隐性 Bug
• 无接口/泛型：复杂业务无法做类型约束，代码结构混乱
• IDE 智能提示弱：没有类型信息，编辑器无法精准补全、跳转、校验

2. TypeScript 弥补的缺点

• 静态类型检查：编译阶段就发现类型错误，避免运行时报错
• 类型标注：让代码自带文档，可读性大幅提升
• 支持接口、泛型、枚举：适合大型项目、复杂架构
• IDE 强支持：智能提示、自动补全、重构安全可靠
• 兼容 ES 新特性：提前使用最新 JS 语法，编译向下兼容
• 类型安全：杜绝隐式类型转换、undefined 等常见 JS 坑

---

三、TypeScript 有什么特点？哪些框架/项目在用 TS？

1. TypeScript 特点

• 静态类型语言：编译时类型检查，不是运行时
• JavaScript 的超集：所有 JS 代码都能在 TS 中运行
• 类型可选：可以部分用类型，也可以完全不用
• 支持 ES6+：编译成低版本 JS，兼容所有环境
• 面向对象增强：支持类、接口、继承、修饰符
• 强大的工具生态：类型定义库 @types/* 支持几乎所有第三方库

2. 主流使用 TypeScript 的框架/项目

前端框架

• Vue 3（完全使用 TS 重构）
• React（官方推荐 TS）
• Angular（原生就是 TS）

库/工具

• Node.js 后端项目（Express/NestJS）
• NestJS（企业级 Node 框架，TS 首选）
• Ant Design、Element Plus
• Vite、Webpack
• Electron 桌面应用

大型项目

• 微软、谷歌、阿里、腾讯等企业级项目
• 中后台管理系统、微前端、大型 SPA

---

四、TypeScript 运行环境搭建 + 如何运行 TS 代码

1. 搭建 TS 运行环境（极简步骤）

1. 确保安装 Node.js
2. 全局安装 TypeScript 编译器

npm install -g typescript

3. 检查是否安装成功

tsc -v

2. 运行 TS 代码

方式1：编译成 JS 再运行（标准方式）

1. 新建 test.ts
2. 编译 TS → JS

tsc test.ts

3. 运行生成的 JS 文件

node test.js

方式2：一键直接运行（开发常用）

安装 ts-node 工具：

npm install -g ts-node

直接运行 TS：

ts-node test.ts

3. 生成配置文件（可选）

tsc --init

生成 tsconfig.json，用于配置编译规则。

---

五、如何定义 TS 变量？支持哪些 JS 类型？

1. TS 定义变量语法

let 变量名: 类型 = 值;

示例：

let name: string = "张三";
let age: number = 20;
let isStudent: boolean = true;

2. TS 支持的 JavaScript 原有类型

TS 完全兼容 JS 所有基础类型：

1. string — 字符串
2. number — 数字（整数/浮点数/NaN/Infinity）
3. boolean — 布尔
4. undefined
5. null
6. object — 对象
7. array — 数组
8. function — 函数
9. symbol
10. bigint

示例：

let u: undefined = undefined;
let n: null = null;
let obj: object = { name: "ts" };
let arr: number[] = [1, 2, 3];

---

六、常见 TS 特有类型 + 作用

这些是 JS 没有、TS 独有的类型。

1. any 任意类型

• 作用：关闭 TS 类型检查，变量可以赋任何类型值
• 场景：兼容老代码、不确定类型时

let a: any = 123;
a = "abc";
a = true;

2. unknown 未知类型

• 作用：比 any 安全，必须先判断类型才能使用
• 场景：类型不明确，但希望保持类型安全

let b: unknown = "hello";
if (typeof b === "string") {
  console.log(b.length);
}

3. void 空类型

• 作用：函数没有返回值时使用

function fn(): void {
  console.log("无返回");
}

4. never 永不存在类型

• 作用：表示永远不会执行完或永远不会有返回值
• 场景：抛出错误、死循环函数

function err(): never {
  throw new Error("报错");
}

5. tuple 元组

• 作用：固定长度 + 每个位置类型固定的数组

let person: [string, number] = ["张三", 20];

6. enum 枚举

• 作用：定义有名字的常量集合，代码更语义化

enum Gender {
  Male,
  Female
}
let g: Gender = Gender.Male;

7. interface 接口

• 作用：约束对象结构，强制属性/方法规范

interface User {
  name: string;
  age: number;
}

8. type 类型别名

• 作用：给类型起别名，简化复杂类型

type ID = string | number;
let id: ID = 1001;

---

总结

	核心要点
二	JS 缺点：无类型、易出错、难维护；TS 补全类型安全、编译检查、大型项目支持
三	TS 特点：静态类型、JS 超集、面向对象增强；主流框架 Vue3/React/Angular/NestJS 都在用
四	环境：npm i -g typescript；运行：tsc 编译 / ts-node 直接运行
五	TS 变量：let a:类型=值；支持所有 JS 类型string/number/boolean/object 等
六	TS 特有类型：any/unknown/void/never/元组/枚举/接口/type，用于类型约束与代码规范