CODEWITHSUNDEEP
javascriptreactjstypescript
jjwon
jjwon

Reputation: 204

Typescript: Type definitions for Higher Order Components

I'm transitioning a project over to Typescript, and am running into an problem. I use a third-party library react-async-script-loader, so I'm writing a type definition file for it. The library exports a higher order component, but I'm having trouble expressing it in the type definition file.

Here's the file I have right now:

declare module 'react-async-script-loader' {
  import { Component } from 'react';

  class ElementClass extends Component<any, any> {}

  interface ClassDecorator {
    (component: ElementClass): ElementClass;
  }

  function scriptLoader(url: string): ClassDecorator;

  export default scriptLoader;
}

I'm calling the function something like this:

import * as scriptLoader from 'react-async-script-loader';

...

export default scriptLoader(url)(MyComponent);

However, I'm getting this error at the export default statement:

error TS2349: Cannot invoke an expression whose type lacks a call signature.

I can't quite understand what's causing this, since the function I'm exporting takes a string, and seems to be returning a function taking a component and outputting a component.

Upvotes: 0

Views: 914

Answers (1)

Daniel Rosenwasser
Daniel Rosenwasser

Reputation: 23443

scriptLoader is being exported as a default export, but you're importing using a namespace import.

Try changing it to a default import like in the docs:

import scriptLoader from "react-async-script-loader";

Upvotes: 2

Related Questions