TypeScrip中泛型的案例詳解
泛型的定義
// 需求一: 泛型 可以支持不特定的數(shù)據(jù)類型, 要求,傳入的參數(shù)和返回參數(shù)一致
// 這種方式雖然能實(shí)現(xiàn)傳入和返回的參數(shù)一致,但是失去類型參數(shù)檢驗(yàn)
/*
function getData(value: any): any {
return "success"
}
*/
// 定義泛型解決需求一
// T表示泛型(這里的大寫字母可以隨便定義,但一般默認(rèn)為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ù)字和字符串兩種類型,通過類的泛型來實(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
泛型的接口
// 實(shí)現(xiàn)泛型接口的兩種方式
// 方式一:
// 定義一個泛型接口
interface Func {
<T>(value: T): T
}
// 定義一個函數(shù)實(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)
實(shí)現(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ù)庫進(jìn)行映射
class User {
usernam: string | undefined;
password: string | undefined;
}
var u1 = new User();
u1.usernam = "pika";
u1.password = "pika"
// 實(shí)例化一個數(shù)據(jù)庫(類當(dāng)成一個參數(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ù)用性
*/
// 實(shí)現(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ù)庫類,注意:要實(shí)現(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ù)庫類,注意:要實(shí)現(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入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
舉例說明如何為JavaScript的方法參數(shù)設(shè)置默認(rèn)值
這篇文章主要介紹了舉例說明如何為JavaScript的方法參數(shù)設(shè)置默認(rèn)值,參數(shù)默認(rèn)值的設(shè)置是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-11-11
Function.prototype.apply()與Function.prototype.call()小結(jié)
JavaScript 中,某個函數(shù)的參數(shù)數(shù)量是不固定的,因此要說適用條件的話,當(dāng)你的參數(shù)是明確知道數(shù)量時,用 call,而不確定的時候,用 apply,然后把參數(shù) push 進(jìn)數(shù)組傳遞進(jìn)去。當(dāng)參數(shù)數(shù)量不確定時,函數(shù)內(nèi)部也可以通過 arguments 這個數(shù)組來便利所有的參數(shù)2016-04-04
Javascript獲取窗口(容器)的大小及位置參數(shù)列舉及簡要說明
Javascript獲取窗口(容器)的大小及位置一系列的東西比較多,容易混淆,在這里列舉及簡要說明下,需要的朋友可以參考下2012-12-12
WEB頁子窗口(showModalDialog和showModelessDialog)使用說明
WEB頁子窗口(showModalDialog和showModelessDialog)使用說明,大家可以看下。2009-10-10
詳解JS-- 浮點(diǎn)數(shù)運(yùn)算處理
本篇文章主要介紹了JS--浮點(diǎn)數(shù)運(yùn)算處理,現(xiàn)在分享給大家,也給大家做個參考。感興趣的小伙伴們可以參考一下。2016-11-11
常用的Javascript數(shù)據(jù)驗(yàn)證插件
本文主要介紹的是常用的Javascript數(shù)據(jù)驗(yàn)證插件,包括電話號碼驗(yàn)證,郵件驗(yàn)證,身份證驗(yàn)證,需要的朋友可以參考下2015-08-08
傳智播客學(xué)習(xí)之JavaScript基礎(chǔ)篇
前幾天學(xué)習(xí)了JavaScript,但是一直由于忙碌的原因,沒有來得及進(jìn)行總結(jié),今天終于有時間進(jìn)行一個全面總結(jié)了,希望給正在努力學(xué)習(xí)的朋友們一點(diǎn)小小幫助。2009-11-11

