확장 배열 각도 구성 요소보기에서 작동하지만 각도 구성 요소 클래스

Question

나는 다음과 같은 코드를 통해 타이프 라이터를 사용하여 각도 앱 자바 스크립트 기본 배열 객체를 확장하고있다 : 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; 
     } 
    } 
}; 

:

파일

파일 :

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 : app.component.html를

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

뷰에서 확장 배열 메서드를 사용할 수 있지만 구성 요소 클래스에서는 사용할 수 없습니다.

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