如何将 react-datetime 与 react + typescript 一起使用（在 tsx 内）答案

【问题标题】：How to use react-datetime with react + typescript (inside tsx)如何将 react-datetime 与 react + typescript 一起使用（在 tsx 内）
【发布时间】：2017-01-17 20:29:17
【问题描述】：

react-datetime 包含一个打字稿定义文件，但它不起作用（对我来说）。据我所知，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>);
    }

}

【问题讨论】：

标签： reactjs typescript typescript-typings react-datetime

【解决方案1】：

您将Datetime 导出为一种类型，即使 React 组件需要是一个值（无论它是 SFC 还是类）。所以这就是你的版本不工作的原因。

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

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

【讨论】：

【解决方案2】：

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

import * as Datetime from "react-datetime";

那么它就不会抱怨找不到Datetime了。

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

import * as ReactDatetime from "react-datetime";

React 模块也是如此，如果您查看定义文件，它将显示：

declare namespace __React {
    ...
}

declare module "react" {
    export = __React;
}

【讨论】：

此建议在当前版本的 typescript 中不再准确。你想要import Datetime from "react-datetime" 如果你使用这里描述的导入语句，你会得到“JSX 元素类型'Datetime'没有任何构造或调用签名”