讲师中心 微信公众号
AI工具推荐 视频效率加速

掌握 TypeScript:了解扩展的力量

阿萱小哥_2679

阿萱小哥_2679

发布时间:2024-09-22 08:03:16

|

1013人浏览过

|

来源于dev.to

转载

掌握 typescript:了解扩展的力量

typescript 中的 extends 关键字就像一把瑞士军刀。它可用于多种上下文,包括继承、泛型和条件类型。了解如何有效地使用扩展可以生成更健壮、可重用且类型安全的代码。

使用扩展进行继承

extends 的主要用途之一是继承,允许您创建基于现有接口或类的新接口或类。

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"
};

在此示例中,staffuser 扩展了 user,继承了其所有属性并添加了新属性。这使我们能够基于更通用的类型创建更具体的类型。

类继承

extends 关键字也用于类继承:

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!

这里,dog 扩展了 animal,继承了它的属性和方法,同时还添加了它自己的属性和方法。

泛型中的类型约束

extends 关键字在使用泛型时至关重要,它允许我们限制可与泛型函数或类一起使用的类型。

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
  1. 接口printable:这里,我们定义了一个名为printable的接口。该接口声明了任何实现它的类都必须遵守的契约。契约规定任何实现 printable 的类必须提供一个名为 print 的方法,该方法不带参数并返回 void
  2. function printobject(obj: t):这是一个名为 printobject 的通用函数。它采用名为 obj 的单个参数,该参数为 t 类型。类型参数 t 被限制为扩展(实现)printable 接口的类型,可以用作此函数的参数。
  3. book 类实现 printable,magazine 类实现 printable:这里,我们定义两个类,book 和 magazine,它们都实现 printable 接口。这意味着这些类必须根据 printable 接口的约定提供打印方法。
  4. const mybook = new book(); const mymagazine = new magazine();:我们创建 book 和 magazine 类的实例。
  5. 打印对象(mybook); and printobject(mymagazine);:我们用 book 和 magazine 的实例调用 printobject 函数。由于 book 和 magazine 类都实现了 printable 接口,因此它们满足 t extends printable 类型参数的约束。在函数内部,调用相应类的 print 方法,从而产生预期的输出。
  6. // printobject(42);:如果我们尝试使用未实现 printable 接口的类型(例如数字 42)调用 printobject,typescript 将引发错误。这是因为不满足类型约束,因为 number 没有 printable 接口所要求的打印方法。

总之,函数 printobject(obj: t) 上下文中的 extends 关键字用于确保用作参数的类型 t 遵守 printable 接口定义的约定。这确保只有具有 print 方法的类型才能与 printobject 函数一起使用,从而强制执行函数使用的特定行为和契约。

条件类型

t extends u ? x : y
  • t 是正在检查的类型
  • u 是 t 正在检查的条件类型。
  • 如果 t 扩展(可分配给)u,则 x 是条件类型求值的类型
  • y 是 t 不扩展 u 时条件类型求值的类型
type extractnumber<t> = t extends number ? t : never;

type numberornever = extractnumber<number>; // number
type stringornever = extractnumber<string>; // never

这里,extractnumber 类型采用类型参数 t。条件类型检查 t 是否扩展了数字类型。如果是,则类型解析为 t(这是数字类型)。如果不存在,则类型解析为 never。

具有联合类型的 extends 关键字

现在,让我们考虑表达式 a |乙| c 扩展了 a。乍一看这似乎违反直觉,但在 typescript 中,这个条件实际上是错误的。原因如下:

  1. 在 typescript 中,当您在左侧使用带有联合类型的 extends 时,相当于问:“这个联合中的每个可能的类型都可以分配给右侧的类型吗?”
  2. 换句话说,a |乙| c 扩展 a 正在询问:“可以将 a 分配给 a,并且可以将 b 分配给 a,并且可以将 c 分配给 a?”
  3. 虽然 a 当然可以分配给 a,但 b 和 c 可能无法分配给 a(除非它们是 a 的子类型),因此总体结果为 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

在此示例中,iscitrus 为 false,因为并非 fruit union 中的所有水果都是 citrusfruit。

最佳实践和技巧

  • 使用扩展来建立有意义的关系:仅当类型之间存在明确的“is-a”关系时才使用继承。
  • 优先选择组合而不是继承:在许多情况下,组合(使用接口和类型交集)比类继承更灵活。
  • 谨慎使用深层继承链:深层继承会使代码更难理解和维护。
  • 利用条件类型实现灵活的 api:使用带有扩展的条件类型来创建根据输入类型进行调整的 api。
  • 在泛型中使用扩展来创建可重用、类型安全的函数:这允许您编写适用于各种类型的函数,同时仍保持类型安全

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

312

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

520

2026.02.25

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

391

2026.03.13

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

306

2026.06.03

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

698

2026.06.16

python中print函数的用法
python中print函数的用法

python中print函数的语法是“print(value1, value2, ..., sep=' ', end=' ', file=sys.stdout, flush=False)”。本专题为大家提供print相关的文章、下载、课程内容,供大家免费下载体验。

3200

2023.09.27

python print用法与作用
python print用法与作用

本专题整合了python print的用法、作用、函数功能相关内容,阅读专题下面的文章了解更多详细教程。

269

2026.02.03

python中print函数的用法
python中print函数的用法

python中print函数的语法是“print(value1, value2, ..., sep=' ', end=' ', file=sys.stdout, flush=False)”。本专题为大家提供print相关的文章、下载、课程内容,供大家免费下载体验。

3200

2023.09.27

Uvicorn 报错与问题解决教程
Uvicorn 报错与问题解决教程

本专题汇总了Uvicorn服务器常见问题与报错解决的教程合集,涵盖启动失败、端口占用、模块导入错误、事件循环冲突及热重载失效等典型故障的排查思路。同时整理了多进程与Worker配置、SSL/HTTPS证书报错、跨域与代理配置等实战解决方案,助你快速定位并解决Uvicorn运行中的各类问题。

0

2026.11.02

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn