TypeScript 基础详解（2026 年小白友好版）
TypeScript（简称 TS）是JavaScript 的超集，由 Microsoft 开发并开源（最新稳定版 5.3+，2026 年已到 5.4+）。它在 JS 基础上添加了静态类型系统，让代码更安全、更易维护、更适合大规模项目。
一句话核心价值：
TS = JS + 类型检查（编译时就发现错误，而不是运行时崩溃）。
为什么学 TS（2026 年趋势）：
- 前端框架（如 React、Vue、Angular）几乎全用 TS。
- 后端 Node.js 项目（如 Express/NestJS）也标配 TS。
- 错误早发现、IDE 智能提示强（VS Code 天生支持）。
- 兼容所有 JS 代码（TS 编译后就是纯 JS）。
如果你是 JS 基础选手，TS 入门只需 1–2 天；零基础先补 JS。
1. 环境准备（5 分钟上手）
安装 Node.js（TS 依赖它）：
官网 nodejs.org 下载 LTS 版（2026 年 ≥ 20.x）。安装后验证：node-v# ≥ 20.0.0npm-v# ≥ 10.0.0全局安装 TypeScript：
npminstall-g typescript tsc -v# 验证版本 ≥ 5.3.3编辑器：VS Code（内置 TS 支持）+ 插件：TypeScript Extension Pack。
新建hello.ts文件，VS Code 自动高亮/提示。编译运行：
tsc hello.ts# 编译成 hello.jsnodehello.js# 运行自动监听（开发推荐）：
npminstall-g ts-node ts-node-dev ts-node-dev --respawn hello.ts# 保存自动重载
2. 基本语法（从 JS 到 TS 的升级）
TS 代码以.ts结尾，所有 JS 代码在 TS 中直接有效。
2.1 变量声明与基本类型
| 类型 | 语法示例 | 说明 | 常见场景 |
|---|---|---|---|
| 布尔 | let isDone: boolean = false; | true/false | 条件判断 |
| 数字 | let count: number = 42; | 整数/浮点/NaN/Infinity | 计算 |
| 字符串 | let name: string = "Alice"; | 支持模板字符串${expr} | 文本处理 |
| 数组 | let list: number[] = [1, 2, 3];let list: Array<string> = ["a", "b"]; | 两种写法等价 | 列表数据 |
| 元组 | let tuple: [string, number] = ["age", 28]; | 固定长度/类型 | 多值返回 |
| 枚举 | enum Color {Red = 1, Green, Blue};let c: Color = Color.Green; | 常量集合 | 状态码/选项 |
| Any | let notSure: any = 4; notSure = "maybe"; | 任意类型（禁用类型检查） | 迁移旧 JS / 未知数据 |
| Void | function warn(): void { console.log("!"); } | 无返回值 | 无返回函数 |
| Null/Undefined | let u: undefined = undefined; | 常用于可选参数 | 空值处理 |
| Never | function error(msg: string): never { throw new Error(msg); } | 永不返回（抛错/死循环） | 错误处理 |
代码示例（类型推断 + 显式类型）：
// 类型推断（推荐，TS 自动猜）letage=28;// TS 知道是 numberage="twenty-eight";// 编译报错！// 显式类型（复杂时用）letscore:number|string=95;// union 类型（或）score="A+";// OK2.2 函数
基本定义：
functionadd(x:number,y:number):number{returnx+y;}// 箭头函数constmultiply=(x:number,y:number):number=>x*y;可选/默认参数：
functiongreet(name:string,greeting?:string):string{// ? = 可选return`${greeting||"Hello"},${name}`;}greet("Bob");// Hello, Bob函数重载（overload）：
functionpickCard(x:number):{suit:string;card:number};functionpickCard(x:string):number;functionpickCard(x:any):any{/* 实现 */}
2.3 接口（Interface）—— 定义对象形状
interfaceUser{name:string;age:number;email?:string;// 可选readonlyid:number;// 只读}letuser:User={name:"Alice",age:28,id:1};user.age=29;// OKuser.id=2;// 报错！readonly函数类型：
interfaceSearchFunc{(source:string,subString:string):boolean;}letmySearch:SearchFunc=function(src,sub){returnsrc.includes(sub);};扩展接口：
interfaceAdminextendsUser{role:string;}
2.4 类（Class）—— 面向对象基础
classAnimal{privatename:string;// 私有（外部不可访问）constructor(theName:string){this.name=theName;}move(distance:number=0){// 默认参数console.log(`${this.name}moved${distance}m.`);}}classDogextendsAnimal{bark(){console.log("Woof!");}}constdog=newDog("Buddy");dog.move(10);// Buddy moved 10m.dog.bark();// Woof!- 访问修饰符：public（默认）、private、protected。
- 抽象类：
abstract class Base { abstract method(); }
2.5 泛型（Generics）—— 复用类型
functionidentity<T>(arg:T):T{// T 是类型变量returnarg;}identity<string>("hello");// 指定 T 为 stringidentity(42);// 推断为 number- 泛型接口/类：
interfaceGenericIdentityFn<T>{(arg:T):T;}
3. 高级基础（快速上手）
模块与命名空间：
// math.tsexportfunctionadd(x:number,y:number){returnx+y;}// main.tsimport{add}from"./math";console.log(add(1,2));类型断言（as）：
letsomeValue:any="this is a string";letstrLength:number=(someValueasstring).length;// 告诉 TS “我确定是 string”类型守卫：
functionisString(x:any):xisstring{// 类型谓词returntypeofx==="string";}装饰器（高级，但 React 等常用）：
需要 tsconfig.json 中开启"experimentalDecorators": true。functionsealed(constructor:Function){/* ... */}@sealedclassGreeter{/* ... */}
4. 配置 tsconfig.json（项目必备）
新建项目时运行tsc --init，然后修改：
{"compilerOptions":{"target":"ES2022",// 输出 JS 版本"module":"ESNext",// 模块系统"strict":true,// 严格模式（推荐）"outDir":"./dist",// 输出目录"rootDir":"./src"// 源目录}}编译整个项目：tsc（无参数，自动用 tsconfig）。
5. 常见面试/进阶问题
| 问题 | 答案要点 |
|---|---|
| TS vs JS 最大区别？ | 静态类型 vs 动态类型；TS 编译时检查，JS 运行时。 |
| any 和 unknown 的区别？ | any 禁用类型检查；unknown 必须先检查/断言才能用（更安全）。 |
| interface vs type？ | interface 可扩展/合并；type 支持联合/交叉/条件类型（更灵活）。 |
| TS 如何处理 null/undefined？ | “strictNullChecks”: true 时，必须显式处理（? 或 !）。 |
| 泛型约束？ | <T extends number>（T 必须是 number 子类型）。 |
6. 总结口诀 & 练习建议
- 口诀：变量加类型，函数标返回，接口定形状，泛型复用强。
- 练习：
- 用 TS 重写一个 JS 函数，加类型/接口。
- 建一个简单项目：类 + 继承 + 泛型数组排序。
- 读官网 10 分钟教程：typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html
TS 让代码从“随意”变“严谨”，上手后你会爱上它的提示和安全感～
有哪部分想再深入？如 React + TS、泛型高级、tsconfig 调优 等？告诉我，我继续展开！
