gpt4 book ai didi

TypeScript - 从 DefinitelyTyped 导入一些使用声明文件(类型)的 npm 包时出现问题

转载 作者:搜寻专家 更新时间:2023-10-30 21:29:24 24 4
gpt4 key购买 nike

对于我正在导入的一些模块,我最终修改了它们的声明文件以使其正常工作。我不确定我是不是做错了,或者这些模块的类型是否恰好有问题。

index.tsx

import * as React from "react";
import * as moment from "moment";
import BigCalendar from "react-big-calendar";
import ReactModal from "react-modal";

reactmoment 导入正常。问题在于 react-big-calendarreact-modal。这基本上是我为 react-modal 经历的过程:

我安装了@types/react-modal

node_modules/@types/react-modal/index.d.ts(缩写)

// Type definitions for react-modal 1.6
// Project: https://github.com/reactjs/react-modal
// Definitions by: Rajab Shakirov <https://github.com/radziksh>, Drew Noakes <https://github.com/drewnoakes>, Thomas B Homburg <https://github.com/homburg>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3

import * as React from "react";

export as namespace ReactModal;

export = ReactModal;

declare namespace ReactModal {
interface Props {
...
}
}

declare class ReactModal extends React.Component<ReactModal.Props> {
...
}

我尝试了 import ReactModal from "react-modal" 这给了我 Module '...' has no default export

我试过从“react-modal”导入{ReactModal}这给了我 Module '...' has no exported member 'ReactModal'

我尝试了 import * asReactModal from "react-modal" 编译,但给了我 Warning: React.createElement: type is invalid -- expected a string (for built-in components ) 或一个类/函数(对于复合组件)但在运行时得到:对象

最后我只是将声明文件更改为:

import * as React from "react";

export as namespace ReactModal;

declare namespace ReactModal {
interface Props {
...
}
}

export default class ReactModal extends React.Component<ReactModal.Props> {
...
}

然后我可以使用 import ReactModal from "react-modal",它成功了。

使用 react-big-calendar 我刚刚卸载了 @types/react-big-calendar,现在有了我自己的类型。当然,其他人正在为这些包使用这些声明文件而没有这些麻烦。任何指导将不胜感激。

package.json

{
"dependencies": {
"@types/react": "^15.0.27",
"@types/react-dom": "^15.5.0",
"@types/react-modal": "^1.6.7",
"moment": "^2.18.1",
"react": "^15.5.4",
"react-big-calendar": "^0.14.0",
"react-dom": "^15.5.4",
"react-modal": "^2.1.0"
},
"devDependencies": {
"awesome-typescript-loader": "^3.1.3",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"source-map-loader": "^0.2.1",
"style-loader": "^0.18.2",
"typescript": "^2.3.4",
"webpack": "^2.5.0"
}
}

tsconfig.json

{
"compilerOptions": {
"outDir": "./Scripts/dist/",
"sourceMap": true,
"noImplicitAny": true,
"target": "es5",
"jsx": "react"
},
"include": [
"./Scripts/src/**/*"
],
"exclude": [
"node_modules"
]
}

最佳答案

我认为react-modal/index.d.ts有一个错误,你(或我)应该提交一个拉取请求。如果我解释他们的 react-modal-tests.tsx正确地,他们使用 import * as ReactModal from 'react-modal'; 导入它,编译但不运行。我的印象是他们的测试只能编译。

我想出了如何在不修改 node_packages/@types 中的文件的情况下让它工作。

将这些行添加到 tsconfig 文件的 compilerOptions 部分:
“baseUrl”:“源代码/类型”,
“typeRoots”:[“./src/types”,“./node_modules/@types”]

然后将你修改后的react-modal/index.d.ts放入src/types/react-modal/index.d.ts。然后 typescript 编译器应该在那里找到它。我只是将 node_modules/@types/react-modal 的内容复制到 src/types/react-modal 并进行了更改。

关于TypeScript - 从 DefinitelyTyped 导入一些使用声明文件(类型)的 npm 包时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44803754/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com