TypeScript - Problem med att importera vissa npm-paket som använder deklarationsfiler (typings) från DefinitelyTyped

För några av modulerna jag importerar hamnar jag med att ändra deras deklarationsfiler för att få dem att fungera. Jag är inte säker på om jag gör fel eller om det bara råkar vara problem med typdefinitionerna för dessa moduler.

index.tsx

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

react och moment importerar utan problem. Problemen är med react-big-calendar och react-modal. Detta är i princip processen jag gick igenom för react-modal:

Jag installerade @types/react-modal.

node_modules/@types/react-modal/index.d.ts (förkortad)

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

Jag försökte import ReactModal from "react-modal" vilket ger mig Module '...' har ingen standardexport.

Jag försökte import { ReactModal } from "react-modal" vilket gav mig Module '...' har ingen exporterad medlem 'ReactModal'.

Jag försökte import * asReactModal from "react-modal" vilket kompilerar, men ger mig Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object vid körning.

Till slut ändrade jag bara deklarationsfilen till detta:

import * as React from "react";

export as namespace ReactModal;

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

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

Då kunde jag använda import ReactModal from "react-modal", och det fungerade.

Med react-big-calendar avinstallerade jag precis @types/react-big-calendar och har nu mina egna typdefinitioner för det. Säkerligen använder andra människor dessa deklarationsfiler för dessa paket utan allt detta krångel. All vägledning skulle uppskattas.

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

Svar #1

Jag tror att react-modal/index.d.ts har en bugg och du (eller jag) borde skicka in en pull request. Om jag tolkar deras react-modal-tests.tsx korrekt, importerar de det med import * as ReactModal from 'react-modal'; vilket kompilerar men inte körs. Mitt intryck är att deras tester bara kompilerar.

Jag listade ut hur man får det att fungera utan att ändra filen långt ner i node_packages/@types.

Lägg till dessa rader i avsnittet compilerOptions i tsconfig-filen: "baseUrl": "src/types", "typeRoots": [ "./src/types", "./node_modules/@types" ]

Sätt sedan ditt modifierade react-modal/index.d.ts i src/types/react-modal/index.d.ts. TypeScript-kompilatorn bör sedan hitta det där. Jag kopierade helt enkelt innehållet i node_modules/@types/react-modal till src/types/react-modal och gjorde dina ändringar.