TypeScrip中泛型的案例詳解
更新時間:2021年07月23日 10:26:52 作者:流浮生
這篇文章主要介紹了TypeScrip中泛型的案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
泛型的定義
// 需求一: 泛型 可以支持不特定的數(shù)據(jù)類型, 要求,傳入的參數(shù)和返回參數(shù)一致 // 這種方式雖然能實現(xiàn)傳入和返回的參數(shù)一致,但是失去類型參數(shù)檢驗 /* function getData(value: any): any { return "success" } */ // 定義泛型解決需求一 // T表示泛型(這里的大寫字母可以隨便定義,但一般默認為T) 具體什么類型是調(diào)用這個方法的時候決定的 function getData<T>(value: T):T{ return value; } // 傳入的字符串類型 var get = getData<string>("hello") console.log(get) // 傳入的類型為數(shù)字 var getTwo = getData<number>(666) console.log(getTwo) // 需求二:比如有個最小堆算法,需要同時支持返回數(shù)字和字符串兩種類型,通過類的泛型來實現(xiàn) // 定義類的泛型 class minCla<T> { list: T[] = []; add(value: T):void { this.list.push(value); } min(): T { var minNum = this.list[0]; for(var i=0; i<this.list.length; i++) { if (minNum > this.list[i]) { minNum = this.list[i] } } return minNum } } var minNum = new minCla<number>(); minNum.add(2); minNum.add(1); minNum.add(7); console.log(minNum.min()); // 返回 1 // 字符的比較是按ascii碼比較的 var minNumTwo = new minCla<string>(); minNumTwo.add("c"); minNumTwo.add("z"); minNumTwo.add("a"); console.log(minNumTwo.min()) // 返回a
泛型的接口
// 實現(xiàn)泛型接口的兩種方式 // 方式一: // 定義一個泛型接口 interface Func { <T>(value: T): T } // 定義一個函數(shù)實現(xiàn)泛型接口 var f: Func = function<T>(value: T) { return value; } f<string>("hello") f<number>(666) // 方式二: interface FuncONe { <T>(value: T): T } var f1: FuncONe = function<T>(value: T):T { return value; } f1<string>("world") f1<number>(666)
實現(xiàn)泛型類
/* 1、定義一個User類,這個類的作用是映射數(shù)據(jù)庫字段 2、然后定義一個MysqlDb的類這個類用于操作數(shù)據(jù)庫 3、然后把User類作為參數(shù)傳入到MysqlDb中 */ /*版本一: class User { usernam: string | undefined; password: string | undefined; } class MysqlDb { add(user: User): boolean { console.log(user); return true; } } var u1 = new User(); u1.usernam = "pika"; u1.password = "pika" var msql = new MysqlDb(); msql.add(u1); */ // 但是上述定義的表和數(shù)據(jù)庫不能保證傳入的數(shù)據(jù)的正確性 // 版本二 // 定義操作數(shù)據(jù)庫的泛型 class MysqlDb <T>{ add(info: T): boolean { console.log(info); return true; } } // 定義一個user類和數(shù)據(jù)庫進行映射 class User { usernam: string | undefined; password: string | undefined; } var u1 = new User(); u1.usernam = "pika"; u1.password = "pika" // 實例化一個數(shù)據(jù)庫(類當成一個參數(shù)來約束傳入?yún)?shù)的類型) var msql = new MysqlDb<User>(); msql.add(u1); // 保證傳入數(shù)據(jù)的格式是User類型的
綜合案例
需求: 功能: 定義一個操作數(shù)據(jù)庫的庫 支持Mysql MongoDb 要求1: Mysql MongoDb功能一樣,都有add update delete get方法 注意: 約束統(tǒng)一的規(guī)范、以及代碼重用 解決方案: 需要約束規(guī)范所以要定義接口,需要代碼重用所以用到泛型 1、接口: 在面向?qū)ο缶幊讨?,接口是一種規(guī)范的定義,它定義了行為和動作的規(guī)范 2、泛型:通俗理解:泛型就是解決 類 接口 方法的復(fù)用性 */ // 實現(xiàn)流程: // 定義一個接口,對所有方法的約束 interface DbMethod<T> { add(info: T): boolean; update(info: T, id: number): boolean; delete(id: number): boolean; get(id: number): boolean; } // 定義一個Mysql數(shù)據(jù)庫類,注意:要實現(xiàn)泛型接口 這個類也應(yīng)該是一個泛型類 class MysqlDbs<T> implements DbMethod<T> { add(info: T): boolean { console.log(info); return true; } update(info: T, id: number): boolean { var obj = { username: "xxxx", password: "666" } return true } delete(id: number): boolean { console.log("delete success"); return true } get(id: number): boolean { var arr = [ {username: "xxx", password: "xxxxx" } ]; return true } } // 測試: class Users { username: string | undefined; password: string | undefined; }; // 使用Users類來約束傳入的參數(shù)正確性 var mysql = new MysqlDbs<Users>(); var u = new Users(); u.username = "xxxx" u.password = "xxxxxx" // 模擬數(shù)據(jù)庫的增刪改查 mysql.add(u); mysql.get(1); mysql.update(u, 1); mysql.delete(1) // 定義一個MongoDb數(shù)據(jù)庫類,注意:要實現(xiàn)泛型接口 這個類也應(yīng)該是一個泛型類 class MongoDb<T> implements DbMethod<T> { add(info: T): boolean { console.log(info); return true; } update(info: T, id: number): boolean { var obj = { username: "xxxx", password: "666" } return true } delete(id: number): boolean { console.log("delete success"); return true } get(id: number): boolean { var arr = [ {username: "xxx", password: "xxxxx" } ]; return true } } // 測試: class Userd { username: string | undefined; password: string | undefined; }; // 使用Users類來約束傳入的參數(shù)正確性 var mysql = new MongoDb<Userd>(); var u = new Userd(); u.username = "xxxx" u.password = "xxxxxx" // 模擬數(shù)據(jù)庫的增刪改查 mysql.add(u); mysql.get(1); mysql.update(u, 1); mysql.delete(1)
到此這篇關(guān)于TypeScrip中泛型的案例詳解的文章就介紹到這了,更多相關(guān)TypeScrip中泛型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中g(shù)etUTCMinutes()方法的使用詳解
這篇文章主要介紹了JavaScript中g(shù)etUTCMinutes()方法的使用詳解,是JS入門學習中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06舉例說明如何為JavaScript的方法參數(shù)設(shè)置默認值
這篇文章主要介紹了舉例說明如何為JavaScript的方法參數(shù)設(shè)置默認值,參數(shù)默認值的設(shè)置是JS入門學習中的基礎(chǔ)知識,需要的朋友可以參考下2015-11-11Function.prototype.apply()與Function.prototype.call()小結(jié)
JavaScript 中,某個函數(shù)的參數(shù)數(shù)量是不固定的,因此要說適用條件的話,當你的參數(shù)是明確知道數(shù)量時,用 call,而不確定的時候,用 apply,然后把參數(shù) push 進數(shù)組傳遞進去。當參數(shù)數(shù)量不確定時,函數(shù)內(nèi)部也可以通過 arguments 這個數(shù)組來便利所有的參數(shù)2016-04-04Javascript獲取窗口(容器)的大小及位置參數(shù)列舉及簡要說明
Javascript獲取窗口(容器)的大小及位置一系列的東西比較多,容易混淆,在這里列舉及簡要說明下,需要的朋友可以參考下2012-12-12WEB頁子窗口(showModalDialog和showModelessDialog)使用說明
WEB頁子窗口(showModalDialog和showModelessDialog)使用說明,大家可以看下。2009-10-10