Question

我已经从David Walsh的css动画回调中获取了代码，并将其修改为TypeScript。但是，我遇到错误，也不知道为什么：

interface IBrowserPrefix {
  [key: string]: string;
}

// http://davidwalsh.name/css-animation-callback
function whichAnimationEvent() {
  let x: keyof IBrowserPrefix;
  const el = document.createElement('temp');
  const browserPrefix: IBrowserPrefix = {
    animation: 'animationend',
    OAnimation: 'oAnimationEnd',
    MozAnimation: 'animationend',
    WebkitAnimation: 'webkitAnimationEnd',
  };

  for (x in browserPrefix) {
    if (el.style[x] !== undefined) {
    //           ^---- [TS Error]: Element has 'any' type b/c index expression is not of type 'number'
      return browserPrefix[x];
    }
  }
}

Answer 1

尝试使用for (x of Object.keys(browserPrefix))代替for (x in browserPrefix)。

使用in关键字进行循环通常是令人讨厌的，因为you may get properties that do not belong to the object。

Answer 2

之所以发生这种情况，是因为您试图使用带有字符串键的数字索引签名来索引对象。

for x in browserPrefix将带给您一组键，它们是字符串。但是由于某种原因，CSSStyleDeclaration的索引类型设置为number（而不是string）-请参见https://github.com/Microsoft/TypeScript/issues/17827。

由于打开了--noImplicitAny，因此收到此错误。一种有效的方法（一种怪异的方式）是将索引器转换为字符串：

  for (x in browserPrefix) {
    if (el.style[x as any] !== undefined) {
      return browserPrefix[x];
    }
  }

另一种方法是修改类型（尝试在github上解决问题）。

当我们在这里时，应将x标记为const，如果要在对象上使用for-in，则应确保该属性属于该对象，以避免提取原型链中继承的任何东西：

  for (const x in browserPrefix) {
    if (browserPrefix.hasOwnProperty(x) && el.style[x as any] !== undefined) {
      return browserPrefix[x];
    }
  }

或者，将for-of与Object.keys一起使用，而不是for-in。

这里不需要提前定义x。

Answer 3

代码中存在几个问题，第一个问题是IBrowserPrefix被定义为具有字符串索引，因此keyof IBrowserPrefix;实际上是字符串。我将删除该界面，仅使用let x: keyof typeof browserPrefix;

下一个问题是打字稿定义CSSStyleDeclaration接口的方式。它仅包括标准属性，不包括供应商特定的属性。

您可以通过类型断言来告诉编译器您知道自己在做什么，而忽略错误

export function whichAnimationEvent() {

    const el = document.createElement('temp');
    const browserPrefix = {
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'animationend',
        WebkitAnimation: 'webkitAnimationEnd',
    };
    let x: keyof typeof browserPrefix;
    for (x in browserPrefix) {
        if (el.style[x as keyof CSSStyleDeclaration] !== undefined) {
            return browserPrefix[x];
        }
    }
}

您还可以使用CSSStyleDeclaration扩展您所需的特定于供应商的密钥。

元素隐式地具有“ any”类型，因为索引表达式不是“ number”类型[7015]

3 个答案: