拡張アレイは、角度成分のビューで動作ではなく、角度成分クラス

Question

Iは、次のコードを介して活字体を使用して角度のアプリ用のJavaScriptベース・アレイ・オブジェクトを拡張しています：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; 
     } 
    } 
}; 

：

ファイル

ファイル：app.component.html

：

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

ファイルをapp.component.ts

ビューでは拡張配列メソッドを使用できますが、コンポーネントクラスでは使用できません。

Answer 1

タイプが一致しないため、タイプコピーエラーが表示されます。次のようにgetIndexByを定義しました。

getIndexBy(name: string, value: T): number 

ここで、Tは配列のタイプです。あなたの配列は配列< {name：string、age：number}>です。したがって、渡す20は{name：string、age：number}と一致しません。正確にこれを修正する方法は、あなたの意図が何であるかによって異なります。 getIndexByをジェネリックにすることを意味しましたか？

このエラーは.htmlファイルではなく、.tsファイルでのみ表示されます。これは、.htmlファイルでタイトルスクリプトのチェックが行われないためです。

Answer 2

以下を修正してユーティリティファイルを更新してください。

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