Как использовать react-datetime с реакцией + typescript (внутри tsx)

В react-datetime включен файл определения машинописного текста, но он не работает (для меня). Насколько я вижу, файл определения ts экспортирует тип (ReactDatetime), отличный от фактического файла JavaScript (Datetime).

Я пошел дальше и изменил файл react-datetime.d.ts typings, чтобы экспортировать (как я думаю) правильный тип (доступен в суть):

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" />.

Минималистичный пример класса, пытающегося использовать <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
person miha    schedule 09.09.2016    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вы должны импортировать его так же, как вы импортировали модуль React:

import * as Datetime from "react-datetime";

Тогда он не будет жаловаться на отсутствие файла Datetime.

Что касается имен, вы сами решаете, какое будет имя, оно может быть ReactDatetime, если хотите:

import * as ReactDatetime from "react-datetime";

То же самое происходит с модулем React, если вы посмотрите на файл определения, он покажет:

declare namespace __React {
    ...
}

declare module "react" {
    export = __React;
}
person Nitzan Tomer    schedule 09.09.2016
comment
Этот совет больше не актуален в текущей версии машинописного текста. Вы хотите import Datetime from "react-datetime" Если вы используете оператор импорта, описанный здесь, вы получите тип элемента JSX «Datetime», не имеет никакой конструкции или сигнатур вызовов. - person Naylor; 11.03.2021

arrow_upward
1
arrow_downward

Вы экспортируете Datetime как тип, хотя компонент React должен быть значением (будь то SFC или класс). Так вот почему ваша версия не работает.

Версия в репозитории в настоящее время определяет его как модуль CommonJS, что означает, что на данный момент он должен требоваться с синтаксисом, совместимым с CommonJS:

import Datetime = require("react-datetime");
person Daniel Rosenwasser    schedule 09.09.2016