Typescript inheritance in Angularjs 1.x

Question

Am trying to make an abstract class service with methods and properties that other services can inherit n Angularjs. Using typescripts extend method would not work or i don't if am doing it properly, so tried using this pattern but sadly it too did not work. Typescript does not know the inherited methods from the prototypal inheritance. Is their any workaround or a solution to this, thank you for the help

example code for the Abstract service Class

'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);
}

and for the sub service class

'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);
}

for the solution proposed down the flags for JshintRC to suppress warnings produced by Typescript "validthis": true and "shadow": "false

Can you elaborate on "Using typescripts extend method would not work", what do you mean by not working? and "Typescript does not know the inherited methods from the prototypal inheritance", can you give an example? — Nitzan Tomer
– Nitzan Tomer, Commented May 10, 2016 at 15:25
In the prototypal inheritance case the compiler shows the super methods as an error in the subclasses "the red squiggly line with message: error method does not exist on class". In the case of Type script inheritance using extend i forgot what happened, but i remember jslint and jshint lost it cause of the namespace or module redefining with ifi's and other errors as well. i will try using Typescripts way once more to record the errors. — ramon22
– ramon22, Commented May 10, 2016 at 15:39

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Your question is not that clear, even with the comment you answered my question I'm still not sure what the problem is.

I'm not angular developer, so I can't answer angular specific questions, but as inheritance goes in typescript this is how you do it:

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);
}

If you'll tell me what's wrong with this, then I might be able to help you solve that.

Edit

Since the playground url is too long for the comments, here it is.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 10, 2016 at 15:47

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ramon22 Over a year ago

I have tried this method you suggested but i got errors when i used jshint and jslint it freaked me out should i just ignore the messages like: var __extends = (this && this.__extends) || function (d, b) { ^ Possible strict violation. var __extends = (this && this.__extends) || function (d, b) { ^ Possible strict violation. function __() { this.constructor = d; } ^ Possible strict violation. function BookRepository() { ^ 'BookRepository' is already defined.

Nitzan Tomer Over a year ago

Haven't used those so not sure what they complain about, but if you try the code in playground (the url is too long to put in a comment so I'll edit my answer with the link), you can then try to run the compiled js output and see that it works fine.

ramon22 Over a year ago

I ran it it works thanks, it just jslint and jshint complaining about all global variables generated from typescript i will try to find ways to suppress the warnings. Thank you again for your help

Nitzan Tomer Over a year ago

Yeah, I'm not too fond of those as well

Collectives™ on Stack Overflow

Typescript inheritance in Angularjs 1.x

1 Answer 1

Edit

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related