# TypeScript 高级特性(核心+实用)

你想掌握 TypeScript 真正提升开发效率的高级特性 ,我会整理最常用、面试/工程必备的知识点,用简洁易懂的方式讲清用法和场景,跳过冗余基础内容。

一、类型系统高级特性(最核心)

1. 泛型(Generic)

作用 :让类型「可复用、灵活」,不写死类型,实现类型安全的通用代码。

ts 复制代码
// 通用函数:返回值类型 = 入参类型
function identity<T>(arg: T): T {
  return arg;
}

// 泛型接口
interface Res<T = any> {
  code: number;
  data: T;
}
// 使用:指定返回数据类型
type UserRes = Res<{ id: number; name: string }>;

2. 联合类型 & 交叉类型

  • 联合类型(|) :满足任意一个类型
  • 交叉类型(&) :满足所有类型
ts 复制代码
// 联合
type Status = "success" | "error" | "loading";
// 交叉
type User = { id: number } & { name: string };

3. 类型断言 / 非空断言

强制告诉 TS 明确的类型,处理无法自动推断的场景:

ts 复制代码
// 类型断言
const dom = document.getElementById("app") as HTMLDivElement;
// 非空断言(!):确定值一定不为 null/undefined
const user = data!.user;

4. 类型守卫(Type Guard)

作用:在运行时缩小类型范围,让 TS 精准推断类型

ts 复制代码
function isString(value: unknown): value is string {
  return typeof value === "string";
}

if (isString(val)) {
  val.trim(); // TS 知道 val 是 string
}

二、TS 高级类型工具(内置)

TypeScript 自带工具类型,不用重复造轮子:

工具类型 作用
Partial<T> 所有属性可选
Required<T> 所有属性必填
Readonly<T> 所有属性只读
Pick<T, K> 挑选部分属性
Omit<T, K> 剔除部分属性
Exclude<T, U> 从 T 中排除 U 类型
Extract<T, U> 从 T 中提取 U 类型
ReturnType<T> 获取函数返回值类型
Parameters<T> 获取函数参数类型

示例:

ts 复制代码
interface User { id: number; name: string; }
type PartialUser = Partial<User>; // { id?: number; name?: string }
type OmitIdUser = Omit<User, "id">; // { name: string }

三、高级类型编程(进阶必备)

1. keyof 索引类型查询

获取对象所有键组成联合类型:

ts 复制代码
type UserKeys = keyof User; // "id" | "name"

2. TK 索引访问类型

获取对象值类型:

ts 复制代码
type UserIdType = User["id"]; // number

3. 映射类型(批量修改类型)

基于旧类型生成新类型:

ts 复制代码
// 给所有属性添加 readonly
type Readonly<T> = { readonly [P in keyof T]: T[P] };

4. 条件类型(三目运算符)

ts 复制代码
type IsString<T> = T extends string ? true : false;

5. infer 类型推断(高级)

在条件类型中提取未知类型:

ts 复制代码
// 获取函数返回值(简化版 ReturnType)
type GetReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

四、面向对象高级特性

1. 类的修饰符

  • public(默认):公开
  • private:仅类内部可访问
  • protected:类 + 子类可访问
  • readonly:只读

2. 抽象类(abstract)

不能实例化,只能被继承,强制子类实现方法:

ts 复制代码
abstract class Animal {
  abstract say(): void;
}

3. 接口继承 & 类实现接口

ts 复制代码
interface A { name: string }
interface B extends A { age: number }

class User implements B {
  name = "";
  age = 0;
}

五、工程化高级特性

1. 模块 & 命名空间

  • import/export:ES 模块
  • namespace:全局代码隔离

2. 声明文件(.d.ts)

为无类型 JS 库提供类型定义:

ts 复制代码
declare module "lodash" {
  export function debounce(...args: any[]): any;
}

3. 类型兼容 & 类型收窄

TS 是结构化类型系统(鸭子类型),只要结构一致就兼容。


六、实战高频特性

1. 函数重载

一个函数,多种参数/返回值类型:

ts 复制代码
function fn(x: string): string;
function fn(x: number): number;
function fn(x: any): any {
  return x;
}

2. 字面量类型 + 枚举

ts 复制代码
// 字面量类型(比枚举更轻量)
type Method = "GET" | "POST";
// 枚举
enum Status { Success = 200, Error = 500 }

3. 泛型约束(extends)

限制泛型必须拥有某些属性:

ts 复制代码
function logName<T extends { name: string }>(obj: T): void {
  console.log(obj.name);
}

总结

  1. 核心三件套:泛型 + 工具类型 + 映射类型
  2. 类型编程 :keyof / T[K] / 条件类型 / infer
  3. 工程必备:声明文件、类修饰符、类型守卫
  4. 所有特性目标 :更安全、更灵活、更少 any
相关推荐
hiahiahia12322 分钟前
Streaming Model Output
开发语言·前端
paopaokaka_luck23 分钟前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩33 分钟前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
asaotomo38 分钟前
截图识题、AI 讲解、笔记沉淀:Chrome 扩展体验
前端·chrome·笔记
前端架构师-老李40 分钟前
HTML与CSS基础第五课—HTML的空格、换行、横线相关知识
前端·css·html
SEO_juper41 分钟前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome
Highcharts.js44 分钟前
CSUN 2026|Highcharts无障碍数据与AI分享
javascript·人工智能·数据分析·highcharts·图表开发
Nymph_Zhu1 小时前
vue3+element-plus 文件上传
前端·typescript·vue3·element-plus
echome8881 小时前
CSS 布局:Flex 和 Grid 怎么选,附常见坑
前端·css·html
计算机魔术师1 小时前
科技巨头砸7400亿押注AI,为什么苹果成了唯一赢家?
前端