1

Hope one of you angular2 / typescript wizards can help out or at least provide a pointer in the right direction, before I got crazy :-)

Here is what I'd like to

  • have a parent class that implements it's own defined parent Interface, however using Generic Types so I can when creating a child class provide it with the child's specific and tailored class & data Interface.
  • the child class should be able to extend the parent data class by
    • being able to overwrite default/parent set variables
    • overwriting parent functions() and have the child's version called instead of the parent's default

In the below pseudo code example, I would like the call to the child's (inherited) someOtherfunction() to return "2"...

Am I asking for too much? I can't seem to find any decent examples on the web...

How do I get this right?

Thank you - Oliver

(CODE BELOW MAY BE BROKEN, IT'S JUST FOR ILLUSTRATION)

// 
// Parent Class
// 

export interface ICoreData <T> {
    observeItems: Observable <T[]> ;
    items: Array <T>;
}

@Injectable()
export class CoreData<T> implements ICoreData<T> {

    public observeItems: Observable<T[]>;
    private items: Array<T>;

    constructor( 'Dependency Injection...' ) {}

    coreFunction(): number {
        return 1;
    }
    someOtherfunction(){
        return this.coreFunction();
    }
}

// 
// Child class
// 

export interface IMyDataStructure {
    name: string;
    age: string;    
}

export interface ISpecificData extends ICoreData<IMyDataStructure> {
    someExtraKey: number;
}

@Injectable()
export class SpecificData extends CoreData<IMyDataStructure> implements ISpecificData {

    constructor() {
        super();
    }

    coreFunction(): number{
        // 
        // This function should "overwrite" the parent's original function 
        // and be called by the parent's someOtherfunction() function 
        // 
        return 2;
    }
}
Improve this question
3
  • And what problem do you have with the code above? There's no child class there, btw. Commented Mar 16, 2017 at 12:55
  • Why are the classes annotated with @Injectable()? Is your problem with dependency injection? Commented Mar 16, 2017 at 13:02
  • The above doesn't compile; while I gave it my best try, it seems to be the wrong or at least not fully correct approach to what I want to achieve (as per my description). Re: DI , I haven't even gotten that far to test. Commented Mar 16, 2017 at 15:48

1 Answer 1

Reset to default
5

You're not asking too much. However you can't use interfaces to accomplish what you're trying to accomplish. You need to extend a class, which can be generic.

An interface is simply a contract, or a blueprint if you like, for a data type. There is no functionality associated with an interface. However in your case you wanted to be able to have methods on the base class; methods you could override in the derived.

The way I usually do this is to declare an abstract base class (so that the base class can't be instantiated itself), and then extend classes from that. Here's an example:

Note, I've removed all the Angular2 cruft in order to keep the example as simple as possible. 

abstract class Base<T> {
  constructor(public controlled: T) { }

  doIt(): string {
    return `Base.doIt: ${JSON.stringify(this.controlled)}`;
  }

  doSomethingElse(): string {
    return `Base.doSomethingElse: ${JSON.stringify(this.controlled)}`;
  }
};

interface Foo {
  foo: string;
  bar: string;
};

class Derived extends Base<Foo> {
  constructor(foo: Foo) {
    super(foo);
  }

  doSomethingElse(): string {
    return `Derived.doSomethingElse: ${JSON.stringify(this.controlled)}`;
  }
};

let d: Derived = new Derived({ foo: 'foo', bar: 'bar' });

console.log(`doIt ==> ${d.doIt()}`);
console.log(`doSomethingElse ==> ${d.doSomethingElse()}`);

Output: 

doIt ==> Base.doIt: {"foo":"foo","bar":"bar"} 
doSomethingElse ==> Derived.doSomethingElse: {"foo":"foo","bar":"bar"}

Playground link.

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

4 Comments

Thank you, John. The Interface part I added bc I thought I needed this to ensure app wide auto-complete / check of class methods and varying data (structures). Which could be different per child. Ie. in your case it could be Foo for one child, and FooFoo (with other data attributes for another. Base / child functions: You example doesn't touch on the two functions interacting, eg.: Base: doIt(): string { return doSomethingElse(); } - so if base.doIt() would call base.doSomething() would then child('base inherited').doIt() call child.doSomething() ?
Oh, and last one: can I use the above as an Injectable service? Ie. not using with a new Derived() approach
Btw. THANK YOU for the Playground link, that service is worth pure gold. With your pointers and the option to quickly test...I got it....posted below.
I was going to post the answer...but can't anymore...lol...who did I offend here??

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.