Erweiterte Array arbeitet in Angular Komponentensicht, aber nicht Angular Komponentenklasse

Question

Ich bin der Javascript Basis Array-Objekt für eine Angular App Typoskript über den folgenden Code erstreckt:

Datei: utilities.ts

// --- Extends Array object to include a getIndexBy method. --- 
interface Array<T> { 
    getIndexBy(name: string, value: T): number; 
} 

// --- Returns the index of an object based on the name and value passed into the method. 
Array.prototype.getIndexBy = function(name, value) { 
    for (let i = 0; i < this.length; i++) { 
     if (this[i][name] === value) { 
      return i; 
     } 
    } 
}; 

Datei: app.component.ts

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 
    items: Array<{ name: string, age: number }> = [{ 
     name: 'steve', 
     age: 20 
    }, { 
     name: 'bob', 
     age: 12 
    }, { 
     name: 'john', 
     age: 40 
    }]; 

    constructor() { 
     console.log(this.items.getIndexBy('age', 20)); 
     // ERROR - Argument of type '20' is not assignable to parameter of type '{ name: string; age: number; }' 
    } 
} 

Datei: app.component.html

<h1> 
    {{title}} 
</h1> 
<hr> 
{{items.getIndexBy('age', 12)}} <!-- Works as expected --> 
{{items.getIndexBy('name', 'john')}} <!-- Works as expected --> 

Wie kann ich die erweiterte Array-Methode in der Ansicht verwenden, aber nicht in der Komponentenklasse?

Answer 1

Sie erhalten einen Typoskriptfehler, weil die Typen nicht übereinstimmen. Sie definierten getIndexBy wie folgt:

Wo T ist der Typ des Arrays. Ihr Array ist Array < {name: string, age: number}>, also überschreitet die Übergabe 20 nicht {name: string, age: number}. Wie Sie das beheben können, hängt davon ab, was Sie vorhaben. Wollten Sie getIndexBy zu einem Generikum machen?

Sie sehen diesen Fehler nur in der .ts-Datei und nicht in der .html-Datei, da die Typoskript-Überprüfung nicht in der .html-Datei erfolgt.

Answer 2

Aktualisierung der Dienstprogramme Datei mit den folgenden behobenen das Problem.

interface Array<T> { 
    getIndexBy<U>(name: string, value: U): number; 
}