javascript - 在 Create React App 中为节点模块添加自定义 Typescript 类型声明

Question

我正在努力在 Create React App 应用程序中为 react-load-script 添加类型声明。

在 src 文件夹中，我创建了一个 react-load-script.d.ts 文件并添加了以下内容:

// Type definitions for React Load Script

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

通过上面我得到的错误:

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

我哪里错了？这是模块:https://github.com/blueberryapps/react-load-script

这是我目前在应用程序中的使用情况:

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

我还需要为 onLoad 添加类型:

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

非常感谢。

评论更新

我将声明文件移动并重命名为 /@types/react-load-script/index.d.ts

在 tsconfig.json 中，我将以下内容添加到 compilerOptions:

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

这是index.d.ts的全部内容:

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

有了这个我仍然得到错误:

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

这是因为 Script 是组件，但是您的界面定义了它的 props。

遵循库 sources ，您可能必须这样做:

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

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

---

评论后编辑

您的类型涉及第三方模块。你必须就此向 Typescript 提出建议。为此，您需要将类型封装在模块声明中，如下所示:

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