angular - Bağlama elemanı 'index' gizli olarak 'any' türüne sahiptir

Angular2-mdl'in demo projesini bir rehber olarak kullanarak tab bileşenini taşıdım ve bunu şu şekilde uygulamaya çalıştım:

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

ve şablon:

    <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 kullanıyorum ve aşağıdaki TypeScript hatasını örtük any türleri ile ilgili alıyorum:

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

Ancak uygulama istenen işlevselliği gösteriyor, bunu nasıl düzelteceğimi biri açıklayabilir mi?

Cevap #1

Bir nesne için, türü şu şekilde bildirmeniz gerekir:

{index} : {index:any}

Daha fazla özelliğe sahip nesneler için:

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

Cevap #2

bir nesne için, bir özellik ile bu şekilde deklarasyon yapmanız gerekir:

{propA} : {propA:any}

birden fazla özelliğe sahip:

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

Cevap #3

Bu, tür script derleyicisinin bir kontrolüdür. Kontrolü ya kaldırabilir ya da bildiride açıkça any türünü belirtebilirsiniz (@Thyagu'dan cevap). tsconfig.json dosyasında, satırı değiştirebilirsiniz

"noImplicitAny": false,

için

"noImplicitAny": true,

Cevap #4

Değişken için any veya sayı, string gibi belirli bir tür kullanın

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

İlgili makaleler