Binding element 'index' implicitly has an 'any' type

Question

Using the demo project of angular2-mdl as a guide I ported the tab component and tried to implement it as follow:

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;
    }

}

and the template is:

<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>

I am using webpack, and i get the following error:

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

however the app displays the desired functionality, can someone explain how to fix this ?

score 228 · Answer 1 · edited Feb 11 '23 at 03:29

228

For an object, you need to declare the type as:

{index} : {index:any}

For objects with more props:

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

edited Feb 11 '23 at 03:29

starball

20,030
7
43
238

answered Sep 05 '19 at 07:38

Jackie

25,199
6
33
24

What do you do if your array looks like this though: { component, ...props } I've tried { component, ...props }: { component: any, props: any }, but that gave me errors with the props argument – Yoshie2000 Oct 23 '20 at 22:01
3

Using `any` is like putting the dust under your rug. It will bite you in the future – Ionel Lupu May 25 '21 at 10:39
1

Works for React TSX too! – anosha_rehan Jan 20 '22 at 11:52

score 35 · Answer 2 · answered Jun 18 '21 at 11:01

35

for an object, you need to declare like this way with one prop:

{propA} : {propA:any}

with more than one prop:

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

answered Jun 18 '21 at 11:01

DemonFilip

881
3
12
24

score 25 · Answer 3 · answered Nov 22 '16 at 16:20

25

It is a check of the type script compiler. You can either remove the check or specify explicitly the any type in the declaration (answer from @Thyagu). In the tsconfig.json file, you could change the line

"noImplicitAny": false,

to

"noImplicitAny": true,

answered Nov 22 '16 at 16:20

Nicolas Henneaux

11,507
11
57
82

7

or the other way around? – Dave Oct 28 '21 at 00:53

score 22 · Accepted Answer · answered Nov 22 '16 at 16:07

22

use any or specific type of the variable like ( numbers,string,etc )

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

answered Nov 22 '16 at 16:07

Thyagarajan C

7,915
1
21
25

For this function much better to declare index:number – Michael Freidgeim May 02 '20 at 23:17
this seems to be the simplest & best answer (especially given that it has the tick), but it didn't work for me; as now the variable I get is not a string anymore after I remove the braces – knocte Sep 11 '22 at 09:20

score 3 · Answer 5 · answered Feb 26 '21 at 20:23

3

"suppressImplicitAnyIndexErrors": true //tsconfig.json

You can set a variable's type to any even when the noImplicitAny flag is true.

answered Feb 26 '21 at 20:23

sweetnandha cse

705
7
16

score 1 · Answer 6 · answered Mar 31 '22 at 19:08

1

Add suppressImplicitAnyIndexErrors within compilerOptions in tsconfig.json file. Example:

"compilerOptions": {
   "suppressImplicitAnyIndexErrors": true
}

answered Mar 31 '22 at 19:08

Aakash Goplani

1,150
1
19
36

score 1 · Answer 7 · answered Jul 20 '23 at 05:50

1

If you are looking for a React Native, Typescript answer

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

answered Jul 20 '23 at 05:50

Lasitha Lakmal

486
4
17

score 0 · Answer 8 · answered Jun 06 '23 at 02:49

you can try the following solution: go to the 'ts config.JSON' file in your project directory. Locate the 'strict' property within the file and change its value from 'true' to 'false'. This modification relaxes some of the strict Type Script compiler checks, which might help resolve the problem you're facing. However, keep in mind that disabling strict checks may lead to potential type errors or decreased code quality, so it's advisable to use this as a temporary fix and consider alternative solutions if possible. thanks

Binding element 'index' implicitly has an 'any' type

8 Answers8

Linked