CODEWITHSUNDEEP
typescript
AngryHacker
AngryHacker

Reputation: 61616

How to export a class and have an interface in the same file?

Consider the following TypeScript file:

// declare a jquery plugin, so that it can be used in the class
interface JQueryStatic {
  plot(arg: any, arg2: any, arg3: any): JQueryStatic;
}

export class Foo {
  public plotThings() {
    $.plot('#myDiv');  // ERROR HERE
                       // TS2339  (TS) Property 'plot' does not exist on type 'JQueryStatic'
  }              
}

So it fails to find the plot method. However, if I remove export from the class declaration, the file compiles fine.

So, how can I have both the JQueryStatic interface (to be able to use a jQuery plugin) and an exported class?

Upvotes: 1

Views: 430

Answers (1)

Alex Wayne
Alex Wayne

Reputation: 187054

You can't just extend an interface declared somewhere else like that. Typescript namespaces everything per file, so it has no way to know you mean the global interface declared by the jQuery type definitions.

So create a jquery.d.ts file to have your jQuery specific extensions in and add this, making it clear you mean the global one.

declare global {
    interface JQuery {
        plot(arg: any, arg2: any, arg3: any): JQuery;
    }
}

Playground

Upvotes: 1

Related Questions