如何将 react-datetime 与 react + typescript 结合使用（在 tsx 中）

Question

react-datetime has a typescript definition file included, but it does not work (for me). From what I can see, the ts definition file exports a different type (ReactDatetime) than what is in actual 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'.

我想在打字和这个组件方面我必须缺少一些非常基本的东西。试图让它与原始类型文件一起工作导致无法首先导入模块，即使 react-datetime.d.ts 文件是使用 /// <reference path="../node_modules/react-datetime/react-datetime.d.ts" /> 指令引用的。

class 尝试使用 <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

您将 Datetime 作为类型导出，即使 React 组件需要是一个值（无论是 SFC 还是 class）。这就是您的版本无法正常工作的原因。

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

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

Answer 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;
}

如何将 react-datetime 与 react + typescript 结合使用（在 tsx 中）

How to use react-datetime with react + typescript (inside tsx)

reactjs

typescript

typescript-typings

react-datetime