The extends keyword in TypeScript is a Swiss Army knife of sorts. It's used in multiple contexts, including inheritance, generics, and conditional types. Understanding how to use extends effectively can lead to more robust, reusable, and type-safe code.
Inheritance using extends
One of the primary uses of extends is in inheritance, allowing you to create new interfaces or classes that build upon existing ones.
interface User { firstName: string; lastName: string; email: string; } interface StaffUser extends User { roles: string[]; department: string; } const regularUser: User = { firstName: "John", lastName: "Doe", email: "john@example.com" }; const staffMember: StaffUser = { firstName: "Jane", lastName: "Smith", email: "jane@company.com", roles: ["Manager", "Developer"], department: "Engineering" };
In this example, StaffUser extends User, inheriting all its properties and adding new ones. This allows us to create more specific types based on more general ones.
Class Inheritance
The extends keyword is also used for class inheritance:
class Animal { constructor(public name: string) {} makeSound(): void { console.log("Some generic animal sound"); } } class Dog extends Animal { constructor(name: string, public breed: string) { super(name); } makeSound(): void { console.log("Woof! Woof!"); } fetch(): void { console.log(`${this.name} is fetching the ball!`); } } const myDog = new Dog("Buddy", "Golden Retriever"); myDog.makeSound(); // Output: Woof! Woof! myDog.fetch(); // Output: Buddy is fetching the ball!
Here, Dog extends Animal, inheriting its properties and methods, and also adding its own.
Type Constraints in Generics
The extends keyword is crucial when working with generics, allowing us to constrain the types that can be used with a generic function or class.
interface Printable { print(): void; } function printObject<T extends Printable>(obj: T) { obj.print(); } class Book implements Printable { print() { console.log("Printing a book."); } } class Magazine implements Printable { print() { console.log("Printing a magazine."); } } const myBook = new Book(); const myMagazine = new Magazine(); printObject(myBook); // Output: Printing a book. printObject(myMagazine); // Output: Printing a magazine. // printObject(42); // Error, number doesn't have a 'print' method
- interface Printable: Here, we define an interface named Printable. This interface declares a contract that any class implementing it must adhere to. Tha contract specifies that any class implementing Printable must provide a method named print that takes no arguments and returns void
-
function printObject
(obj: T): This is a generic function named printObject. It takes a single argument named obj, which is type T. The type parameter T is constrained to types that extend (implement) the Printable interface can bef used as the argument to this function. - class Book implements Printable and class Magazine implements Printable: Here, we define two classes, Book and Magazine, both of which implement the Printable interface. This means that these classes must provide a print method as required by the contract of the Printable interface.
- const myBook = new Book(); and const myMagazine = new Magazine();: We create instances of the Book and Magazine classes.
- printObject(myBook); and printObject(myMagazine);: We call the printObject function with the instances of Book and Magazine. Since both Book and Magazine classes implement the Printable interface, they fulfill the constraint of the T extends Printable type parameter. Inside the function, the print method of the appropriate class is called, resulting in the expected output.
- // printObject(42);: If we try to call printObject with a type that doesn't implement the Printable interface, such as the number 42, TypeScript will raise an error. This is because the type constraint is not satisfied, as number doesn't have a print method as required by the Printable interface.
In summary, the extends keyword in the context of function printObject
Conditional Types
T extends U ? X : Y
- T is the type that being checked
- U is the condition type that T is being checked against.
- X is the type that the conditional type evaluates to if T extends (is assignable to) U
- Y is the type that the conditional type evaluates to if T does not extend U
type ExtractNumber<T> = T extends number ? T : never; type NumberOrNever = ExtractNumber<number>; // number type StringOrNever = ExtractNumber<string>; // never
Here, the ExtractNumber type takes a type parameter T. The conditional type checks whether T extends the number type. if does, the type resolves to T (which is number type). If it doesn't, the type resolves to never.
The extends Keyword with Union Types
Now, let's consider the expression A | B | C extends A. This might seem counterintuitive at first, but in TypeScript, this condition is actually false. Here's why:
- In TypeScript, when you use extends with a union type on the left side, it's equivalent to asking: "Is every possible type in this union assignable to the type on the right?"
- In other words, A | B | C extends A is asking: "Can A be assigned to A, AND can B be assigned to A, AND can C be assigned to A?"
- While A can certainly be assigned to A, B and C might not be assignable to A (unless they are subtypes of A), so the overall result is false.
type Fruit = "apple" | "banana" | "cherry"; type CitrusFruit = "lemon" | "orange"; type IsCitrus<T> = T extends CitrusFruit ? true : false; type Test1 = IsCitrus<"lemon">; // true type Test2 = IsCitrus<"apple">; // false type Test3 = IsCitrus<Fruit>; // false
In this example, IsCitrus
Best Practices and Tips
- Use extends for meaningful relationships: Only use inheritance when there's a clear "is-a" relationship between types.
- Prefer composition over inheritance: In many cases, composition (using interfaces and type intersections) can be more flexible than class inheritance.
- Be cautious with deep inheritance chains: Deep inheritance can make code harder to understand and maintain.
- Leverage conditional types for flexible APIs: Use conditional types with extends to create APIs that adapt based on input types.
- Use extends in generics to create reusable, type-safe functions: This allows you to write functions that work with a variety of types while still maintaining type safety
以上是Mastering TypeScript: Understanding the Power of extends的详细内容。更多信息请关注PHP中文网其他相关文章!

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制:1.通过Node.js实现服务器端编程,适用于高并发请求处理。2.通过ReactNative进行移动应用开发,支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制,适用于硬件交互。

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序(一个Edtech应用程序),您可以做同样的事情。 首先,什么是多租户SaaS应用程序? 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

SublimeText3 Linux新版
SublimeText3 Linux最新版

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中