绑定元素“索引”隐式具有“任何”类型答案

【问题标题】：Binding element 'index' implicitly has an 'any' type绑定元素“索引”隐式具有“任何”类型
【发布时间】：2017-04-06 08:56:07
【问题描述】：

使用demo project of angular2-mdl 作为指导，我移植了选项卡组件并尝试按如下方式实现它：

import { Component } from '@angular/core';

@Component({
    selector: 'my-dashboard',
    templateUrl: './landing.my.html'
})
export class MyDashboard {
    public activeIndex = 0;

    public tabChanged({index}): void {
        this.activeIndex = index;
    }

}

模板是：

<mdl-tabs mdl-ripple mdl-tab-active-index="0" (mdl-tab-active-changed)="tabChanged($event)">
    <mdl-tab-panel mdl-tab-panel-title="home">
        <mdl-tab-panel-title>
            <mdl-icon class="mdl-color-text--primary">home</mdl-icon><span>Home</span>
        </mdl-tab-panel-title>
        <mdl-tab-panel-content>
            <ul>
                <li>Stanis</li>
                <li>Joffrey</li>
            </ul>
        </mdl-tab-panel-content>
    </mdl-tab-panel>
    <mdl-tab-panel mdl-tab-panel-title="something">
        <mdl-tab-panel-title>
            <mdl-icon class="mdl-color-text--primary">group_work</mdl-icon><span>Ontology</span>
        </mdl-tab-panel-title>
        <mdl-tab-panel-content>
            <ul>
                <li>Stanis</li>
                <li>Joffrey</li>
            </ul>
        </mdl-tab-panel-content>
    </mdl-tab-panel>
    <mdl-tab-panel mdl-tab-panel-title="another">
        <mdl-tab-panel-title>
            <mdl-icon class="mdl-color-text--primary">list</mdl-icon><span>Cognitive</span>
        </mdl-tab-panel-title>
        <mdl-tab-panel-content>
            <ul>
                <li>Robert</li>
            </ul>
        </mdl-tab-panel-content>
    </mdl-tab-panel>
    <mdl-tab-panel mdl-tab-panel-title="else">
        <mdl-tab-panel-title>
            <mdl-icon class="mdl-color-text--primary">call_split</mdl-icon><span>Cognition</span>
        </mdl-tab-panel-title>
        <mdl-tab-panel-content>
            <ul>
                <li>Robert</li>
                <li>Renly</li>
            </ul>
        </mdl-tab-panel-content>
    </mdl-tab-panel>
    <mdl-tab-panel mdl-tab-panel-title="last">
        <mdl-tab-panel-title>
            <mdl-icon class="mdl-color-text--primary">backup</mdl-icon><span>Streaming</span>
        </mdl-tab-panel-title>
        <mdl-tab-panel-content>
            <ul>
                <li>Joffrey</li>
                <li>Myrcella</li>
                <li>Tommen</li>
            </ul>
        </mdl-tab-panel-content>
    </mdl-tab-panel>
</mdl-tabs>

我正在使用 webpack，我收到以下错误：

ERROR in [default] home/my-app-ui/src/app/landing.my.ts:10:23 
Binding element 'index' implicitly has an 'any' type.

但是应用程序显示了所需的功能，有人可以解释如何解决这个问题吗？

【问题讨论】：

标签： angular typescript material-design angular2-mdl

【解决方案1】：

对于一个对象，你需要将类型声明为

{index} : {index:any}

【讨论】：

你拯救了我的一天！对于具有更多道具的对象：{a,b} : {a:any, b:any}
你也拯救了我的一天
如果你的数组看起来像这样，你会怎么做： { component, ...props } 我试过 { component, ...props }: { component: any, props: any } ，但这给了我 props 参数的错误
使用any 就像把灰尘放在地毯下。以后会咬你的

【解决方案2】：

使用any 或特定类型的变量，例如（数字、字符串等）

public tabChanged(index:any): void {
    this.activeIndex = index;
}

【讨论】：

这个函数最好声明 index:number

【解决方案3】：

这是对类型脚本编译器的检查。您可以删除检查或在声明中明确指定任何类型（来自@Thyagu 的回答）。在tsconfig.json 文件中，您可以更改行

"noImplicitAny": false,

到

"noImplicitAny": true,

【讨论】：

还是反过来？

【解决方案4】：

对于一个对象，你需要这样声明一个道具：

{propA} : {propA:any}

拥有多个道具：

{propA, propB} : {propA:any, propB:any}

【讨论】：

【解决方案5】：

"suppressImplicitAnyIndexErrors": true //tsconfig.json

即使 noImplicitAny 标志为真，您也可以将变量的类型设置为 any。

【讨论】：