在 TypeScript 上优化 AngularJS 1.5.7 指令 - ...args 不起作用并且封装了 2 个类

Posted 2023-03-13

【中文标题】在 TypeScript 上优化 AngularJS 1.5.7 指令 - ...args 不起作用并且封装了 2 个类

【英文标题】：Optimize AngularJS 1.5.7 directive on TypeScript - ...args not working and 2 classes are encapsulated

【发布时间】：2018-03-23 08:30:42

【问题描述】：

我正在开发一个使用 AngularJS 1.5.7 开发的旧项目。我想将 TypeScript 用于新开发的东西。所以只有新添加的东西应该在 TypeScript 中 - 目前没有完全迁移。

我找到了如何在 AngularJS 上使用 TypeScript 编写指令。

import * as angular from 'angular';

angular
    .module('starter.directives')
    .directive('lateralScrollbar', ['$timeout', ($timeout) =>
        new (class 
            restrict = 'A';

            constructor(
                private $timeout
            )  

            link(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) 
                let directive = this;

                new (class 
                    constructor(
                        scope: ng.IScope,
                        element: ng.IAugmentedJQuery,
                        attrs: ng.IAttributes
                    ) 
                        scope.something = 'Loading';
                        /** 1. How to optimize hat "directive" is not needed here? Maybe that I can use "this" instead or "parent" */
                        directive.$timeout(() => scope.something = 'OK', 1000);
                    
                )(scope, element, attrs);
            
            /** 2. How to optimize that I can pass the arguments with that the function was called. For example fn.apply(); and ...args? */
        )($timeout)
    ]);

可以看到有2个cmets。

这里不需要如何优化帽子“指令”？也许我可以改用“this”或“parent” 如何优化我可以传递调用函数的参数。例如 fn.apply();和 ...args？

所以第一个很有趣。我想。目前，我尽可能正常地调用该指令，并在最后使用一组依赖项和函数。 但是有它不必要的复杂性:-( 这个函数在其中创建一个类的对象。然后这个类有一个链接函数，它将directive 定义为this，这样我就可以在其中使用传递的参数。 （即 $timeout）。

第二件事是我现在将$timeout 变量定义了四次。 1 x 对 Angular 指令的依赖项。 1 x 类的构造函数。第一类初始化的 1 个 x 参数。 1 x in function，它是第一个类的包装器。

所以这是我的一次尝试，但它失败了，因为它无法处理 ...args 的事情。不知道怎么优化。

import * as angular from 'angular';

angular
    .module('starter.directives')
    .directive('lateralScrollbar', ['$timeout', (...args) =>
        new (class 
            restrict = 'A';

            constructor(
                private $timeout
            )  

            link(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) 
                let directive = this;

                new (class 
                    constructor(
                        scope: ng.IScope,
                        element: ng.IAugmentedJQuery,
                        attrs: ng.IAttributes
                    ) 
                        scope.something = 'Loading';
                        /** 1. How to optimize hat "directive" is not needed here? Maybe that I can use "this" instead or "parent" */
                        directive.$timeout(() => scope.something = 'OK', 1000);
                    
                )(scope, element, attrs);
            
            /** 2. How to optimize that I can pass the arguments with that the function was called. For example fn.apply(); and ...args? */
        )(args)
    ]);

错误：TS2554：预期有 1 个参数，但得到了 0。

也许有人可以帮助我 :-) 提前致谢！

【参考方案1】：

使用类型脚本，首先你必须使用类创建指令，然后你必须通过类的工厂方法将类声明为角度应用程序指令。

通过以下参考链接更好地理解。

Reference 1 Reference 2