news 2026/4/23 22:08:43

TypeScript 核心知识点速查表

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
TypeScript 核心知识点速查表

一、基础类型（必掌握）

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核心区别

维度typeinterface
核心用途任意类型别名（基础/联合/交叉）对象/类结构描述，侧重继承
继承用交叉类型&支持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：构造函数赋值}}

九、最佳实践

  1. 禁用any：用unknown替代，配合类型守卫；
  2. 优先类型推导：变量赋值时让 TS 自动推导，减少冗余；
  3. 开启严格模式：strict: true提前发现 bug；
  4. 类型复用：重复类型抽离为type/interface；
  5. 路径别名：用@简化导入，提升代码可读性。

这份速查表覆盖了 TS 开发的核心知识点，可直接作为日常开发的参考手册，快速定位所需语法和解决方案~

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/4/23 9:57:23

Inter字体：重塑数字时代的屏幕阅读体验

Inter字体&#xff1a;重塑数字时代的屏幕阅读体验 【免费下载链接】inter The Inter font family 项目地址: https://gitcode.com/gh_mirrors/in/inter Inter字体作为21世纪数字排版的革命性突破&#xff0c;正在重新定义屏幕阅读的视觉标准。这款专为数字环境深度优化…

作者头像 李华
网站建设 2026/4/23 11:36:33

仅限高级工程师知晓：VSCode中Azure QDK模板的隐藏用法（限时公开）

第一章&#xff1a;VSCode Azure QDK 项目模板的核心价值VSCode 结合 Azure Quantum Development Kit&#xff08;QDK&#xff09;提供的项目模板&#xff0c;为量子计算开发者构建了高效、标准化的开发起点。这些模板不仅预置了量子程序的基本结构&#xff0c;还集成了编译、仿…

作者头像 李华
网站建设 2026/4/22 15:59:45

Jellyfin Bangumi插件终极指南：打造完美中文番剧库

还在为Jellyfin中的动漫资源信息不全而头疼吗&#xff1f;想要像专业视频网站一样拥有精美的番剧封面和完整的中文元数据吗&#xff1f;Jellyfin Bangumi插件正是您需要的解决方案&#xff01;这款专为中文用户设计的插件&#xff0c;能够自动从Bangumi番组计划同步高质量的中文…

作者头像 李华
网站建设 2026/4/23 11:21:29

19、Linux 系统管理命令与实用工具全解析

Linux 系统管理命令与实用工具全解析 在 Linux 系统中，掌握各类管理命令和实用工具对于系统的高效运行和维护至关重要。下面将详细介绍一系列常用的命令和工具及其使用方法。 定时执行命令 watch -n 60 my_command 命令可以让 my_command 每隔 60 秒执行一次，默认间隔为…

作者头像 李华
网站建设 2026/4/23 11:20:23

如何在Windows/Mac/Linux上完美安装VSCode与Qiskit依赖？一文讲透！

第一章&#xff1a;VSCode与Qiskit环境搭建前的准备 在开始使用 VSCode 进行 Qiskit 量子计算开发之前&#xff0c;必须确保系统具备必要的软件依赖和开发工具链。合理的环境准备不仅能提升后续开发效率&#xff0c;还能避免因依赖冲突导致的运行时错误。 系统要求确认 操作系…

作者头像 李华
网站建设 2026/4/23 11:38:55

【花雕学编程】Arduino BLDC 之群体机器人协同探索

在基于 Arduino 平台与无刷直流电机&#xff08;BLDC&#xff09;驱动的群体机器人协同探索&#xff08;Swarm Robotic Cooperative Exploration&#xff09;系统中&#xff0c;多个低成本、低算力的智能体通过局部感知与简单通信规则&#xff0c;共同完成对未知环境的覆盖、建…

作者头像 李华