绑定元素“index”隐式具有“any”类型

Question

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

    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，并且收到以下关于隐式任何类型的 TypeScript 错误：

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

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

Answer 1

对于对象，需要将类型声明为：

{index} : {index:any}

对于有更多道具的物体：

{a,b} : {a:any, b:any}

Answer 2

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

{propA} : {propA:any}

有多个道具：

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

Answer 3

它是类型脚本编译器的检查。您可以删除检查或在声明中明确指定任何类型（来自@Thyagu 的回答）。 在

tsconfig.json

文件中，您可以更改行

"noImplicitAny": false,

到

"noImplicitAny": true,

Answer 4

使用

any

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

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

Answer 5

如果您正在寻找 React Native、Typescript 答案

const MainHome = ({props}:any) => {
  
}

Answer 6

"suppressImplicitAnyIndexErrors": true //tsconfig.json 

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

Answer 7

在

tsconfig.json

文件的

suppressImplicitAnyIndexErrors

内添加 compilerOptions。示例：

"compilerOptions": {
   "suppressImplicitAnyIndexErrors": true
}

Answer 8

您可以尝试以下解决方案：转到项目目录中的“ts config.JSON”文件。找到文件中的“strict”属性并将其值从“true”更改为“false”。此修改放宽了一些严格的类型脚本编译器检查，这可能有助于解决您面临的问题。但是，请记住，禁用严格检查可能会导致潜在的类型错误或代码质量下降，因此建议将此作为临时修复方案，并在可能的情况下考虑替代解决方案。谢谢