13. 什么是 extends?
目录一、 第一层三重身份定性回答二、 第二层三大应用场景展现技术深度1. 继承Inheritance2. 泛型约束Generic Constraints3. 条件类型Conditional Types—— 进阶必杀技三、 第三层进阶理解面试加分点四、 面试简答模板回答思路简答模板 核心示例演示回答extends是衡量一个 TypeScript 开发者从“使用者”迈向“架构师”的重要标准。因为它在 TS 中承担了三种完全不同但又相互关联的角色。以下是为你准备的深度解析和面试答题模板一、 第一层三重身份定性回答“extends在 TypeScript 中不是一个单一的操作符它在不同的语境下扮演着三个核心角色面向对象层面的“继承”用于类Class和接口Interface的扩展。泛型层面的“约束Constraint”用于限制泛型可以接受的类型范围。类型逻辑层面的“条件判断Conditional Types”用于在类型空间实现类似if-else的逻辑判断。”二、 第二层三大应用场景展现技术深度1. 继承Inheritance这是最基础的用法。接口继承interface Admin extends User {}。核心意义建立类型的层级关系实现属性复用。TS 采用的是结构化类型系统子类接口必须包含父类接口的所有属性。2. 泛型约束Generic Constraints这是编写通用高阶组件或库时最常用的功能。示例T extends string(args: T)。精彩阐述这里的extends不是继承而是**“兼容于”** 。它告诉编译器‘T不可以是任何类型它必须至少满足后面这个类型的结构’。这让开发者既保留了泛型的灵活性又避免了访问非法属性导致的错误。3. 条件类型Conditional Types—— 进阶必杀技这是 TS 类型体操Type Gymnastics的基石。语法T extends U ? X : Y。精彩阐述它就像类型空间的三元表达式。如果T可以分配给U则返回X否则返回Y。加分点分布式条件类型如果T是一个联合类型Unionextends会触发分发特性自动拆解联合类型进行逐一判断再合并结果。三、 第三层进阶理解面试加分点“收窄”而非“扩大”在泛型约束中extends实际上是在限制收窄类型的范围而不是像类继承那样看起来在“扩大”功能。与infer配合在条件类型中我们经常在extends后面使用infer关键字来提取类型的局部信息如提取 Promise 的返回类型。四、 面试简答模板面试官请谈谈你对 TypeScript 中 extends 关键字的理解回答模板“extends是 TypeScript 中功能最丰富的关键字之一它可以从三个层次来理解首先是基础的继承。它通过扩展接口或类实现了代码的复用和类型层级的构建。其次是泛型约束。这是我平时编写通用工具函数最常用的特性。通过T extends U我可以要求泛型必须符合某种特定的形状。比如在操作 DOM 时约束泛型必须extends HTMLElement从而确保代码在访问style或id属性时是类型安全的。最核心的进阶用法是条件类型Conditional Types。它让 TS 具备了在编译期进行‘逻辑运算’的能力。我们可以根据一个类型是否满足某个条件动态地推导出另一个类型。库开发者经常利用这个特性配合infer关键字来编写高度灵活的工具类型比如ReturnType或Pick。总之extends实现了从静态属性描述到动态类型编程的跨越。理解了它才算真正掌握了 TypeScript 的精髓。”回答思路接口继承类继承泛型约束条件类型判断简答模板extends在 TypeScript 里有多种用途可以表示类继承类、接口继承接口也常用于泛型约束比如限制泛型必须满足某种结构还可以用于条件类型中表示类型是否满足某个条件。 核心示例演示// 1. 泛型约束约束 T 必须有 length 属性 function logLengthT extends { length: number }(arg: T) { console.log(arg.length); } // 2. 条件类型判断是否为字符串 type IsStringT T extends string ? Yes : No; type A IsStringstring; // Yes type B IsStringnumber; // No // 3. 分布式特性加分点 type ToArrayT T extends any ? T[] : never; type StrOrNumArray ToArraystring | number; // string[] | number[]