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>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>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>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>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>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 ?
8 Answers
For an object, you need to declare the type as:
{index} : {index:any}For objects with more props:
{a,b} : {a:any, b:any}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}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,use any or specific type of the variable like ( numbers,string,etc )
public tabChanged(index:any): void { this.activeIndex = index;
}"suppressImplicitAnyIndexErrors": true //tsconfig.json You can set a variable's type to any even when the noImplicitAny flag is true.
0If you are looking for a React Native, Typescript answer
const MainHome = ({props}:any) => {
}Add suppressImplicitAnyIndexErrors within compilerOptions in tsconfig.json file. Example:
"compilerOptions": { "suppressImplicitAnyIndexErrors": true
}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
