How to use react-datetime with react + typescript (inside 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).

I went ahead and changed react-datetime.d.ts typings file to export the (what I think) is correct type (available in gist):

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

And TypeScript complains that it can not find the Datetime:

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

I guess there's something pretty basic I must be missing in terms of typings and this component. Trying to make it work with the original typings file resulted in inability to import the module in the first place, even though the react-datetime.d.ts file was referenced using /// <reference path="../node_modules/react-datetime/react-datetime.d.ts" /> directive.

A minimalistic example of class trying to use <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>);
    }

}

Nitzan Tomer · Accepted Answer · 2016-09-09 19:31:47Z

4

You should import it just like you imported the React module:

import * as Datetime from "react-datetime";

Then it won't complain about not finding the Datetime.

As for the names, you decide what the name will be, it can be ReactDatetime if you want:

import * as ReactDatetime from "react-datetime";

The same happens with the React module, if you look at the definition file it will show:

declare namespace __React {
    ...
}

declare module "react" {
    export = __React;
}

answered Sep 9, 2016 at 19:31

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Naylor Over a year ago

This advice is no longer accurate in the current version of typescript. You want import Datetime from "react-datetime" If you use the import statement described here you will get "JSX element type 'Datetime' does not have any construct or call signatures"

Daniel Rosenwasser · Accepted Answer · 2016-09-09 17:02:07Z

1

You are exporting Datetime as a type, even though a React component needs to be a value (whether it's an SFC, or a class). So that's why your version isn't working.

The version on the repo currently defines it as a CommonJS module, which means that for now it should be required with CommonJS-compatible syntax:

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

answered Sep 9, 2016 at 17:02

Daniel Rosenwasser

24.1k14 gold badges54 silver badges66 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related