ts 終於搞懂TS中的泛型啦! | typescript 入門指南 04

来源:https://www.cnblogs.com/wangtianzhen/archive/2023/10/17/17769872.html
-Advertisement-
Play Games

大家好，我是王天~ 這篇文章是 ts入門指南系列中第四篇，主要講解ts中的泛型應用，泛型在ts中是比較重要的概念，我花挺長時間才搞明白的，希望能幫助到大家 ~ ** ts 入門指南系列 ** Ts和Js 誰更適合前端開發？| typescript 入門指南 01 詳解tsconfig.json 配置 ...


大家好，我是王天~

這篇文章是 ts入門指南系列中第四篇，主要講解ts中的泛型應用，泛型在ts中是比較重要的概念，我花挺長時間才搞明白的，希望能幫助到大家 ~

** ts 入門指南系列 **

  1. Ts和Js 誰更適合前端開發？| typescript 入門指南 01
  2. 詳解tsconfig.json 配置文件 | 02 ts入門指南
  3. ts基礎使用-語法類型 | typescript入門指南 03

1. 前言

我們可以把泛型比喻為一個類型占位符，它告訴編譯器：“嘿，這裡有一個類型參數，我現在不確定具體是什麼類型，但稍後會告訴你。”

通過使用泛型，我們可以編寫更靈活、更可復用的代碼。它允許我們在定義函數、類或介面時使用類型占位符來表示類型，而不直接指定具體的類型。這樣，在實際使用時，我們可以傳入不同的類型參數，使得代碼可以適用於多種情況。

例如，讓我們看一個簡單的例子，來解釋泛型的使用。假設我們有一個名為 identity 的函數，它接受一個參數並返回該參數：

function identity<T>(value: T): T {
  return value;
}

來源於網路 圖片來源網路

在上述代碼中，<T> 表示這是一個泛型函數，T 是一個類型參數，可以是任何類型。函數的參數 arg 的類型為 T，返回值的類型也是 T。

這樣，我們可以在函數調用時傳入不同的類型參數，使得函數適用於各種類型的參數。

例如，我們可以這樣調用 identity 函數：

let result1 = identity<number>(42); // 傳入 number 類型
let result2 = identity<string>("Hello, TypeScript"); // 傳入 string 類型

在第一次調用時，類型參數 number 被傳遞給 identity 函數，所以返回值的類型也是 number。而在第二次調用時，類型參數 string 被傳遞給 identity 函數，所以返回值的類型是 string。

通過使用泛型，我們可以編寫出更加通用的函數，不限於特定的類型。這樣一來，我們能夠避免代碼的重覆編寫，提高代碼的可復用性和靈活性。

泛型主要用在四個場合：函數、介面、類和別名。

基本使用

泛型使用尖括弧 <T> 來表示，併在定義函數、類或介面時指定類型參數。下麵是一些基本的使用示例：

// 示例1: 創建一個泛型函數
function identity<T>(arg: T): T {
  return arg;
}

// 示例2: 使用泛型函數
let output = identity<string>("Hello");
console.log(output); // 輸出: Hello

// 示例3: 使用類型推斷，自動推斷泛型類型
let output2 = identity("Hello");
console.log(output2); // 輸出: Hello

在示例 1 中，函數 identity 使用了泛型類型參數 T，表示參數和返回值的類型可以是任何類型。示例 2 和示例 3 展示瞭如何使用泛型函數並指定參數的類型。
。

2. 使用泛型變數：

泛型變數允許我們在函數或類中使用一種不確定的類型，而在實際使用時才確定具體的類型。

舉個例子，考慮一個簡單的函數identity，它接受一個參數並返回相同的值：

function identity<T>(arg: T): T {
  return arg;
}

在這個例子中，我們使用了泛型變數T，它可以代表任意類型。當我們調用函數identity時，編譯器會根據傳入的參數類型自動推斷T的具體類型。

例如：

let result = identity<string>("Hello");
console.log(result); // 輸出：Hello

let value = identity<number>(42);
console.log(value); // 輸出：42

通過使用泛型變數，函數identity可以適用於不同類型的參數，提供了更高的靈活性和可重用性。

3. 泛型類型：

泛型類型允許我們創建可以適用於不同類型的變數、函數或類。

舉個例子，考慮一個簡單的數組反轉函數reverse：

function reverse<T>(array: T[]): T[] {
  return array.reverse();
}

在這個例子中，我們定義了一個泛型函數reverse，接受一個數組參數，並返回反轉後的數組。泛型類型T用於指定數組的元素類型。

例如：

let numbers: number[] = [1, 2, 3, 4, 5];
let reversedNumbers = reverse(numbers);
console.log(reversedNumbers); // 輸出：[5, 4, 3, 2, 1]

let strings: string[] = ["apple", "banana", "orange"];
let reversedStrings = reverse(strings);
console.log(reversedStrings); // 輸出：["orange", "banana", "apple"]

通過使用泛型類型，函數reverse可以適用於不同類型的數組，提供了更高的靈活性和可重用性。

4. 泛型類：

泛型類允許我們創建可以適用於多種類型的類。類中的成員可以使用泛型類型進行聲明和使用。

舉個例子，考慮一個簡單的Box類，用於存儲任意類型的值：

class Box<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

在這個例子中，我們定義了一個泛型類Box，它具有一個私有成員value和一個公共方法getValue用於獲取值。

例如：

let box1 = new Box<number>(42);
console.log(box1.getValue()); // 輸出：42

let box2 = new Box<string>("Hello");
console.log(box2.getValue()); // 輸出：Hello

過使用泛型參數<T>，可以在類的定義中引入類型變數來表示未知的類型。這樣一來，我們可以在類實例化時指定具體的類型，從而創建適用於不同類型數據的類的實例。

5. 泛型約束：

泛型約束允許我們限制泛型類型的範圍，使其滿足特定條件

5.1. 確保屬性存在

舉個例子，假設我們想編寫一個函數getLength，用於獲取對象的長度。但是並不是所有的對象都有length屬性，所以我們需要對泛型類型進行約束，確保它具有該屬性。

例如：

interface HasLength {
  length: number;
}

function getLength<T extends HasLength>(obj: T): number {
  return obj.length;
}

在這個例子中，我們使用泛型約束T extends HasLength來限制泛型類型T必須滿足HasLength介面的要求，即具有length屬性。

例如：

let str = "Hello";
console.log(getLength(str)); // 輸出：5

let arr = [1, 2, 3, 4, 5];
console.log(getLength(arr)); // 輸出：5

通過使用泛型約束，函數getLength可以接受具有length屬性的對象，並返回其長度。

5.2 檢查對象的 key

1、keyof typescript 中檢測類型的方法，以聯合類型的方式方返回類型的所有 key
2、搭配泛型約、<T,K extends keyof T >

refshttps://juejin.cn/post/6844904184894980104#heading-0
使用泛型，可以讓我們在編譯前發現錯誤。

6 泛型介面：

泛型介面允許我們定義可以適用於不同類型的介面。

舉個例子，考慮一個簡單的Transformer介面，它定義了一個將輸入值轉換為輸出值的轉換器：

interface Transformer<T, U> {
  transform(input: T): U;
}

在這個例子中，我們定義了一個泛型介面Transformer，它有兩個類型參數T和U，用於定義輸入類型和輸出類型。

例如，我們可以實現一個字元串到數字的轉換器：

class StringToNumberTransformer implements Transformer<string, number> {
  transform(input: string): number {
    return parseFloat(input);
  }
}

通過定義實現了Transformer介面的類，我們可以創建不同類型的轉換器。

例如：

let transformer = new StringToNumberTransformer();
let result = transformer.transform("3.14");
console.log(result); // 輸出：3.14

通過使用泛型介面，我們可以定義可重用、可靈活的介面，適用於不同類型的轉換操作。

介面搭配泛型，應用在 calss 類上

extend people 約束泛型類 在 people 介面範圍內
此時是 泛型變數占位符，在實例化 class 類是傳遞類型

interface people {
  name: string;
  age: number;
}

class Popele<T extends people> {
  data: T;
  constructor(data: T) {
    this.data = data;
  }
  hi() {
    return `${this.data.name},,${this.data.age}`;
  }
}

let zhagnsan = new Popele<people>({ name: "張三", age: 18 });

總結

泛型在 TypeScript 中提供了更靈活、可重用的代碼編寫方式。它可以用於定義函數、類以及介面，讓我們能夠編寫適用於不同類型的代碼。

讀者朋友好呀，我是王天~

嘗試做過很多事情，汽修專業肄業生，半路出道的野生程式員、前端講師、新手作者，最終還是喜歡寫代碼、樂於用文字記錄熱衷分享~

如文章有錯誤或者不嚴謹的地方，期待給於指正，萬分感謝。

如果喜歡或者 有所啟發，歡迎 star，對作者也是一種鼓勵。

微信：「wangtian3111」，加我進王天唯一的讀者群。

個人博客：https://itwangtian.com

95後、自學編程工作3年、向上生長
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 測試計劃實例：Yocto測試計劃
    在Linux系統中，測試硬碟的性能一般使用fio工具實現，fio是Flexible I/O Tester的縮寫。是一個常受歡迎的、用於測試存儲性能的工具，而且還可以模擬多種不同的I/O模式和工作負載。 一般我們要測試一塊硬碟的性能，一般需要進行隨機寫入測試、隨機讀取測試、順序寫入測試、順序讀取測試和 ...
  • 輕鬆掌握組件啟動之MongoDB（下）：高可用複製集架構環境搭建
    本章介紹了MongoDB複製集的配置和使用方法，如何初始化和添加節點到複製集，驗證主節點的寫入和從節點的讀取功能。瞭解如何查詢複製集的狀態，包括成員的健康狀況、同步信息和角色等。最後，我們介紹瞭如何配置複製集的安全認證，包括創建用戶和生成keyFile文件，並演示了使用認證信息連接複製集的方式。通過... ...
  • 淺談分散式事務及解決方案
    1 背景 在講述分散式事務的概念之前，我們先來回顧下事務相關的一些概念。 1.1 事務的基本概念 就是一個程式執行單元，裡面的操作要麼全部執行成功，要麼全部執行失敗，不允許只成功一半另外一半執行失敗的事情發生。例如一段事務代碼做了兩次資料庫更新操作，那麼這兩次資料庫操作要麼全部執行成功，要麼全部回滾 ...
  • 如何使用GaussDB(DWS)的本地臨時表進行數據處理
    GaussDB(DWS) 從8.2.1版本後支持三種形式的臨時表：本地臨時表、Volatile臨時表、全局臨時表。本地臨時表特點：表定義和數據都是會話相關，其他會話看不到本會話創建的本地臨時表。 ...
  • sys用戶在sys.user$中的一些特殊現象淺析
    在Oracle資料庫中，一般我們使用sys.user或dba_users去監控/檢查用戶密碼是否快過期，另外，它還能監控新用戶的創建時間、賬號密碼過期、賬號修改時間等，dba_user其實是一個系統視圖，它的數據來源於sys.user$等基礎表。dba_user的定義如下所示： CREATE FOR ...
  • MySQL的InnoDB引擎的事務
    康師傅YYDS MySQL中只有InnoDB支持事務 1 SHOW ENGINES; 事務基礎知識 事務的ACID特性 原子性（atomicity）： 原子性是指事務是一個不可分割的工作單位，要麼全部提交，要麼全部失敗回滾。 一致性（consistency）： 根據定義，一致性是指事務執行前後，數據 ...
  • 記一次MySQL5初始化被kill的問題排查
    由於測試環境JED申請比較繁瑣，所以Eone提供了單機版Mysql供用戶使用，近期Eone搭建Mysql5的時候發現莫名被kill了，容器規格是4C8G，磁碟30G。這不科學，之前都是可以的，鏡像沒變，配置沒變，咋就不行了呢，一定不是我的問題，是機器的問題 ...
  • 記錄--怎麼寫一個可以滑鼠控制旋轉的div？
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 說在前面 滑鼠控制元素旋轉在現在也是一個很常見的功能，讓我們從實現div元素的旋轉控制開始來瞭解元素旋轉的具體原理和實現方法吧。 效果展示 體驗地址 code.juejin.cn/pen/7290719… 實現步驟 畫一個div 首先我們 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類