javascript - Typescript如何声明一个返回要调用的对象的方法(此)

如何为on函数编写声明。
on函数必须根据其所调用的对象返回动态类型。

function on(type, handler) {
    this.addEventListener(arguments);

    return this;
}

var element = document.getElementById('elm');
var request = new XMLHttpRequest();

element.on = on; // => element.on(t,cb) must return element
request.on = on; // => request.on(t,cb) must return request

这是我的d.ts（这只是示例，在ThisType上不正确）

declare function on<K extends keyof WindowEventMap>(type: string, handler:
(this: ThisType, ev: WindowEventMap[K]) => any): ThisType;

我不知道Typescript是否有另一个关键字来解决此问题。 （ThisCaller）

最佳答案

TypeScript具有称为polymorphic this types的功能，可在此处使用。

但是，此作业

element.on = on;

将被标记为错误，因为在TypeScript中，您不能仅通过分配给对象属性来向该对象添加任意属性。

您可以通过类型安全的方式来实现此目的，方法是添加一个函数，该函数将为对象添加on属性，并返回相同的对象但声明了适当的类型，并告诉编译器现在具有该on属性：

interface EventListeners {
    addEventListener(type: string, handler: () => void): void;
};

function on<T extends EventListeners>(this: T, type: string, handler: () => void): T {
    this.addEventListener(type, handler);

    return this;
}


var element = document.getElementById('elm');
var request = new XMLHttpRequest();

// had to declare this interface in order to use this as return type
interface EventListenersExt extends EventListeners {
    on(type: string, handler: () => void): this;
}
function addOn<T extends EventListeners>(t: T): T & EventListenersExt {
    return Object.assign(t, { on });
}

const elementExt = addOn(element);
const requestExt = addOn(request);

const e = elementExt.on('click', () => { }).on('keyup', () => { }); // const e: HTMLElement & EventListenersExt
const r = requestExt.on('load', () => { }); // const r: XMLHttpRequest & EventListenersExt

关于javascript - Typescript如何声明一个返回要调用的对象的方法(此)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54084503/