」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 掌握 TypeScript:了解擴充的力量

掌握 TypeScript:了解擴充的力量

發佈於2024-11-06
瀏覽:711

Mastering TypeScript: Understanding the Power of extends

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: "[email protected]"
};

const staffMember: StaffUser = {
  firstName: "Jane",
  lastName: "Smith",
  email: "[email protected]",
  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(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 extends number ? T : never;

type NumberOrNever = ExtractNumber; // number
type StringOrNever = ExtractNumber; // 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 extends CitrusFruit ? true : false;

type Test1 = IsCitrus; // true
type Test2 = IsCitrus; // false
type Test3 = IsCitrus; // false

在此示例中,IsCitrus 为 false,因为 Fruit 联合中并非所有水果都是 CitrusFruit。

最佳实践和技巧

  • 使用扩展来建立有意义的关系:仅当类型之间存在明确的“is-a”关系时才使用继承。
  • 优先选择组合而不是继承:在许多情况下,组合(使用接口和类型交集)比类继承更灵活。
  • 谨慎对待深层继承链:深层继承会使代码更难理解和维护。
  • 利用条件类型实现灵活的 API:使用带有扩展的条件类型来创建根据输入类型进行调整的 API。
  • 在泛型中使用扩展来创建可重用的、类型安全的函数:这允许您编写适用于各种类型的函数,同时仍然保持类型安全
版本聲明 本文轉載於:https://dev.to/hasanm95/mastering-typescript-understanding-the-power-of-extends-1n2o?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何使用 Laravel Eloquent 的 firstOrNew() 方法有效最佳化 CRUD 操作?
    如何使用 Laravel Eloquent 的 firstOrNew() 方法有效最佳化 CRUD 操作?
    使用 Laravel Eloquent 優化 CRUD 操作在 Laravel 中使用資料庫時,插入或更新記錄是很常見的。為了實現這一點,開發人員經常求助於條件語句,在決定執行插入或更新之前檢查記錄是否存在。 firstOrNew() 方法幸運的是, Eloquent 透過firstOrNew() ...
    程式設計 發佈於2024-11-06
  • 為什麼在 PHP 中重寫方法參數違反了嚴格的標準?
    為什麼在 PHP 中重寫方法參數違反了嚴格的標準?
    在PHP 中重寫方法參數:違反嚴格標準在物件導向程式設計中,里氏替換原則(LSP) 規定:子類型的物件可以替換其父對象,而不改變程式的行為。然而,在 PHP 中,用不同的參數簽名覆蓋方法被認為是違反嚴格標準的。 為什麼這是違規? PHP 是弱型別語言,這表示編譯器無法在編譯時確定變數的確切型別。這表...
    程式設計 發佈於2024-11-06
  • 哪個 PHP 函式庫提供卓越的 SQL 注入防護:PDO 還是 mysql_real_escape_string?
    哪個 PHP 函式庫提供卓越的 SQL 注入防護:PDO 還是 mysql_real_escape_string?
    PDO vs. mysql_real_escape_string:綜合指南查詢轉義對於防止 SQL 注入至關重要。雖然 mysql_real_escape_string 提供了轉義查詢的基本方法,但 PDO 成為了一種具有眾多優點的卓越解決方案。 什麼是 PDO? PHP 資料物件 (PDO) 是一...
    程式設計 發佈於2024-11-06
  • React 入門:初學者的路線圖
    React 入門:初學者的路線圖
    大家好! ? 我剛開始學習 React.js 的旅程。這是一次令人興奮(有時甚至具有挑戰性!)的冒險,我想分享一下幫助我開始的步驟,以防您也開始研究 React。這是我的處理方法: 1.掌握 JavaScript 基礎 在開始使用 React 之前,我確保溫習一下我的 JavaScript 技能,...
    程式設計 發佈於2024-11-06
  • 如何引用 JavaScript 物件中的內部值?
    如何引用 JavaScript 物件中的內部值?
    如何在JavaScript 物件中引用內部值在JavaScript 中,存取引用同一物件中其他值的物件中的值有時可能具有挑戰性。考慮以下程式碼片段:var obj = { key1: "it ", key2: key1 " works!" }; a...
    程式設計 發佈於2024-11-06
  • Python 列表方法快速指南及範例
    Python 列表方法快速指南及範例
    介紹 Python 清單用途廣泛,並附帶各種內建方法,有助於有效地操作和處理資料。以下是所有主要清單方法的快速參考以及簡短的範例。 1. 追加(項目) 將項目新增至清單末端。 lst = [1, 2, 3] lst.append(4) # [1, 2, 3, ...
    程式設計 發佈於2024-11-06
  • C++ 中何時需要使用者定義的複製建構函式?
    C++ 中何時需要使用者定義的複製建構函式?
    何時需要使用者定義的複製建構子? 複製建構子是 C 物件導向程式設計的組成部分,提供了一種基於現有實例初始化物件的方法。雖然編譯器通常會為類別產生預設的複製建構函數,但在某些情況下需要進行自訂。 需要使用者定義複製建構子的情況當預設複製建構子不夠時,程式設計師會選擇使用者定義的複製建構子來實作自訂複...
    程式設計 發佈於2024-11-06
  • 試...捕捉 V/s 安全分配 (?=):現代發展的福音還是詛咒?
    試...捕捉 V/s 安全分配 (?=):現代發展的福音還是詛咒?
    最近,我發現了 JavaScript 中引入的新安全賦值運算子 (?.=),我對它的簡單性著迷。 ? 安全賦值運算子 (SAO) 是傳統 try...catch 區塊的簡寫替代方案。它允許您內聯捕獲錯誤,而無需為每個操作編寫明確的錯誤處理程式碼。這是一個例子: const [error, resp...
    程式設計 發佈於2024-11-06
  • 如何在Python中優化固定寬度檔案解析?
    如何在Python中優化固定寬度檔案解析?
    優化固定寬度文件解析為了有效地解析固定寬度文件,可以考慮利用Python的struct模組。此方法利用 C 來提高速度,如下例所示:import struct fieldwidths = (2, -10, 24) fmtstring = ' '.join('{}{}'.format(abs(fw),...
    程式設計 發佈於2024-11-06
  • 蠅量級
    蠅量級
    結構模式之一旨在透過與相似物件共享盡可能多的資料來減少記憶體使用。 在處理大量相似物件時特別有用,為每個物件建立一個新實例在記憶體消耗方面會非常昂貴。 關鍵概念: 內在狀態:多個物件之間共享的狀態獨立於上下文,並且在不同物件之間保持相同。 外部狀態:每個物件唯一的、從客戶端傳遞的狀態。此狀態可...
    程式設計 發佈於2024-11-06
  • 解鎖您的 MySQL 掌握:MySQL 實作實驗室課程
    解鎖您的 MySQL 掌握:MySQL 實作實驗室課程
    透過全面的 MySQL 實作實驗室課程提升您的 MySQL 技能並成為資料庫專家。這種實踐學習體驗旨在引導您完成一系列實踐練習,使您能夠克服複雜的 SQL 挑戰並優化資料庫效能。 深入了解 MySQL 無論您是想要建立強大 MySQL 基礎的初學者,還是想要提升專業知識的經驗豐富的...
    程式設計 發佈於2024-11-06
  • 資料夾
    資料夾
    ? ?大家好,我是尼克? ? 利用專家工程解決方案提升您的專案 探索我的產品組合,了解我如何將尖端技術、強大的問題解決能力和創新熱情結合起來,建立可擴展的高效能應用程式。無論您是尋求增強開發流程還是解決複雜的技術挑戰,我都可以幫助您實現願景。看看我的工作,讓我們合作做一些非凡的事情! 在這裡聯絡...
    程式設計 發佈於2024-11-06
  • 透過 Gmail 發送電子郵件時如何修復「SMTP Connect() 失敗」錯誤?
    透過 Gmail 發送電子郵件時如何修復「SMTP Connect() 失敗」錯誤?
    SMTP 連線失敗:解決「SMTP Connect() 失敗」錯誤嘗試使用Gmail 發送電子郵件時,您可能會遇到錯誤訊息指出「SMTP -> 錯誤:無法連線到伺服器:連線逾時(110)\nSMTP Connect()失敗。 要解決此問題,您需要修改負責發送電子郵件的 PHP 程式碼。具體來說,刪除...
    程式設計 發佈於2024-11-06
  • 如何使用 Pillow 在 Python 中水平連接多個映像?
    如何使用 Pillow 在 Python 中水平連接多個映像?
    以Python水平連接影像水平組合多個影像是影像處理中的常見任務。 Python 提供了強大的工具來使用 Pillow 函式庫來實現此目的。 問題描述考慮三個尺寸為 148 x 95 的方形 JPEG 影像。目標是水平連接這些影像影像,同時避免結果輸出中出現任何部分影像。 建議的解決方案以下程式碼片...
    程式設計 發佈於2024-11-06

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3