Adding custom Typescript type declaration for a node module in Create React App

Question

I am struggling to add a type declaration for react-load-script within a Create React App application.

Within the src folder, I created a react-load-script.d.ts file and added the following:

// Type definitions for React Load Script

declare module 'react-load-script' {
  import * as React from 'react'
  interface Script {
    url: string
  }
}

With the above I am getting the error:

JSX element type 'Script' does not have any construct or call signatures.

Where am I going wrong? This is the module: https://github.com/blueberryapps/react-load-script

This is my current use of it within the app:

<Script url="https://maps.googleapis.com/maps/api/js?                               key=your_api_key&libraries=places"          
    />

I also need to add types for the onLoad:

<Script url="https://maps.googleapis.com/maps/api/js?                               key=your_api_key&libraries=places"          
      onLoad={this.handleScriptLoad}        
    />

Thanks so much.

Update from comments

I moved and renamed the declaration file to /@types/react-load-script/index.d.ts

In tsconfig.json I added the following to compilerOptions:

"typeRoots": ["./node_modules/@types", "./@types"]

This is the index.d.ts entire contents:

// Type definitions for React Load Script
import React from 'react'

export interface ScriptProps {
  url: string
  onLoad: () => void
  // etc...
}

export default class Script extends React.Component<ScriptProps> {}

With this I am still getting the error:

Could not find a declaration file for module 'react-load-script'. '/Users/sb/git/fl-app/node_modules/react-load-script/lib/index.js' implicitly has an 'any' type.

elonaire · Accepted Answer · 2021-05-26 17:56:50Z

6

Note: create a folder called 'custom-types' in the root directory of your project and inside it create the file 'index.d.ts'

index.d.ts

declare module 'your-module-that-has-no-types';

tsconfig.json

{
  "compilerOptions": {
    // ...other props,
    "typeRoots": ["./custom-types", "node_modules/@types"]
  },
  "include": [
    "src"
, "custom-types/index.d.ts"  ],
}

answered May 26, 2021 at 17:56

elonaire

1,9941 gold badge13 silver badges19 bronze badges

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

Comments

Richard Haddad · Accepted Answer · 2019-09-03 17:36:01Z

5

It's because Script is the component, but your interface define its props.

Following the lib sources, you may have to do:

export interface ScriptProps {
  url: string;
  onLoad: () => void;
  // etc...
}

export default class Script extends React.Component<ScriptProps> {}

Edit after comments

Your types concerns a third-party module. You have to advise Typescript about it. For that you'll encapsulate your types in a module declaration, like that:

// index.d.ts
declare module 'react-load-script' {
  // imports here...

  export interface ScriptProps {
    url: string;
    onLoad: () => void;
    // etc...
  }

  export default class Script extends React.Component<ScriptProps> {}
}

edited Sep 3, 2019 at 17:36

answered Aug 31, 2019 at 11:17

Richard Haddad

1,0247 silver badges13 bronze badges

5 Comments

Le Moi Over a year ago

Thanks you. However this gives me: Could not find a declaration file for module 'react-load-script'.. This is the entire code of my declaration file, incase I have done something wrong: pastebin.com/ysAY8hWF

Richard Haddad Over a year ago

You should say to typescript compiler where to find your types definition files. In your tsconfig.json define typeRoots with your types folder AND node_modules/@types. typescriptlang.org/docs/handbook/…

Le Moi Over a year ago

Thanks so much for your help. I edited the main post with details, it still doesn't work.

Le Moi Over a year ago

Thanks so much Richard... will give it a go. When you put // imports here... what imports do they refer to?

Richard Haddad Over a year ago

Hmm.. in your case I think about React, but it may be not necessary I don't remember if you have to do it or not. I will test it later in the day.

Collectives™ on Stack Overflow

Adding custom Typescript type declaration for a node module in Create React App

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related