一、基础类型（必掌握）
1. 原生基础类型
| 类型 | 说明 | 示例代码 |
|---|
string | 字符串 | let name: string = "张三"; |
number | 数字（整数/浮点数） | let age: number = 25; const pi = 3.14; |
boolean | 布尔值 | let isDone: boolean = true; |
null | 空值 | let n: null = null; |
undefined | 未定义 | let u: undefined = undefined; |
symbol | 唯一值（ES6+） | const id: symbol = Symbol("id"); |
bigint | 大整数（ES11+） | let bigNum: bigint = 100n; |
2. TS 新增基础类型
| 类型 | 说明 | 示例代码 |
|---|
any | 任意类型（关闭类型校验，少用） | let val: any = 123; val = "abc"; |
unknown | 安全版 any（需类型守卫） | let unk: unknown = "hi"; if (typeof unk === "string") unk.length; |
void | 无返回值（函数用） | function log(): void { console.log("日志"); } |
never | 永无返回值（报错/无限循环） | function throwErr(): never { throw new Error("错了"); } |
3. 数组类型（3种写法）
// 1. 类型+[]（最常用）letnumArr:number[]=[1,2,3];// 2. Array<类型>（泛型）letstrArr:Array<string>=["a","b","c"];// 3. 联合类型数组letmixArr:(number|string)[]=[1,"a"];
4. 元组类型（固定长度+类型）
// 声明：[类型1, 类型2, ...]letuser:[string,number]=["张三",25];let[userName,userAge]=user;// 解构赋值，类型自动匹配
二、进阶类型（项目核心）
1. 联合类型（|，多类型选其一）
typeStatus="success"|"error"|"loading";// 字面量联合（常用）letstatus:Status="success";// 类型守卫：避免调用方法报错functionformat(val:number|string){if(typeofval==="string")returnval.toUpperCase();returnval.toFixed(2);}
2. 交叉类型（&，合并多类型）
typePerson={name:string;age:number};typeJob={job:string;salary:number};typePersonWithJob=Person&Job;// 同时拥有两个类型的属性constuser:PersonWithJob={name:"张三",age:25,job:"前端",salary:20000};
3. 类型别名（type，复用类型）
// 基础类型复用typeStr=string;// 复杂类型复用typeUser={id:number;name:string;age?:number;// 可选属性readonlyphone:string;// 只读属性};// 函数类型复用typeFn=(a:number,b:number)=>number;constadd:Fn=(x,y)=>x+y;
4. 接口（interface，描述结构+继承）
// 基础接口interfacePerson{name:string;age?:number;// 可选属性[key:string]:any;// 任意属性}// 接口继承（核心优势）interfaceStudentextendsPerson{studentId:number;study():void;// 方法声明}conststudent:Student={name:"李四",studentId:1001,study(){}};
5.type vs interface核心区别
| 维度 | type | interface |
|---|
| 核心用途 | 任意类型别名（基础/联合/交叉） | 对象/类结构描述，侧重继承 |
| 继承 | 用交叉类型& | 支持extends继承 |
| 重复定义 | 报错（不支持合并） | 自动合并属性（独有） |
| 支持类型 | 所有类型 | 主要支持对象/类/函数 |
6. 函数类型（约束参数+返回值）
// 1. 直接声明functionadd(a:number,b:number):number{returna+b;}// 2. 可选参数（放必选后）functiongreet(name:string,age?:number){}// 3. 默认参数functionfn(a:number=10,b:number){}// 4. 剩余参数functionsum(...nums:number[]):number{returnnums.reduce((a,b)=>a+b,0);}
7. 泛型（<T>，动态类型复用）
（1）基础泛型函数
// <T> 泛型参数，动态接收类型functionidentity<T>(val:T):T{returnval;}// 调用：自动推导类型conststr=identity("abc");// string 类型constnum=identity<number>(123);// 显式指定类型
（2）泛型约束（extends限制范围）
interfaceHasLength{length:number;}// T 必须包含 length 属性functiongetLength<TextendsHasLength>(val:T):number{returnval.length;}getLength("abc");// 合法（字符串有 length）
（3）泛型接口/类型别名
// 泛型类型别名（通用对象）typeObj<T>={[key:string]:T};constnumObj:Obj<number>={a:1,b:2};// 泛型接口（通用函数）interfaceFn<T,U>{(param:T):U;}constnumToStr:Fn<number,string>=(num)=>num.toString();
三、核心工具类型（直接复用）
1. 映射类型（基于已有类型生成新类型）
| 工具类型 | 作用 | 示例（基于type User = { id: number; name: string }） |
|---|
Partial<T> | 所有属性改为可选 | Partial<User>→ { id?: number; name?: string } |
Required<T> | 所有属性改为必选 | Required<Partial<User>>→ 还原 User 类型 |
Readonly<T> | 所有属性改为只读 | Readonly<User>→ { readonly id: number; … } |
Pick<T, K> | 挑选 T 中 K 属性 | Pick<User, "id">→ { id: number } |
Omit<T, K> | 排除 T 中 K 属性 | Omit<User, "name">→ { id: number } |
Record<K, T> | 生成键 K、值 T 的对象类型 | Record<string, User>→ { [key: string]: User } |
2. 泛型工具类型（类型提取/转换）
| 工具类型 | 作用 | 示例 |
|---|
Exclude<T, U> | 从 T 排除能赋值给 U 的类型 | `Exclude<“a” |
Extract<T, U> | 从 T 提取能赋值给 U 的类型 | `Extract<“a” |
ReturnType<T> | 提取函数返回值类型 | ReturnType<()=>number>→ number |
ConstructorParameters<T> | 提取构造函数参数类型 | ConstructorParameters<DateConstructor>→ [number |
四、类型守卫（缩小类型范围）
1. 常用类型守卫方式
| 方式 | 适用场景 | 示例代码 |
|---|
typeof | 基础类型（string/number等） | if (typeof val === "string") {} |
instanceof | 引用类型（数组/类实例） | if (val instanceof Array) {} |
in | 对象是否含某个属性 | if ("name" in val) {} |
| 自定义类型守卫 | 复杂类型判断 | function isUser(val: any): val is User { return "id" in val; } |
2. 高级类型收窄
// 真值收窄（排除 falsy 值）functionprint(msg:string|null){if(msg)console.log(msg.length);// msg 收窄为 string}// 相等收窄（=== 判断）typeDir="up"|"down";functionmove(dir:Dir){if(dir==="up"){}// dir 收窄为 "up"}
五、枚举（enum，命名常量集合）
1. 数字枚举（支持自增+反向映射）
enumStatusCode{Success=200,// 初始值Error=400,Loading// 自增 401}console.log(StatusCode.Success);// 200console.log(StatusCode[200]);// "Success"（反向映射）
2. 字符串枚举（无自增，无反向映射）
enumUserStatus{Active="已激活",Frozen="已冻结"}constuser={status:UserStatus.Active};// 语义清晰，避免魔法值
六、类与 TS（面向对象+类型约束）
1. 类的基础类型
classPerson{// 属性类型声明name:string;readonlygender:string;// 只读属性// 构造函数constructor(name:string,gender:string){this.name=name;this.gender=gender;}// 方法类型sayHello():string{return`Hello${this.name}`;}}
2. 访问修饰符（权限控制）
| 修饰符 | 访问范围（类内/子类/外部） | 示例 |
|---|
public | 全范围（默认） | public name: string; |
private | 仅类内 | private age: number; |
protected | 类内+子类 | protected job: string; |
3. 抽象类（abstract，不能实例化）
abstractclassAnimal{abstractmakeSound():void;// 抽象方法，子类必须实现eat(){console.log("吃东西");}// 普通方法}classDogextendsAnimal{makeSound(){console.log("汪汪叫");}// 实现抽象方法}// const animal = new Animal(); // 报错：抽象类不能实例化
七、关键配置（tsconfig.json）
1. 核心必配项
{"compilerOptions":{"target":"ES2020",// 编译后 JS 版本"module":"ESNext",// 模块规范（前端）/ CommonJS（Node）"outDir":"./dist",// 输出目录"rootDir":"./src",// 源码目录"strict":true,// 开启严格模式（核心）"esModuleInterop":true,// 兼容 CommonJS/ESM"moduleResolution":"Bundler",// 模块解析（前端用 Bundler）"skipLibCheck":true,// 跳过第三方库类型检查（提效）"baseUrl":"./",// 基础路径"paths":{"@/*":["src/*"]}// 路径别名（@ 指向 src）},"include":["./src/**/*"],// 编译范围"exclude":["node_modules"]// 排除目录}
八、常见问题解决方案
1. null 不能赋值给其他类型
// 方案1：联合类型（推荐）letmsg:string|null=null;// 方案2：非空断言（确定非 null）constinput=document.getElementById("input")!;// 方案3：可选链（短路避免报错）user?.name?.length;
2. 找不到模块声明文件
// 方案1：安装社区类型（优先）npm install @types/xxx-D// 方案2：手动声明模块（src/types/index.d.ts）declaremodule"xxx"{exportfunctionfn():void;}
3. 类属性未初始化
classPerson{age:number=18;// 方案1：直接初始化name:string;constructor(name:string){this.name=name;// 方案2：构造函数赋值}}
九、最佳实践
- 禁用
any：用unknown替代，配合类型守卫； - 优先类型推导：变量赋值时让 TS 自动推导，减少冗余；
- 开启严格模式：
strict: true提前发现 bug； - 类型复用：重复类型抽离为
type/interface； - 路径别名：用
@简化导入，提升代码可读性。
这份速查表覆盖了 TS 开发的核心知识点，可直接作为日常开发的参考手册，快速定位所需语法和解决方案~
