TypeScript---泛型

定义一个函数或类时,在一些情况下能够确定要使用的具体类型。

function fn(a:number):number{
    return a;
    }

而有些情况下无法确定其中要使用的具体类型(返回值、参数、属性的类型不能确定),此时泛型便能够发挥作用。

  • 示例:

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

上例中,test函数有一个参数类型不确定,但是能确定的时其返回值的类型和参数的类型是相同的,由于类型不确定所以参数和返回值均使用了any,但是很明显这样做是不合适的,首先使用any会关闭TS的类型检查,其次这样设置也不能体现出参数和返回值是相同的类型。

使用泛型后:

function test(arg: T): T{
    	return arg;
    }

这里的就是泛型,T是我们给这个类型起的名字(不一定非叫T),设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解,就表示某个类型。


那如何去调用test函数呢? 有两种方法去调用:

  • 方法一:

    test(10)

使用时可以直接传递参数使用,类型会由TS自动推断出来,但有时编译器无法自动推断时还需要使用下面的方式。

  • 方法二(指定类型):

    test(10)

也可以在函数后手动指定泛型


可以同时指定多个泛型,泛型间使用逗号隔开:

function test(a: T, b: K): K{
    return b;
}
test(10, "hello");

使用泛型时,完全可以将泛型当成是一个普通的类去使用

class MyClass{
    prop: T;
    constructor(prop: T){
        this.prop = prop;
     }
}

可以对泛型的范围进行约束

interface MyInter{
        length: number;
    }
    
    function test(arg: T): number{
        return arg.length;
    }

使用T extends MyInter表示泛型T必须是MyInter的子类,不一定非要使用接口类和抽象类同样适用。

你可能感兴趣的:(typescript,typescript,前端,javascript)