Typescript基础4--泛型

泛型

我们有时候会碰到一种情况，对于一个函数我们不清楚参数的类型，也不清楚返回值的类型一般情况我们会使用any

function dabao (arg : any) : any{
    return arg; 
}

但是使用any却丢失了一些信息：传入的类型与返回的类型应该是相同的。 如果我们传入一个数字，我们只知道任何类型的值都有可能被返回。因此，我们需要一种方法使返回值的类型与传入参数的类型是相同的。
所以，我们需要一个类型变量。

function dabao<T> (arg : T) : T {
    return arg;
}

我们定义了一个变量T，T会帮助我们捕获传入的类型，之后就会使用该类型。比如

dabao('string')

T会捕获类型为string类型

使用泛型变量

如果我们需要传入一个数组，数组类型待定，得到数组长度

Paste_Image.png

现在假设我们想操作T类型的数组而不直接是T。由于我们操作的是数组，所以.length属性是应该存在的。 我们可以像创建其它数组一样创建这个数组：

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

泛型类型

function xiaobao<T>(arg:T) : T{
    return arg
}
let dabao : <T>(arg: T) => T = xiaobao;

console.log(dabao("string"))

我们还可以使用带有调用签名的对象字面量来定义泛型函数：

function xiaobao<T>(arg:T) : T{
    return arg
}
let dabao : {<T>(arg: T) : T} = xiaobao;
console.log(dabao("string"))

使用接口

interface fun {
    <T>(arg: T) : T
}
function xiaobao<T>(arg:T) : T{
    return arg
}
let dabao : fun = xiaobao;
console.log(dabao("string"))

我们可能想把泛型参数当作整个接口的一个参数。 这样我们就能清楚的知道使用的具体是哪个泛型类型.

interface fun<T> {
    (arg: T) : T
}
function xiaobao<T>(arg:T) : T{
    return arg
}
let dabao : fun<string> = xiaobao;
console.log(dabao("string"))

泛型类

class Dabao<T> {
    name : T
    setName ( n : T){
        this.name = T
    }
}
var dabao = new Dabao<string>;
dabao.setName('cxh')

泛型约束

们有时候想操作某类型的一组值，并且我们知道这组值具有什么样的属性。 在 第二个例子中，我们想访问arg的length属性，但是编译器并不能证明每种类型都有length属性，所以就报错了。

Paste_Image.png

相比于操作any所有类型，我们想要限制函数去处理任意带有.length属性的所有类型。 只要传入的类型有这个属性，我们就允许，就是说至少包含这一属性。 为此，我们需要列出对于T的约束要求

interface length {
    length : number
}

function dabao<T extends length>(arg:T) : T{
    console.log(arg.length)
    return arg
}

dabao('cxh');
dabao([1,2,3,4]);
dabao({name:123,age:234});

我们定义一个接口来描述约束条件。 创建一个包含 .length属性的接口，使用这个接口和extends关键字还实现约束,现在这个泛型函数被定义了约束，因此它不再是适用于任意类型,必须包含length属性

Paste_Image.png

在泛型里使用类类型

class Dabao{
   name : string = 'cxh'
}
class Xiaobao extends Dabao{
   age : number
}
class M {}
function create<T extends Dabao>(c: {new(): T; }): T {
   return new c();
}
console.log( create(Dabao).name )
console.log( create(Xiaobao).name )
console.log( create(M).name )

结果

Paste_Image.png Paste_Image.png