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

Question

我正在努力react-load-script在 Create React App 应用程序中添加类型声明。在src文件夹中，我创建了一个react-load-script.d.ts文件并添加了以下内容：// Type definitions for React Load Scriptdeclare 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 Scriptimport 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 {

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

}

Answer 2

注意：在项目的根目录中创建一个名为“custom-types”的文件夹，并在其中创建文件“index.d.ts”

索引.d.ts

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

配置文件

{

  "compilerOptions": {

    // ...other props,

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

  },

  "include": [

    "src"

, "custom-types/index.d.ts"  ],

}