Question

我尝试使用AngularJS 1.5和TypeScript 1.7创建指令，以便我可以进行一些自定义表单验证。

I've followed this example但是Typescript给了我类型＆＃39; Type＃当我扩展ng.INgModelController

时

interface IOneItemRequiredValidator extends ng.INgModelController {
    $validators: {
        oneItemRequired(modelValue: any, viewValue: any) : boolean;
    };
}

我已经检查了$ validator及其IModelValidators类型，但签名如下：

interface IModelValidators {
    [index: string]: (modelValue: any, viewValue: any) => boolean;
}

所以我试着遵循它，现在TypeScript没有抱怨，但是当我尝试访问$ validators对象的新属性时，它无法找到它。

interface IOneItemRequiredValidator extends ng.INgModelController {
    $validators: {
        [oneItemRequired: string]:  (modelValue: any, viewValue: any) => boolean;
    };
}


angular
    .module('app')
    .directive('oneItemRequired', () => {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes, controller: IOneItemRequiredValidator) => {
                controller.$validators.oneItemRequired = (modelValue, viewValue) => {
                        return viewValue !== null && viewValue !== undefined && viewValue.length > 0;
                    }
                }
            };
        });

我是否错误地声明了我的新IOneItemRequiredValidator接口？谢谢！

Answer 1

我没有在TypeScript上使用Angular 1，但一般来说，在TypeScript中，你给它们的名字根本没有区别。您只是说您接受在界面中未命名的任何额外属性。

这意味着实际的Angular声明文件是应该在IModelValidators声明中添加此位的文件。有关详细信息，请参阅here。

旧方法的问题是具有单个函数oneItemRequired的对象的类型与IModelValidators类型不兼容。

您可以通过以下两种方式之一解决问题：

（1）只需放回索引器，如：

interface IOneItemRequiredValidator extends INgModelController {
    $validators: {
        oneItemRequired(modelValue : any, viewValue : any) : boolean;
        [otherProps: string]:  (modelValue: any, viewValue: any) => boolean;
    };
}

A simple non-Angular example

（2）手动扩展界面，如：

interface IOneItemRequiredNgModelValidators
    extends ng.IModelValidators {
        oneItemRequired(modelValue : any, viewValue : any) : boolean;       
    }

interface IOneItemRequiredValidator extends ng.INgModelController {
    $validators: IOneItemRequiredNgModelValidators
}

A simple non-Angular example

第一个是较少的代码，只是为了真正服务于该工具，除了它有点hacky。第二个感觉很酷，但它更适合工具。所以，我会让你选择：）

让我知道他们是否适合你。

干杯，

使用$ validators在Type - AngularJS + TypeScript验证中缺少索引签名

1 个答案: