TypeScrip中泛型的案例詳解

泛型的定義

// 需求一： 泛型 可以支持不特定的數據類(lèi)型， 要求，傳入的參數和返回參數一致

// 這種方式雖然能實(shí)現傳入和返回的參數一致，但是失去類(lèi)型參數檢驗
/*
function getData(value: any): any {
    return "success"
}
*/

// 定義泛型解決需求一
// T表示泛型(這里的大寫(xiě)字母可以隨便定義，但一般默認為T(mén)) 具體什么類(lèi)型是調用這個(gè)方法的時(shí)候決定的
function getData<T>(value: T):T{
    return value;
}

// 傳入的字符串類(lèi)型
var get = getData<string>("hello")
console.log(get)

// 傳入的類(lèi)型為數字
var getTwo = getData<number>(666)
console.log(getTwo)

// 需求二：比如有個(gè)最小堆算法，需要同時(shí)支持返回數字和字符串兩種類(lèi)型，通過(guò)類(lèi)的泛型來(lái)實(shí)現

// 定義類(lèi)的泛型
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í)現泛型接口的兩種方式
// 方式一：
// 定義一個(gè)泛型接口
interface Func {
    <T>(value: T): T
}

// 定義一個(gè)函數實(shí)現泛型接口
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í)現泛型類(lèi)

/*
1、定義一個(gè)User類(lèi)，這個(gè)類(lèi)的作用是映射數據庫字段
2、然后定義一個(gè)MysqlDb的類(lèi)這個(gè)類(lèi)用于操作數據庫
3、然后把User類(lèi)作為參數傳入到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);
*/

// 但是上述定義的表和數據庫不能保證傳入的數據的正確性
// 版本二
// 定義操作數據庫的泛型
class MysqlDb <T>{
    add(info: T): boolean {
        console.log(info);
        return true;
    }
}

// 定義一個(gè)user類(lèi)和數據庫進(jìn)行映射
class User {
    usernam: string | undefined;
    password: string | undefined;
}

var u1 = new User();
u1.usernam = "pika";
u1.password = "pika"

// 實(shí)例化一個(gè)數據庫(類(lèi)當成一個(gè)參數來(lái)約束傳入參數的類(lèi)型)
var msql = new MysqlDb<User>();
msql.add(u1);   // 保證傳入數據的格式是User類(lèi)型的

綜合案例

需求：
功能： 定義一個(gè)操作數據庫的庫 支持Mysql MongoDb
要求1： Mysql MongoDb功能一樣，都有add update delete get方法
注意： 約束統一的規范、以及代碼重用
解決方案： 需要約束規范所以要定義接口，需要代碼重用所以用到泛型
    1、接口： 在面向對象編程中，接口是一種規范的定義，它定義了行為和動(dòng)作的規范
    2、泛型：通俗理解：泛型就是解決 類(lèi) 接口 方法的復用性
*/

// 實(shí)現流程：
// 定義一個(gè)接口，對所有方法的約束
interface DbMethod<T> {
    add(info: T): boolean;
    update(info: T, id: number): boolean;
    delete(id: number): boolean;
    get(id: number): boolean;
}

// 定義一個(gè)Mysql數據庫類(lèi)，注意：要實(shí)現泛型接口 這個(gè)類(lèi)也應該是一個(gè)泛型類(lèi)
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類(lèi)來(lái)約束傳入的參數正確性
var mysql = new MysqlDbs<Users>();
var u = new Users();
u.username = "xxxx"
u.password = "xxxxxx"
// 模擬數據庫的增刪改查
mysql.add(u);
mysql.get(1);
mysql.update(u, 1);
mysql.delete(1)



// 定義一個(gè)MongoDb數據庫類(lèi)，注意：要實(shí)現泛型接口 這個(gè)類(lèi)也應該是一個(gè)泛型類(lèi)
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類(lèi)來(lái)約束傳入的參數正確性
var mysql = new MongoDb<Userd>();
var u = new Userd();
u.username = "xxxx"
u.password = "xxxxxx"
// 模擬數據庫的增刪改查
mysql.add(u);
mysql.get(1);
mysql.update(u, 1);
mysql.delete(1)

到此這篇關(guān)于TypeScrip中泛型的案例詳解的文章就介紹到這了,更多相關(guān)TypeScrip中泛型內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！