Question

我正在使用Typescript通过以下代码扩展Angular应用程序的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.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; }'
    }
}

文件：app.component.html

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

为什么我可以在视图中使用扩展数组方法，但不能在组件类中使用？

Answer 1

您收到打字稿错误，因为类型不匹配。你定义了getIndexBy：

{{1}}

其中T是数组的类型。您的数组是Array＆lt; {name：string，age：number}＆gt;，因此传递20与{name：string，age：number}不匹配。具体如何解决这个问题取决于你的意图。你的意思是让getIndexBy成为通用的吗？

您只能在.ts文件中看到此错误，而不是.html文件，因为.html文件上没有进行打字稿检查。

Answer 2

使用以下内容更新实用程序文件已更正此问题。

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

扩展数组在Angular组件视图中工作，但不在Angular组件类中工作

2 个答案: