试图调用自定义筛选结果“的错误TS2349：不能援引一名前pression其类型缺少调用签名” [英] Trying to invoke custom filter results in 'error TS2349: Cannot invoke an expression whose type lacks a call signature'

问题描述

我试图从一个角度控制器调用自定义过滤器，但我得到的错误：
不能援引一名前pression其类型缺少调用签名。

我实现它像这样在最后一个项目我的工作，所以我很茫然，什么是错的。

过滤器并不在这一点上包含任何逻辑，因为我需要得到它首先进行编译。

下面是过滤器：

  ///＆lt;参考路径=../../分型/ reference.ts/＆GT;模块的应用程序{
使用严格的;/ **
 *过滤模型
 * /
出口类ModelFilter {
    公共静态厂（）{
        复位功能（输入：字符串）{
            的console.log（输入）;
            返回输入;
        }
    }
}angular.module（应用）
    .filter（'modelFilter'，[ModelFilter.Factory]）;
}
 

和控制器，其中其名为：

  ///＆lt;参考路径=../../分型/ reference.ts/＆GT;模块的应用程序{
使用严格的;接口ISearchController {
    车辆：IVehicles;
    车型：任何;
    setVehicles（）：无效;
    updateModels（品牌：字符串）：无效;
}类SearchController实现ISearchController {    静态$注射= [
        VehicleMakeService'，
        VehicleModelService'，
        '$过滤器
    ];
    构造函数（私人vehicleMakeService：VehicleMakeService，
                私人vehicleModelService：VehicleModelService，
                私人$过滤器：ng.IFilterService，
                公共车辆：IVehicles，
                大众车型：任何）{        this.setVehicles（）;
    }    setVehicles（）{无效
        this.vehicleMakeService.getVehicles（）然后（（数据）=方式＆gt; {
            this.vehicles =数据;
        }）;
    }    updateModels（品牌：字符串）：无效{        VAR测试= $这个过滤器（'modelFilter'）（使）。 //这里的错误
    }
}
。angular.module（应用），控制器（'SearchController'，SearchController）;
}
 

reference.ts：

  ///＆lt;参考路径=./ tsd.d.ts/＆GT;//咕噜启动
///＆lt;参考路径=../应用程序/ app.config.ts/＆GT;
///＆lt;参考路径=../应用程序/ app.module.ts/＆GT;
///＆lt;参考路径=../应用程序/ app.route.ts/＆GT;
///＆lt;参考路径=../应用程序/家/ home.controller.ts/＆GT;
///＆lt;参考路径=../应用程序/家/ home.route.ts/＆GT;
///＆lt;参考路径=../应用程序/模型/ vehicles.model.ts/＆GT;
///＆lt;参考路径=../应用程序/结果/ results.controller.ts/＆GT;
///＆lt;参考路径=../应用程序/结果/ results.route.ts/＆GT;
///＆lt;参考路径=../应用程序/服务/ cars.service.ts/＆GT;
///＆lt;参考路径=../应用程序/服务/ vehicles.make.service.ts/＆GT;
///＆lt;参考路径=../应用程序/服务/ vehicles.models.service.ts/＆GT;
///＆lt;参考路径=../应用程序/模板/ search.controller.ts/＆GT;
///＆lt;参考路径=../应用程序/模板/ search.filter.ts/＆GT;
//咕噜端
 

tsd.d.ts：

  ///＆lt;参考路径=angularjs / angular.d.ts/＆GT;
///＆lt;参考路径=jQuery的/ jquery.d.ts/＆GT;
///＆lt;参考路径=角UI路由器/角-UI-router.d.ts/＆GT;
///＆lt;参考路径=angularjs /角resource.d.ts/＆GT;
 

解决方案

修改工作的例子：

  ///＆lt;参考路径=分型/ angularjs / angular.d.ts/＆GT;模块的应用程序{    //＆添加的LT; ---改进！
    导出接口MyModelFilter扩展ng.IFilterService {
        （名称：modelFilter'）：（输入：字符串）=＆GT;串;
    }    / **
     *过滤模型
     * /
    出口类ModelFilter {
        公共静态厂（）{
            复位功能（输入：字符串）{
                的console.log（输入）;
                返回输入;
            }
        }
    }    angular.module（应用）
        .filter（'modelFilter'，[ModelFilter.Factory]）;
}模块的应用程序{    类SearchController {
        构造函数（私人$过滤器：MyModelFilter）{//＆LT; ---改进！
        }        updateModels（品牌：字符串）：无效{
            VAR测试= $这个过滤器（'modelFilter'）（使）。
        }
    }
    。angular.module（应用），控制器（'SearchController'，SearchController）;
}
 

问题在于打字稿使用以下定义：

  / **
 * $过滤器 -  $ filterProvider  - 模块纳克服务
 *
 *过滤器用于格式化显示给用户的数据。
 *
 *请参阅https://docs.angularjs.org/api/ng/service/$filter
 * /
接口IFilterService {
    （名称：'过滤器'）：IFilterFilter;
    （名称：货币）：IFilterCurrency;
    （名称：数字）：IFilterNumber;
    （名称：'日期'）：IFilterDate;
    （名称：'JSON'）：IFilterJson;
    （名称：小写）：IFilterLowercase;
    （名称：'大写'）：IFilterUppercase;
    （名称：limitTo'）：IFilterLimitTo;
    （名称：排序依据）：IFilterOrderBy;
    / **
     *使用方法：
     * $滤波器（名）;
     *
     *过滤功能的@参数名称名称检索
     * /
    ＆LT; T＆GT;（名称：字符串）：笔;
}
 

为这一点。$滤波器（'modelFilter'）。这意味着，最后一个规则（即＆LT; T＆GT;（名称：字符串）：笔; ）被使用。因此，这一点。$滤波器（'modelFilter'）的类型为 ng.IFilterService 和打字稿不知道任何有关你的 ModelFilter 。

您可以通过添加新的界面如图所示的第一code这个问题上解决问题。

您说，原来code在你的另一个项目工作，但似乎不太可能的，我必须 reference.ts 莫名其妙地被修改。

I am attempting to invoke a custom filter from an Angular controller but I get the error: 'Cannot invoke an expression whose type lacks a call signature'.

I implemented it like this on the last project I worked on so I am at a loss as to what is wrong.

The filter does not contain any logic at this point as I need to get it compiling first.

Here is the filter:

/// <reference path="../../typings/reference.ts" />

module app {
'use strict';

/**
 * Filter models
 */
export class ModelFilter {
    public static Factory() {
        return function(input: string) {
            console.log(input);
            return input;
        }
    }
}

angular.module('app')
    .filter('modelFilter', [ModelFilter.Factory]);
}

And the controller where its called:

/// <reference path="../../typings/reference.ts" />

module app {
'use strict';

interface ISearchController {
    vehicles: IVehicles;
    models: any;
    setVehicles(): void;
    updateModels(make: string): void;
}

class SearchController implements ISearchController {

    static $inject = [
        'VehicleMakeService',
        'VehicleModelService',
        '$filter'
    ];
    constructor(private vehicleMakeService: VehicleMakeService,
                private vehicleModelService: VehicleModelService,
                private $filter: ng.IFilterService,
                public vehicles: IVehicles,
                public models: any) {

        this.setVehicles();
    }

    setVehicles(): void {
        this.vehicleMakeService.getVehicles().then((data) => {
            this.vehicles = data;
        });
    }

    updateModels(make: string): void {

        var test = this.$filter('modelFilter')(make); // Error here
    }
}
angular.module('app').controller('SearchController', SearchController);
}

reference.ts:

/// <reference path="./tsd.d.ts" />

//grunt-start
/// <reference path="../app/app.config.ts" />
/// <reference path="../app/app.module.ts" />
/// <reference path="../app/app.route.ts" />
/// <reference path="../app/home/home.controller.ts" />
/// <reference path="../app/home/home.route.ts" />
/// <reference path="../app/models/vehicles.model.ts" />
/// <reference path="../app/results/results.controller.ts" />
/// <reference path="../app/results/results.route.ts" />
/// <reference path="../app/services/cars.service.ts" />
/// <reference path="../app/services/vehicles.make.service.ts" />
/// <reference path="../app/services/vehicles.models.service.ts" />
/// <reference path="../app/templates/search.controller.ts" />
/// <reference path="../app/templates/search.filter.ts" />
//grunt-end

tsd.d.ts:

/// <reference path="angularjs/angular.d.ts" />
/// <reference path="jquery/jquery.d.ts" />
/// <reference path="angular-ui-router/angular-ui-router.d.ts" />
/// <reference path="angularjs/angular-resource.d.ts" />

解决方案

Modified working example:

/// <reference path="typings/angularjs/angular.d.ts" />

module app {

    // ADDED <--- MODIFIED!
    export interface MyModelFilter extends ng.IFilterService {
        (name: 'modelFilter'): (input: string) => string;
    }

    /**
     * Filter models
     */
    export class ModelFilter {
        public static Factory() {
            return function(input: string) {
                console.log(input);
                return input;
            }
        }
    }

    angular.module('app')
        .filter('modelFilter', [ModelFilter.Factory]);
}

module app {

    class SearchController {
        constructor(private $filter: MyModelFilter) { // <--- MODIFIED!
        }

        updateModels(make: string): void {
            var test = this.$filter('modelFilter')(make);
        }
    }
    angular.module('app').controller('SearchController', SearchController);
}

The problem is that TypeScript uses the following definition:

/**
 * $filter - $filterProvider - service in module ng
 *
 * Filters are used for formatting data displayed to the user.
 *
 * see https://docs.angularjs.org/api/ng/service/$filter
 */
interface IFilterService {
    (name: 'filter'): IFilterFilter;
    (name: 'currency'): IFilterCurrency;
    (name: 'number'): IFilterNumber;
    (name: 'date'): IFilterDate;
    (name: 'json'): IFilterJson;
    (name: 'lowercase'): IFilterLowercase;
    (name: 'uppercase'): IFilterUppercase;
    (name: 'limitTo'): IFilterLimitTo;
    (name: 'orderBy'): IFilterOrderBy;
    /**
     * Usage:
     * $filter(name);
     *
     * @param name Name of the filter function to retrieve
     */
    <T>(name: string): T;
}

for this.$filter('modelFilter'). It means that the last rule (i.e. <T>(name: string): T;) is used. Consequently, this.$filter('modelFilter') is of type ng.IFilterService and TypeScript does not know anything about your ModelFilter.

You can solve the problem by adding a new interface as shown in the first code listing.

You said that the original code worked in another project of yours but it seems very unlikely to me unless reference.ts was somehow modified.

这篇关于试图调用自定义筛选结果“的错误TS2349：不能援引一名前pression其类型缺少调用签名”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！