TS入门007范型

范型

用一个东西表示广泛的类型

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
//用js 你给我什么就返回什么 
function fn1(something){ 
    return something
}


// 用 ts, 你给我任意类型的东西，我给你任意类型的东西
/*
有问题了
给你 number => string  满足条件 any => any
*/
function fn2(something:any):any{ 
    return something
}

// 用一个占位符
function fn3<T>(something:T):T{ 
    return something
}

let s: string = fn3('hi');
let s2 = fn3('hi') // 因为 'hi'的类型是 string 所以返回值的类型是 string
let s3 = fn3<string>('hi');
let s4 = fn3<number>(1);
let s5 = fn3<boolean>(true);

interface Human{
    name:string;
    age:number
}

let s6 = fn3<Human>({name:'hjx',age:18});
let s7 = fn3({name:'hjx',age:18});

范型数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function returnArray<T>(array:T[]):T[]{
    return array;
}

let a = returnArray([1,2,3]);

interface Human{
    name:string;
    age:number
}

let a2 = returnArray<Human>([{name:'aa',age:11},{name:'bb',age:12}])
let a3 = returnArray([{name:'aa',age:11},{name:'bb',age:12}])


/*
function returnArray<T>(array:T[]):T[]{
    return array;
}
还可以写成
function returnArray<T>(array:Array<T>):Array<T>{
    return array;
}
*/

范型还可以这样声明

1
2
3
4
5
6
// 用一个占位符
function xxx<T>(something:T):T{ 
    return something
}

let fn: <T>(something:T)=>T = xxx;

接口和范型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
interface add{
    (a:number,b:number):number;
}

let numAdd:add = (a:number,b:number):number=>{
    return a + b;
}

// 接口和范型

interface anyAdd<T>{
    (a:T,b:T):T;
}

let stringAdd:anyAdd<string> = (a:string,b:string):string =>{
    return a + b;
}

let numberAdd:anyAdd<number> = (a:number,b:number):number =>{
    return a + b;
}

范型约束

1
2
3
4
5
function fn<T>(something:T):T{ 
    console.log(something.length)
    return something
}
// 如果参数是 数字 1 就报错了

添加一个约束条件

1
2
3
4
5
6
7
8
interface hasLength{
    length:number
}

function fn<T extends hasLength>(something:T):T{ 
    console.log(something.length);
    return something
}

使用类类型的约束

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function createT( c ){
    // c 必须是 类 才可以 ，而且在js里不报错
    return new c();
}
// createT('hi') 报错


class Student{}

class Human{}

// ts里 约束参数是个类
function createT2<T>( c:{new ():T} ):T{
    // c 必须是 类 才可以 ，而且在js里不报错
    return new c();
}

// createT2<Human>(Student) 报错 因为明确约束了 类
createT2<Human>(Human)