Question

我要为一些带有打字稿的简单页面编写一个轻量级的库。但是，我受到了阻碍，而且我不知道如何处理这些问题

我使用装饰器来扩展此类的方法，但无法在构造函数中调用它们，并且编辑器在“ each”方法中提示我“元素隐式具有“ any”类型，因为类型“数字”不能用于索引类型“选择器”。在“选择器”类型上找不到参数为“数字”类型的索引签名。”

function addArrayMethods(target: Function) {
  target.prototype.push = Array.prototype.push
  target.prototype.splice = Array.prototype.splice
}

@addArrayMethods
class Selector {
  length: number = 0

  selector!: string;

  constructor(sth: string | HTMLElement) {
    if (typeof sth === 'string') {
      this.selector = sth
      this.push.apply(this, document.querySelectorAll(sth)) // error1
    } else {
      this.push(sth) // error1
    }
  }

  each(callback: (value: any, index: number) => void): void {
    let i: number = -1
    const len: number = this.length
    while (++i < len) {
      callback(this[i], i) // error2 this[i]
    }
  }
}

错误1：类型“选择器”上不存在属性“推”。

error2：元素隐式地具有“ any”类型，因为类型“ number”的表达式不能用于索引类型“ Selector”。在“选择器”类型上找不到参数为“数字”类型的索引签名

Answer 1

装饰器自身不会将TypeScript的理解更改为装饰类型。您仍然必须在push类上定义方法Selector等。也许最简单的方法是添加一个接口：

interface Selector {
    push(...items: any[]): number;
    splice(start: number, deleteCount?: number): any[];
    [index: number]: any;
}

将此添加到您的代码中，它将完成此工作。最后一个定义是提供this[i]使用所需的索引签名。

如何在TypeScript中编写类似于jquery的库

1 个答案: