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

Question

对于我要导入的某些模块，我最终修改了它们的声明文件以使它们正常工作。 我不确定是否要解决这个问题，或者这些模块的类型是否恰好存在问题。

index.tsx

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

react ， moment导入罚款。 问题在于react-big-calendar和react-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 。

我尝试import { ReactModal } from "react-modal"这使我Module '...' has no exported member 'ReactModal' 。

我尝试import * asReactModal from "react-modal"编译的import * asReactModal from "react-modal" ，但Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object我Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object在运行时。

最终，我将声明文件更改为：

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"
    ]
}

Answer 1

我认为react-modal / index.d.ts有一个错误，您（或我）应该提交拉取请求。 如果我正确解释了他们的react-modal-tests.tsx ，他们会用import * as ReactModal from 'react-modal';其import * as ReactModal from 'react-modal'; 可以编译但无法运行。 我的印象是他们的测试只能编译。

我想出了如何使其工作而又不修改node_packages / @ types中的文件的方法。

这些行添加到compilerOptions的tsconfig文件的部分： "baseUrl": "src/types", "typeRoots": [ "./src/types", "./node_modules/@types" ]

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