How to avoid duplication interface in TypeScript

Question

I am learning TypeScript and I do not understand things about interface.

interface IMyClass extends MyClass {
    color: number;
    IsResizable: boolean;
    title: string;
}

class MyClass {
    added: string;
    //color: number;
    //IsResizable: boolean;
    //title: string;

    constructor(element: HTMLElement) {
    }

    test() {
        var that: IMyClass = <IMyClass>this; // Error
    }
}

I got this error:

Severity    Code    Description Project File    Line    Suppression State
Error   TS2352  Neither type 'this' nor type 'IMyClass' is assignable to the other.
  Type 'MyClass' is not assignable to type 'IMyClass'.
  Property 'color' is missing in type 'MyClass'.    TypeScrip   app.ts  17  Active

The error disappear if I uncomment attributes. So my question is : do I have to duplicate interface attributes into my class ? What if I have a huge interface? Any other solution?

maybe reading the documentation for interfaces from the handbook will help clarify the role of the interfaces in Typescript? typescriptlang.org/docs/handbook/interfaces.html — toskv
– toskv, Commented Jul 12, 2016 at 9:03
Maybe you can explain what you're trying to do? Usually it goes the other way around, the class implements an interface. — Nitzan Tomer
– Nitzan Tomer, Commented Jul 12, 2016 at 9:04
You defined an interface which is a subclass of MyType. Just think about it, MzClass doesnt have color, yet you try to assign it to IMyClass — Tamas Hegedus
– Tamas Hegedus, Commented Jul 12, 2016 at 9:05
@bassarat 's book on typescript has a pretty useful short chapter on that subject too. basarat.gitbooks.io/typescript/content/docs/types/ambient/… — toskv
– toskv, Commented Jul 12, 2016 at 9:05

Radim Köhler · Accepted Answer · 2016-07-12 09:09:28Z

1

In case, that it really makes sense to do that conversion, we can use double assertion:

// error
var that: IMyClass = <IMyClass>this; // Error
// firstly to any, then to some type
var that: IMyClass = <IMyClass><any>this; // Error

Check it in action in the TS playground

answered Jul 12, 2016 at 9:09

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

3 Comments

lokoum Over a year ago

Yeah, I know about the double assertion. But all in TypeScript is about strongly typed variables/objects/etc... so there are no alternatives to the use of <any>

Radim Köhler Over a year ago

I am answering your question "...Any other solution?" ... because you are breaking the concept. You are trying to cast one object to another, while TS compiler is telling you "it won't work". So, I showed you, how to go around in super extreme scenarios... but in general.. avoid that. Just cast (assert) what really makes sense.. what does fulfill the required interface... Hope it helps a bit ;)

lokoum Over a year ago

Ok thank you for your help. I will try to restructure my code to avoid using any

Collectives™ on Stack Overflow

How to avoid duplication interface in TypeScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related