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

Question

我正在努力在创建 React 应用程序中添加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 元素类型"脚本"没有任何构造或调用 签名。

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

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

找不到模块"反应加载脚本"的声明文件。 '/Users/sb/git/fl-app/node_modules/react-load-script/lib/index.js' 隐式具有"任何"类型。

Answer 1

注意：在项目的根目录中创建一个名为"自定义类型"的文件夹，并在其中创建文件"index.d.ts">

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

Answer 2

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

遵循库源代码，您可能需要执行以下操作：

export interface ScriptProps {
url: string;
onLoad: () => void;
// etc...
}
export default class Script extends React.Component<ScriptProps> {}

---

评论后编辑

您的类型涉及第三方模块。你必须建议打字稿。为此，您需要将类型封装在模块声明中，如下所示：

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