vue3第三十五節(TS 之 泛型)

本節介紹 ts 中泛型的常用情景

1 什么是泛型

泛型的本質是參數化類型,也就是說所操作的數據類型被指定為一個參數。這種參數類型可以用在類、接口和方法的創建中,分別稱為泛型類泛型接口泛型方法

泛型使用<T>來定義類型,<T>中的T,也可以是U也可以是其他合法的字母,建議大寫。
泛型可以理解為不確定單獨類型,函數中使用泛型,可以約束函數的參數和返回值類型相同。

2 泛型方法

比如我們定義一個 sum 方法

function sum(a:number): number {return a + a
}

這種定義的方法,我們傳入的參數 a以及函數返回的數據 只能是 number 類型,不能是其他類型數據,否則會報錯;但是我們通常需要的類型會很多,這時我們可以定義一個類似通用的函數;
可能有同學會說我們可以定義一個any 類型的呀,但是這樣就違背我們使用ts的初衷了,
那么我們可以這樣寫
T:表示類型變量,而這個變量只能是 類型,而不是值

function sum<T>(a:T):T{return a +a
}

那么我們在使用的時候可以這樣寫

const a = sum<string>('2') 
// 4 指定泛型此時的類型是 string,則傳入的值也必須是String類型
const b = sum<number>(4) 
// 8 指定泛型此時 的類型是 number,則傳入的值,以及返回的值均為 Number 類型數據

3 傳入多個泛型

const fun = <T,U>(a:T, b:U) => {console.log(a, b)
}

此時的 a,b可以是不同的類型,也可以是相同的類型
使用

fun<string, number>('1', 2) // '1', 2傳入的是a參數約定是 String類型b參數約定是 number 類型

4 常用的泛型名稱

TType的縮寫,類型
K、Vkey和value的縮寫,鍵值對
EElement的縮寫,元素
OObject的縮寫,對象

5 泛型接口

一般的函數接口我們這樣定義

interface Person {(value1: string, value2: string): string;
}

當我們定義泛型函數接口時候可以這樣寫

interface Person<T> {(value: T): T;
}

或者

interface Person {<T>(value: T): T;
}

// 使用泛型 約定為 string類型

let nam: Person<string> = 'Andy'

定義一般泛型接口
還可以指定默認的類型

interface Person<T=string, U=number>{age: T;name: U;
}

6 泛型約束

比如我們想要傳入的參數中有必須有某種類型

interface Say {length: number;
}
function Person<T extends Say>(arg: T) {console.log(arg.length);// 此時arg參數中必須含有 length屬性,并且屬性的類型是 number,否則就會報錯
}
T extends表示傳入的類型必須是extends后面的類型或者子類型。

例如:

Person({length:10, name: 'Andy'}) // 傳入一個含有length 屬性的數據
Person([1,2,3,4,5,6,7,8,9]) // 數組類型默認含有 length 屬性
Person('123444') // String 類型數據自帶 length 屬性

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/18125.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/18125.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/18125.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

使用canarytokens進行入侵檢測

canarytokens 基本概念 canarytokens是一種用于識別網絡入侵的工具。它們是一種虛擬的“蜜罐”&#xff0c;可以在網絡上放置&#xff0c;當有人嘗試訪問它們時&#xff0c;可以立即觸發警報&#xff0c;以便及時發現潛在的安全威脅。這些token可以是各種形式&#xff0c;可以…

項目管理基礎知識

項目管理基礎知識 導航 文章目錄 項目管理基礎知識導航一、項目相關概念二、時間管理三、人員管理四、風險管理 一、項目相關概念 項目定義的三層意思 一定的資源約束:時間資源、經費資源、人力資源一定的目標一次性任務 里程碑 是項目中的重要時點或事件持續時間為零&…

深度神經網絡——什么是遷移學習?

1.概述 在練習機器學習時&#xff0c;訓練模型可能需要很長時間。從頭開始創建模型架構、訓練模型&#xff0c;然后調整模型需要大量的時間和精力。訓練機器學習模型的一種更有效的方法是使用已經定義的架構&#xff0c;可能具有已經計算出的權重。這是背后的主要思想 遷移學習…

makefile一些特殊且常用的符號

$^&#xff1a;表示所有的依賴文件列表&#xff0c;多個文件以空格分隔。 $&#xff1a;表示目標文件的名稱。 $<&#xff1a;表示第一個依賴文件的名稱。 $*&#xff1a;表示目標文件的主文件名&#xff08;不包括擴展名&#xff09;。 $?&#xff1a;表示所有比目標文件更…

前端面試題日常練-day26 【面試題】

題目 希望這些選擇題能夠幫助您進行前端面試的準備&#xff0c;答案在文末。 1. Vue中&#xff0c;以下哪個選項可以用于在組件之間傳遞數據&#xff1f; a) props b) emit c) model d) data 2. 在Vue中&#xff0c;以下哪個指令可以用于條件性地渲染一個元素&#xff1f; …

【Python設計模式10】外觀模式

外觀模式&#xff08;Facade Pattern&#xff09;是一種結構型設計模式&#xff0c;它通過提供一個統一的接口&#xff0c;來簡化客戶端與復雜系統之間的交互。外觀模式為子系統中的一組接口提供一個高層接口&#xff0c;使得子系統更容易使用。 外觀模式的結構 外觀模式主要…

【學習心得】超簡單的加載模型和保存模型的方法

方法一&#xff1a;pickle庫 這是Python的標準序列化模塊&#xff0c;可以將幾乎任何Python對象轉化為字節流&#xff08;即序列化&#xff09;&#xff0c;然后可以將其存儲到文件中或通過網絡發送。之后&#xff0c;可以使用pickle再次加載這個字節流&#xff0c;恢復原始對象…

Linux shell命令

cat 文件名 查看文件內容&#xff0c; tac文件名 倒著顯示。 more 文件名 顯示內容 less文件名 和more的功能一樣&#xff0c;按上下左右鍵&#xff0c;按Q鍵結束。 head文件名&#xff0c;只顯示前10行內容。 ln是一個默認創建硬鏈接的命令 ln 文件名 ls -i文件名…

全棧:Web 用戶登錄過程實例與Cookie管理

用戶創建與使用cookie全過程 1.用戶訪問網站 當用戶使用瀏覽器訪問一個網站時&#xff0c;瀏覽器會向服務器發送一個HTTP請求。 2. 服務器響應請求 服務器接收到HTTP請求后&#xff0c;會處理請求并準備響應。如果服務器需要設置Cookie&#xff0c;它會在HTTP響應頭中包含一…

SpringBoot整合RabbitMQ的快速使用教程

目錄 一、引入依賴 二、配置rabbitmq的連接信息等 1、生產者配置 2、消費者配置 三、設置消息轉換器 四、生產者代碼示例 1、配置交換機和隊列信息 2、生產消息代碼 五、消費者代碼示例 1、消費層代碼 2、業務層代碼 在分布式系統中&#xff0c;消息隊列是一種重要…

#職場發展#其他

一閃論文是目前市場上一款非常靠譜的論文寫作工具&#xff0c;不僅可以幫助用戶快速完成論文撰寫&#xff0c;還能對文章進行查重降重&#xff0c;確保內容原創性。從用戶的角度來看&#xff0c;一閃論文確實是一個非常方便、實用的工具&#xff0c;能夠大大提高寫作效率&#…

00Java準備工作

目錄 JDK的安裝目錄 JAVA環境變量的配置 JAVA小知識 JDK的安裝目錄 目錄名稱說明bin該路徑下存放了JDK的各種工具命令,javac和java就放在這個目錄conf該路徑下存放了JDK的相關配置文件include該路徑下存放了一些平臺特定的頭文件jmods該路徑下存放了JDK的各種模塊legal該路…

簡單隨機數據算法

文章目錄 一&#xff0c;需求概述二&#xff0c;實現代碼三、測試代碼四、測試結果五、源碼傳送六、效果演示 一&#xff0c;需求概述 系統啟動時&#xff0c;讀取一組圖片數據&#xff0c;通過接口返回給前臺&#xff0c;要求&#xff1a; 圖片隨機相鄰圖片不重復 二&#…

Java數據結構與算法(散列表)

前言 散列表是根據關鍵碼值(Key value)而直接進行訪問的數據結構。也就是說&#xff0c;它通過把關鍵碼值映射到表中一個位置來訪問記錄&#xff0c;以加快查找的速度。而key的沖突主要通過鏈表的方式來處理&#xff0c;后期鏈表過長情況下可以通過紅黑樹來優化查詢效率。 實…

進程互斥經典問題(讀寫者問題、理發店問題)

目錄 讀寫者問題 問題描述 問題分析 進程互斥問題三部曲 讀者寫者算法實現 一、找進程——確定進程關系 二、找主營業務 三、找同步約束 a.互斥 b.資源 c.配額 理發店問題 問題描述 問題分析 進程互斥問題三部曲 理發店問題算法實現 一、找進程——確定進程…

SB-OSC,最新的 MySQL Schema 在線變更方案

目前主流的 MySQL 在線變更方案有兩個&#xff1a; 基于 trigger 的 pt-online-schema-change基于 binlog 的 gh-ost 上周 Sendbird 剛開源了他們的 MySQL Schema 在線變更方案 SB-OSC: Sendbird Online Schema Change。 GitHub 上剛剛 25 顆星星&#xff0c;絕對新鮮出爐。 …

Qt Creator(2)【如何在Qt Creator中創建新工程】

閱讀導航 引言一、Qt Creator開始界面介紹二、如何在Qt Creator中創建新工程1. 新建項目2. 選擇項目模板3. 選擇項目路徑4. 選擇構建系統5. 填寫類信息設置界面6. 選擇語言和翻譯文件7. 選擇Qt套件8. 選擇版本控制系統9. 最終效果 三、認識Qt Creator項目內容界面1. 基本界面2.…

React Native 之 處理觸摸事件(八)

React Native 提供了可以處理常見觸摸手勢&#xff08;例如點擊或滑動&#xff09;的組件&#xff0c; 以及可用于識別更復雜的手勢的完整的手勢響應系統。 Button是一個簡單的跨平臺的按鈕組件。下面是一個最簡示例&#xff1a; <ButtononPress{() > {Alert.alert(你點…

go語言初識別(五)

本博客內容涉及到&#xff1a;切片 切片 1. 切片的概念 首先先對數組進行一下回顧&#xff1a; 數組定義完&#xff0c;長度是固定的&#xff0c;例如&#xff1a; var num [5]int [5]int{1,2,3,4,5}定義的num數組長度是5&#xff0c;表示只能存儲5個整形數字&#xff0c…

檢索模型預訓練方法:RetroMAE

論文title&#xff1a;https://arxiv.org/pdf/2205.12035RetroMAE: Pre-Training Retrieval-oriented Language Models Via Masked Auto-Encoder 論文鏈接&#xff1a;https://arxiv.org/pdf/2205.12035 摘要 1.一種新的MAE工作流&#xff0c;編碼器和解器輸入進行了不同的掩…