typescript 元素隐式具有“任何”类型，因为索引表达式不是“数字”类型 [7015]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53526178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Element implicitly has an 'any' type because index expression is not of type 'number' [7015]
提问by skube
I've taken the code from David Walsh's css animation callback and modified it to TypeScript. However, I'm getting an error and I don't know why:
我从 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];
}
}
}
采纳答案by Dan Pantry
This is happening because you're attempting to index an object with a numeric index signature with string keys.
发生这种情况是因为您试图使用字符串键为具有数字索引签名的对象建立索引。
for x in browserPrefixwill give you back a set of keys, which are strings. However for some reason CSSStyleDeclarationhas its index type set to number(and not string) - see https://github.com/Microsoft/TypeScript/issues/17827.
for x in browserPrefix会给你一组键，它们是字符串。但是由于某种原因CSSStyleDeclaration，它的索引类型设置为number（而不是string） - 请参阅https://github.com/Microsoft/TypeScript/issues/17827。
You're getting this error because you have --noImplicitAnyturned on. A way to get this working (a hacky way) would be to cast the indexer to a string:
您收到此错误是因为您已--noImplicitAny打开。让这个工作（一种hacky方式）的方法是将索引器转换为字符串：
for (x in browserPrefix) {
if (el.style[x as any] !== undefined) {
return browserPrefix[x];
}
}
The other way would be to modify the typings (try bumping the issue on github).
另一种方法是修改类型（尝试在 github 上解决这个问题）。
while we're here, you should mark xwith constand if you're going to use for-in on an object you should make sure that the property belongs to the object to avoid pulling in anything that is inherited in the prototype chain:
当我们在这里时，你应该标记x，const如果你打算在一个对象上使用 for-in，你应该确保该属性属于该对象，以避免引入原型链中继承的任何内容：
for (const x in browserPrefix) {
if (browserPrefix.hasOwnProperty(x) && el.style[x as any] !== undefined) {
return browserPrefix[x];
}
}
Alternatively, use for-ofwith Object.keysinstead of for-in.
或者，使用for-ofwithObject.keys而不是for-in。
There's no need to define xahead of time here.
这里不需要x提前定义。
回答by Charles Stover
Try for (x of Object.keys(browserPrefix))instead of for (x in browserPrefix).
尝试for (x of Object.keys(browserPrefix))代替for (x in browserPrefix).
It's typically frowned upon to use the inkeyword for a loop, because you may get properties that do not belong to the object.
通常不赞成将in关键字用于循环，因为您可能会获得不属于 object 的属性。
回答by Titian Cernicova-Dragomir
There are several problems in the code, the first one is that IBrowserPrefixis defined as having a string index and thus keyof IBrowserPrefix;will actually be string. I would remove the interface and just use let x: keyof typeof browserPrefix;
代码中有几个问题，第一个IBrowserPrefix是定义为具有字符串索引，因此keyof IBrowserPrefix;实际上是字符串。我会删除接口并使用let x: keyof typeof browserPrefix;
The next problem is the way typescript defined the CSSStyleDeclarationinterface. It only include standard properties, not vendor specific ones.
下一个问题是 typescript 定义CSSStyleDeclaration接口的方式。它只包括标准属性，不包括供应商特定的属性。
You could a type assertion to tell the compiler you know what you are doing and ignore the error
您可以使用类型断言告诉编译器您知道自己在做什么并忽略错误
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];
}
}
}
You could also extend with CSSStyleDeclarationwith the vendor specific keys you require.
您还可以使用CSSStyleDeclaration所需的供应商特定密钥进行扩展。
