Ts中的泛型、泛型类_ts class new 泛型

• 泛型类

class minClass {
    public list:number[] = []
	
	add(num:number) {
        this.list.push(num)
    }

	minNumber():number {
        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 m = new minClass()
    m.add(1)
	m.add(2)
	console.log(m.minNumber()) 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

class minClass2<T> {
    public list:T[] = []

	add(value:T)void {
        this.list.push(value)
    }
    
    minNumber():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 m = new minClass2<number>();
m.add(1);
m.add(2);

var m2 = new minClass2<string>();
m2.add('a');
m2.add('b');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

• 泛型接口

// 定义一个函数接口
interface ConfigFn {
    (v1:string,v2:string):string;
}

let setData:ConfigFn = function(v1:string,v2:string):string {
    return v1 + v2;
}


// 定义泛型方法
interface ConfigFn2 {
    <T>(value:T):T;
}

let getData:ConfigFn2 = function<T>(value:T):T {
    return value
}

// 定义泛型接口
interface ConfigFn3<T>{
    (value:T):T;
}

let myGetData:ConfigFn3<string> = function<T>(value:T):T{
    return value;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

• 泛型类
  • 把类作为参数来约束数据传入的类型：定义一个User的类这个类的作用就是映射数据库字段，然后定义一个MysqlDb的类用于操作数据库，之后把user类作为参数传入到MysqlDb中

// User类来映射数据库字段
class User {
    userName:string | undefined;
    password:string | undefined;
}

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

class Person {
    name:string | undefined;
    age:number | undefined;
    id:number | undefined;
    constructor(params:{
        name:string | undefined,
        age:number | undefined,
        id?:number | undefind
    }) {
       this.name = params.name;
        this.age = params.age;
        this.id = params.id;
    }
}

let p = new Persion({
    name:'张三',
    age:20
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

泛型的使用方法

function test<T>(arg:T):T {
    return arg;
}
1
2
3

• 可以用两种方法使用
  • 1. 传入所有参数，包括类型参数
  • let out = test<string>('yivi');
  • 2.使用类型推论，编译器会自动进行类型推断
  • let out = test('yivi');
• 泛型变量
  • function test<T>(arg:T):T { console.log(arg.length) // error，arg的类型为T，无明确指示方法，因此报错 return arg; }
  • 当操作T类型的数组时，.length的属性是存在的，因此不会报错

function test<T>(args : T[]):T[] {
	console.log(args.length)
    return args;
}

function test<T>(args:Array<T>):Array<T> {
    console.log(args.length)
    return args;
}
1
2
3
4
5
6
7
8
9