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

Question

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

在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 元素类型“脚本”没有任何构造或调用签名。

我哪里错了？这是模块：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> {}

有了这个，我仍然收到错误：

找不到模块“react-load-script”的声明文件。'/Users/sb/git/fl-app/node_modules/react-load-script/lib/index.js' 隐式具有 'any' 类型。

Answer 1

这是因为Script是组件，但您的界面定义了它的props.按照 lib源代码，您可能必须执行以下操作：export interface ScriptProps {&nbsp; url: string;&nbsp; onLoad: () => void;&nbsp; // etc...}export default class Script extends React.Component<ScriptProps> {}评论后编辑您的类型涉及第三方模块。你必须向 Typescript 提出建议。为此，您将在模块声明中封装您的类型，如下所示：// index.d.tsdeclare module 'react-load-script' {&nbsp; // imports here...&nbsp; export interface ScriptProps {&nbsp; &nbsp; url: string;&nbsp; &nbsp; onLoad: () => void;&nbsp; &nbsp; // etc...&nbsp; }&nbsp; export default class Script extends React.Component<ScriptProps> {}}

Answer 2

注意：在项目的根目录中创建一个名为“custom-types”的文件夹，并在其中创建文件“index.d.ts”索引.d.tsdeclare module 'your-module-that-has-no-types';配置文件{&nbsp; "compilerOptions": {&nbsp; &nbsp; // ...other props,&nbsp; &nbsp; "typeRoots": ["./custom-types", "node_modules/@types"]&nbsp; },&nbsp; "include": [&nbsp; &nbsp; "src", "custom-types/index.d.ts"&nbsp; ],}