Typescript核心篇——函数_this指向—重载—泛型

Posted 2022-08-16 勇敢*牛牛

Typescript核心篇——函数_this指向—重载—泛型

• this
• • 重载
  • 泛型

this

当函数使用到this时，需要在参数中指出this，包括this的类型，而且this必须在函数的第一位
this可以不用在接口中声明

interface IObj
    a:number;
    b:number;
    c(a:number):void;
    clickHandler(e:MouseEvent):void;

var o:IObj=
    a:1,
    b:2,
    c:function(this:IObj,a:number):void
        // console.log(this.a);
        document.addEventListener("click",(e:MouseEvent)=>this.clickHandler(e));
    ,
    // 当函数使用到this时，需要在参数中指出this，包括this的类型，而且this必须在函数的第一位
    clickHandler:function(this:IObj,e:MouseEvent):void
    
        console.log(this.a+this.b);
        console.log(e)
    

重载

javascript本身是个动态语言。 JavaScript里函数根据传入不同的参数而返回不同类型的数据是很常见的。

function fn(a:string,b:string):void;
function fn(a:number,b:number):void;
function fn(a:any,b:any):any
    if(typeof a==="string")

    else if(typeof a==="number")

    

fn(1,2)
fn("a","b")

泛型

这里，我们使用了类型变量，它是一种特殊的变量，只用于表示类型而不是值。

T 是一个类型变量
function fn<T>(a:T):void

我们也可以使用不同的泛型参数名，只要在数量上和使用方式上能对应上就可以。

fn<number>(1);
fn<string>("a");
fn<a:number,b:number>(a:1,b:2);

var arr:Array<number>=[1,2,3,4]

泛型类型；

function fn<T>(arr:Array<T>)


fn<number>([1,2,3,4]);
fn<string>(["a","b","c","d"]);

函数的泛型导论

var fn:<T>(a:T)=>void=function<T>(a:T)
泛型接口= 函数类型

var fn:<T>(a:T)=>void=<T>(a:T):void=>

接口内的泛型

interface IFn
    <T>(a:T):void;

var fn:IFn=<T>(a:T):void=>


fn<number>(3);

接口外泛型

interface IFn<T>
    (a:T):void;

var fn:IFn<number>=function(a:number):void


var fn:IFn<string>=(a:string):void=>


fn(3)

所有在类中实现的接口属性和方法必须使用public

interface IA<T>
    a:T;

所有在类中实现的接口属性和方法必须使用public
class Box implements IA<number>
    public a:number=1;

泛型类
泛型类的实现变换的T的实例属性除了必须是public之外，还得初始化在构造函数中或者赋初值。

class Box<T>
    public a:T;
    constructor(_a:T)
        this.a=_a;
    


var b:Box<number>=new Box(3);

var c:Box<string>=new Box("a");

函数的 泛型约束

将这个T：类型变量做一个范围约束。只能是某几个参数之内的接口

interface IA
    a:number;

interface IB extends IA
    b:number;

//函数类型变量T继承了IA
function fn<T extends IA>(a:T):void



fn<IB>(a:1,b:2);
fn<IA>(a:3);

泛型类类型
给函数传入不同的类，返回不同的类的对象。

class Box
    public a:number=1;
    public play():void
    

    

给函数的参数传入不同的类的类型
new出的对象new ():T返回值类型就是T
function fn<T>(className:new ():T):T
    var a:T=new className();
    return a;


fn<Box>(Box);