[英]Adding custom Typescript type declaration for a node module in Create React App
I am struggling to add a type declaration for react-load-script
within a Create React App application.我正在努力在 Create React App 应用程序中为
react-load-script
添加类型声明。
Within the src
folder, I created a react-load-script.d.ts
file and added the following:在
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
}
}
With the above I am getting the error:有了上面我得到的错误:
JSX element type 'Script' does not have any construct or call signatures.
JSX 元素类型“脚本”没有任何构造或调用签名。
Where am I going wrong?我哪里错了? This is the module: https://github.com/blueberryapps/react-load-script
这是模块: 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:我还需要为 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
我将声明文件移动
/@types/react-load-script/index.d.ts
命名为/@types/react-load-script/index.d.ts
In tsconfig.json
I added the following to compilerOptions
:在
tsconfig.json
添加以下到compilerOptions
:
"typeRoots": ["./node_modules/@types", "./@types"]
This is the index.d.ts
entire contents:这是
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> {}
With this I am still getting the error:有了这个,我仍然收到错误:
Could not find a declaration file for module 'react-load-script'.
找不到模块“react-load-script”的声明文件。 '/Users/sb/git/fl-app/node_modules/react-load-script/lib/index.js' implicitly has an 'any' type.
'/Users/sb/git/fl-app/node_modules/react-load-script/lib/index.js' 隐式具有 'any' 类型。
It's because Script
is the component, but your interface define its props
.这是因为
Script
是组件,但您的界面定义了它的props
。
Following the lib sources , you may have to do:按照 lib 源代码,您可能必须执行以下操作:
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.
你必须向 Typescript 提出建议。 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> {}
}
Note: create a folder called 'custom-types' in the root directory of your project and inside it create the file 'index.d.ts'注意:在项目的根目录中创建一个名为“custom-types”的文件夹,并在其中创建文件“index.d.ts”
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" ],
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.