Angularjs 1.x 中的打字稿继承答案

【问题标题】：Typescript inheritance in Angularjs 1.xAngularjs 1.x 中的打字稿继承
【发布时间】：2016-05-10 15:11:15
【问题描述】：

我正在尝试使用其他服务可以继承 n Angularjs 的方法和属性创建一个抽象类服务。使用 typescripts 扩展方法将不起作用，或者如果做得正确我不会，所以尝试使用这种模式，但遗憾的是它也不起作用。 Typescript 不知道从原型继承中继承的方法。他们有任何解决方法或解决方案吗，谢谢您的帮助

抽象服务类的示例代码

'use strict';

namespace Data {
export interface IAbstractRepository {
    sayHellow(): string;
}

class AbstractRepository implements IAbstractRepository{  
    static extend = function (repoCtor): void {
        repoCtor.prototype = new AbstractRepository();
        repoCtor.prototype.constructor = repoCtor;
    };
    sayHellow(): string {
        return 'Hello world';
    }
}
function factory(): IAbstractRepository {
    return AbstractRepository;
}
angular.module('core').factory('AbstractRepository', factory);
}

对于子服务类

'use strict';

namespace Data{
class BookRepository {
    constructor(AbstractRepository) {
         AbstractRepository.extend(this);
    }

    getAllBooks(): string {
     // this shows as an error now it cant know that its inherited 
        return this.sayHellow();
    }
}
factory.$inject = ['AbstractRepository'];
function factory(AbstractRepository): any {
    return new BookRepository(AbstractRepository);
}
angular.module('core').factory('BookRepository', factory);
}

对于提出的解决方案，将 JshintRC 的标志降低以抑制 Typescript 产生的警告 "validthis": true and "shadow": "false

【问题讨论】：

能否详细说明"Using typescripts extend method would not work"，不工作是什么意思？还有"Typescript does not know the inherited methods from the prototypal inheritance"，你能举个例子吗？
在原型继承情况下，编译器将超级方法显示为子类中的错误“带有消息的红色波浪线：类中不存在错误方法”。在使用扩展类型脚本继承的情况下，我忘记了发生了什么，但我记得 jslint 和 jshint 丢失了它，原因是命名空间或模块重新定义了 ifi 和其他错误。我会尝试再次使用 Typescripts 的方式来记录错误。

标签： javascript angularjs inheritance typescript prototypal

【解决方案1】：

你的问题不是很清楚，即使你回答了我的问题的评论我仍然不确定问题是什么。

我不是 Angular 开发人员，所以我无法回答 Angular 特定的问题，但随着打字稿中的继承，这就是你的做法：

namespace Data {
    export interface IAbstractRepository {
        sayHellow(): string;
    }

    abstract class AbstractRepository implements IAbstractRepository {
        constructor() {}
        
        sayHellow(): string {
            return 'Hello world';
        }
    }

    
    class BookRepository extends AbstractRepository {
        constructor() {
            super();
        }

        getAllBooks(): string {
            return this.sayHellow();
        }
    }
    
    angular.module("core").factory("BookRepository", BookRepository);
}

如果你能告诉我这有什么问题，那么我也许可以帮你解决这个问题。

编辑

由于游乐场网址对于 cmets 来说太长了，here it is。

【讨论】：

我已经尝试过您建议的这种方法，但是当我使用 jshint 和 jslint 时出现错误，我是否应该忽略以下消息：var __extends = (this && this.__extends) || function (d, b) { ^ 可能严格违反。 var __extends = (this && this.__extends) || function (d, b) { ^ 可能严格违反。函数 __() { this.constructor = d; } ^ 可能严格违反。 function BookRepository() { ^ 'BookRepository' 已定义。
没有使用过那些，所以不确定他们抱怨什么，但是如果你在操场上尝试代码（网址太长，无法发表评论，所以我会用链接编辑我的答案)，然后您可以尝试运行编译后的 js 输出并查看它是否正常工作。
我运行了它，谢谢，它只是 jslint 和 jshint 抱怨从 typescript 生成的所有全局变量我会尝试找到抑制警告的方法。再次感谢您的帮助
是的，我也不太喜欢这些