如何在react + typescript (tsx内部)中使用react-datetime

Question

react-datetime包含了一个typescript定义文件，但它不能工作(对我来说)。在我看来，ts definition file导出的类型(ReactDatetime)与实际javascript file中的类型(Datetime)不同。

我继续修改了react-datetime.d.ts类型文件，以导出(我认为)正确的类型(在gist中可用)：

interface Datetime extends React.ComponentClass<DatetimepickerProps> {}
export { Datetime }

TypeScript抱怨说它找不到Datetime

(26,10): error TS2304: Cannot find name 'Datetime'.

我猜在类型和这个组件方面，我一定遗漏了一些非常基本的东西。即使使用/// <reference path="../node_modules/react-datetime/react-datetime.d.ts" />指令引用了react-datetime.d.ts文件，尝试使其与原始类型文件一起工作也会导致一开始就无法导入模块。

尝试使用<Datetime/>的类的最低限度示例

/// <reference path="../../node_modules/react-datetime/react-datetime.d.ts" />
import * as React from "react";
import { Datetime } from "react-datetime";


export interface DateTimeResolutionProps { timestamp: number, resolution: number }
export class DateTimeResolutionPicker extends React.Component<DateTimeResolutionProps, {}> {
    render() {
        // console.log(Datetime);
        return (<div>
        <Datetime/>
        </div>);
    }

}

Answer 1

您应该像导入React模块一样导入它：

import * as Datetime from "react-datetime";

这样它就不会抱怨找不到Datetime了。

至于名称，你可以决定它的名称，如果你愿意，它可以是ReactDatetime：

import * as ReactDatetime from "react-datetime";

同样的情况也发生在React模块上，如果您查看它将显示的定义文件：

declare namespace __React {
    ...
}

declare module "react" {
    export = __React;
}

Answer 2

您正在将Datetime导出为一个类型，即使React组件需要是一个值(无论它是SFC还是一个类)。这就是你的版本不起作用的原因。

The version on the repo目前将其定义为一个CommonJS模块，这意味着目前它应该需要与CommonJS兼容的语法：

import Datetime = require("react-datetime");