Question

我正在尝试学习Typescript并且正在玩mixin的想法。我有以下代码，这是愚蠢的，但它是实践。此外，它运行时它的工作原理。但第42行myInput.sendKeys(name);表示“提供的参数与目标的签名不匹配”。但我不确定我需要改变什么才能修复它。

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        });
    });
}

class SendKeys {
    inputEl;

    sendKeys(data: string) {
        this.inputEl.value = data;
    }
}

class InputClass implements SendKeys {
    inputEl: HTMLInputElement;

    constructor() {
    }

    sendKeys: () => void;

    createInput(name: string) {
        this.inputEl = document.createElement('input');
        this.inputEl.type = 'text';
        this.inputEl.setAttribute('id', name);
        document.body.appendChild(this.inputEl);
        document.body.appendChild(document.createElement('br'));
    }
}
applyMixins(InputClass, [SendKeys])


let myInput = new InputClass();

let nameArr = ["frank", "Joe", "Laryy"];

for (let name of nameArr) {
    myInput.createInput(name);
    myInput.sendKeys(name);
}

See the code in action here

Answer 1

您正在错误地实施SendKeys，它应该是：

sendKeys: (data: string) => void;

像这样：

class InputClass implements SendKeys {
    inputEl: HTMLInputElement;

    constructor() {}

    sendKeys: (data: string) => void;

    createInput(name: string) {
        this.inputEl = document.createElement('input');
        this.inputEl.type = 'text';
        this.inputEl.setAttribute('id', name);
        document.body.appendChild(this.inputEl);
        document.body.appendChild(document.createElement('br'));
    }
}

（code in playground）

然后错误就消失了。

Answer 2

TL; DR;将sendKeys中的InputClass签名修改为：

 sendKeys: (data: string) => void;

applyMixin方法在运行时执行。

在编译时，Typescript编译器无法知道您要将类SenKeys混合到类InputClass中，并且这样做会更改sendKeys的签名方法从参数less到单个参数方法。

在打字稿

2 个答案: