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.

Answer 1

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> {}
}

Answer 2

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"  ],
}