TypeScript 基础学习（四）

今天接着学习ts中的类相关知识

ts中的 泛型，泛型定义，泛型函数，泛型类，泛型接口

泛型定义，泛型函数

// ts中的  泛型的定义和泛型函数
// 泛型：软件工程中，我们不仅要创建一致的定义好的API，同时也要考虑可重用性，组件不仅能够支持当前的数据类型，同事也能支持未知的数据类型，这将会在创建大型系统时为你提供十分灵活的功能支持。

// 在c#和java中，可以使用泛型来创建可重用的组件，一个组件可以支持多个类型的数据。

// 泛型就是解决 类 接口 方法的复用性，以及对不确定数据类型的支持
function getData(value: string): string {
    return value;
}//这个 就只能返回string类型的数据

// 如果想同时返回 string类型和number类型
//1.any类型
function getData1(value: any): any {
    return value;
}
// 但是 使用any 相当于放弃了类型检查，

// 如果要求传入什么，就返回什么 这样就用到了泛型
// T表示泛型，大写字母都可以，但一般用T，具体传入什么类型，是调用这个方法的时候决定的
function getData2<T>(value: T): T {
    return value;
}
getData2<number>(123)
getData2<string>('123')

getData2<number>('123')//这里会报错，但是如果指定函数的返回值是any类型，那么这样是可以的。

泛型类

// 泛型类
// 比如 最小堆算法，需要同时支持返回数字和字符串两种类型，通过类的泛型来实现
class MinClass<T> {
    public list: T[] = [];
    add(num: T) {
        this.list.push(num)
    }
    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 m1 = new MinClass<number>()
m1.add(2)
m1.add(6)
m1.add(22)
console.log(m1.min())

var m2 = new MinClass<string>()
m2.add('5')
m2.add('1')
console.log(m2.min())

泛型接口

// 泛型的接口

// 一般的接口
interface ConfigFn{
    (value1:string,value2:string):string;
}
var setData:ConfigFn = function(value1:string,value2:string):string{
    return value1+value2;
}
setData('name','张三')

// 定义泛型接口
// 第一种
interface ConfigFn{
    <T>(value:T):T;
}
var getData:ConfigFn = function<T>(value:T):T{
    return value;
}
getData<string>('张三')



// 第二种
interface ConfigFn<T>{
    (value:T):T;
}
function getData<T>(value:T):T{
    return value;
}
var myGetData:ConfigFn<string> = getData;
myGetData('20')
myGetData(20)//错误

把类作为参数来约束数据的传入类型

泛型：可以帮助我们避免重复的代码以及对不特定数据类型的支持（类型校验）。
那么把类当做参数的泛型类怎么实现呢？

// 把类当做参数的泛型类
// 1.定义一个类
// 2.把类作为参数来约束数据传入的类型
// 定义一个User的类，这个类的作用就是映射数据库字段，然后顶一个MysqlDb的类，用于操作数据库，然后把User类作为参数传入到MysqlDb中

class User {
    userName: string | undefined;
    passWord: number | undefined;
}

class MysqlDb{
    add(user:User):boolean{
        console.log(user)
        return true
    }
}

var u = new User();
u.passWord = 123
u.userName = '123'
var db = new MysqlDb()
db.add(u)

// 比如又有一个文章分类的类
class ArticleCate{
    title: string | undefined;
    desc: string | undefined;
    status: number | undefined;
}

class MysqlDb{
    add(info:ArticleCate):boolean{
        console.log(info)
        return true
    }
}

var ar = new ArticleCate();
ar.title = '国内'
ar.desc = '姚明2米多'
ar.status = 1

var Db = new MysqlDb();

Db.add(ar)

// 用泛型类来整合上面的类，避免mysqldb类的重复封装

// 操作数据库的泛型类
class MysqlDb<T>{
    add(info: T): boolean {
        console.log(info)
        return true
    }
    updated(info:T,id:number) {
        console.log(info);
        console.log(id);
    }
}

class User {
    userName: string | undefined;
    passWord: number | undefined;
}

var u = new User();
u.passWord = 123
u.userName = '123'
var db = new MysqlDb<User>()//实例化的时候，进行类型校验  
db.add(u)



class ArticleCate {
    title: string | undefined;
    desc: string | undefined;
    status: number | undefined;
    constructor(params: {
        title: string | undefined,
        desc: string | undefined,
        status?: number | undefined
    }) {
        this.title = params.title;
        this.desc = params.desc;
        this.status = params.status
    }
}

var ar = new ArticleCate({
    title:'国内',
    desc:'姚明2米多',
    status:1
});

var Db = new MysqlDb<ArticleCate>();

Db.add(ar)

// 更新，除了文章类，还单独传入id
var art = new ArticleCate({
    title:'国内11',
    desc:'姚明2米多11'
});

var Db2 = new MysqlDb<ArticleCate>();
Db2.updated(ar,33213321)

下一篇文章记录现有知识的综合运用