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

Question

For some of the modules I'm importing I end up modifying their declaration files to get them working. I'm not sure if I'm going about it wrong or if there just happen to be issues with the typings for these modules.

index.tsx

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

react and moment import fine. The problems are with react-big-calendar and react-modal . This is basically the process I went through for react-modal :

I installed @types/react-modal .

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

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

I tried import ReactModal from "react-modal" which gives me Module '...' has no default export .

I tried import { ReactModal } from "react-modal" which gives me Module '...' has no exported member 'ReactModal' .

I tried import * asReactModal from "react-modal" which compiles, but gives me Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object at run time.

Eventually I just altered the declaration file to this:

import * as React from "react";

export as namespace ReactModal;

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

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

Then I could use import ReactModal from "react-modal" , and it worked.

With react-big-calendar I just uninstalled @types/react-big-calendar and now have my own typings for it. Surely other people are using these declaration files for these packages without all this hassle. Any guidance would be appreciated.

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

I think react-modal/index.d.ts has a bug and you (or I) should submit a pull request. If I interpret their react-modal-tests.tsx correctly, they import it with import * as ReactModal from 'react-modal'; which compiles but doesn't run. My impression is their tests only compile.

I figured out how to get it to work without modifying the file way down in node_packages/@types.

Add these lines to the compilerOptions section of the tsconfig file: "baseUrl": "src/types", "typeRoots": [ "./src/types", "./node_modules/@types" ]

Then put your modified react-modal/index.d.ts in src/types/react-modal/index.d.ts . The typescript compiler should then find it there. I simply copied the contents of node_modules/@types/react-modal to src/types/react-modal and made your changes.