当前位置：首页 > wzjs >正文

常州网站制作建设橙子建站

wzjs 2025/7/20 8:07:42

常州网站制作建设,橙子建站,网站建设与管理专业,互联网软件开发工程师TypeScript extends 全面解析一、extends 的多重身份解析 1.1 TypeScript 中的 extends 全景图 extends 是 TypeScript 中最为核心的关键字之一，其功能覆盖类型系统的多个层面： #mermaid-svg-S2WgvFlxBhJCazz9 {font-family:"trebuchet ms"…

TypeScript `extends` 全面解析

在这里插入图片描述

一、`extends` 的多重身份解析

1.1 TypeScript 中的 `extends` 全景图

extends 是 TypeScript 中最为核心的关键字之一，其功能覆盖类型系统的多个层面：

1.2 类型系统中的约束层次

约束级别	描述	典型语法
继承约束	类/接口的继承关系	`class A extends B`
泛型约束	限制类型参数范围	`<T extends SomeType>`
条件约束	类型条件判断	`T extends U ? X : Y`
推断约束	类型推断时的条件限制	`infer U extends SomeType`
映射约束	映射类型中的属性修饰	`[K in keyof T as ...]`

二、类与接口继承的深度剖析

2.1 类继承机制

基础继承示例：

class Animal {move() {console.log("Moving...");}
}class Dog extends Animal {bark() {console.log("Woof!");}
}const myDog = new Dog();
myDog.move(); // 继承方法
myDog.bark(); // 自有方法

继承的三层内涵：

方法继承：获得父类的所有公共方法
属性继承：自动包含父类的公共属性
类型兼容：子类实例可赋值给父类类型

2.2 接口继承特性

多继承示例：

interface Shape {color: string;
}interface Size {width: number;height: number;
}interface Rectangle extends Shape, Size {borderWidth: number;
}const rect: Rectangle = {color: "blue",width: 100,height: 50,borderWidth: 2
};

接口继承特点：

支持多重继承
合并多个接口类型
可继承类型别名（Type Alias）
允许覆盖父接口属性（需保持兼容）

2.3 继承与实现的区别

extends vs implements 对比：

特性	`extends`	`implements`
适用对象	类继承、接口继承	类实现接口
多重性	类单继承，接口多继承	可多实现
方法实现	自动继承父类实现	必须显式实现所有成员
类型检查	结构兼容即可	严格匹配接口定义
运行时影响	影响原型链	仅编译时检查

三、泛型约束：类型安全的基石

3.1 基础泛型约束

典型应用场景：

interface HasLength {length: number;
}function logLength<T extends HasLength>(arg: T): void {console.log(arg.length);
}logLength("hello");    // 5
logLength([1,2,3]);    // 3
logLength({length: 7}); // 7
// logLength(42);       // 错误：数字没有length属性

3.2 多重约束策略

联合类型约束：

function processInput<T extends string | number>(input: T): T {// 处理逻辑return input;
}

交叉类型约束：

interface Name {name: string;
}interface Age {age: number;
}function createPerson<T extends Name & Age>(info: T): T {return info;
}

3.3 递归约束模式

树形结构约束示例：

interface TreeNode<T> {value: T;children?: TreeNode<T>[];
}function traverse<T extends TreeNode<any>>(node: T): void {console.log(node.value);node.children?.forEach(traverse);
}

四、条件类型：类型逻辑的核心引擎

4.1 基础条件类型

类型过滤示例：

type FilterNumber<T> = T extends number ? T : never;type Numbers = FilterNumber<string | number | boolean>; // number

4.2 分布式条件类型

分布式特性演示：

type ToArray<T> = T extends any ? T[] : never;type StrOrNumArray = ToArray<string | number>; 
// string[] | number[]

禁用分布式特性：

type ToArrayNonDist<T> = [T] extends [any] ? T[] : never;type UnionArray = ToArrayNonDist<string | number>; 
// (string | number)[]

4.3 条件类型推断

类型解构示例：

type UnpackPromise<T> = T extends Promise<infer U> ? U : T;type A = UnpackPromise<Promise<string>>;    // string
type B = UnpackPromise<number>;            // number

递归解包实现：

type DeepUnpack<T> = T extends Promise<infer U> ? DeepUnpack<U> : T;type C = DeepUnpack<Promise<Promise<string>>>; // string

五、高级类型操作中的 `extends`

5.1 映射类型修饰

只读化转换：

type ReadonlyDeep<T> = {readonly [K in keyof T]: T[K] extends object ? ReadonlyDeep<T[K]> : T[K];
};interface Company {name: string;departments: {engineering: string[];sales: string[];};
}const readonlyCompany: ReadonlyDeep<Company> = {name: "Tech Corp",departments: {engineering: ["Alice", "Bob"],sales: ["Charlie"]}
};// readonlyCompany.departments.engineering.push("Dave"); // 错误

5.2 类型守卫强化

自定义类型守卫：

function isStringArray(arr: any[]): arr is string[] {return arr.every(item => typeof item === "string");
}function processArray<T extends any[]>(arr: T): T extends string[] ? string : never {return isStringArray(arr) ? arr.join(", ") : undefined!;
}

5.3 模板字面量类型

路径参数匹配：

type ExtractParams<Path extends string> = Path extends `${string}:${infer Param}/${infer Rest}`? Param | ExtractParams<Rest>: Path extends `${string}:${infer Param}`? Param: never;type Params = ExtractParams<"/user/:id/posts/:postId">; // "id" | "postId"

六、`extends` 的边界与陷阱

6.1 条件类型中的类型收窄

常见误区示例：

type MyExclude<T, U> = T extends U ? never : T;// 正确使用
type T1 = MyExclude<"a" | "b" | "c", "a">; // "b" | "c"// 错误预期
type T2 = MyExclude<string | number, number>; // string

分布式特性导致的意外结果：

type Foo<T> = T extends any ? T[] : never;
type Bar = Foo<string | number>; // string[] | number[]

6.2 泛型约束的过度限制

不合理的约束示例：

interface Animal {name: string;
}interface Dog extends Animal {breed: string;
}function badExample<T extends Animal>(arg: T) {// 错误：不能访问子类特有属性console.log(arg.breed); 
}

正确解决方案：

function goodExample<T extends Dog>(arg: T) {console.log(arg.breed); // 正确
}

6.3 循环引用问题

危险的结构定义：

interface TreeNode<T extends TreeNode<any>> {value: number;children: T[];
}// 会导致无限递归类型检查

安全的重构方案：

interface BaseNode {value: number;
}interface TreeNode extends BaseNode {children: TreeNode[];
}

九、综合应用：构建类型安全框架

9.1 请求处理管道

类型约束的中间件系统：

type Middleware<T extends Context> = (context: T,next: () => Promise<void>
) => Promise<void>;class Context {// 基础上下文定义
}class AuthContext extends Context {user: User;
}const authMiddleware: Middleware<AuthContext> = async (ctx, next) => {// 身份验证逻辑await next();
};