Преобразование в Typescript для Antdesign Datepicker - PullRequest
Новая
       8

Преобразование в Typescript для Antdesign Datepicker

0 голосов
/ 01 января 2019

Я не могу понять, как аннотировать dateObj параметр в handleDateChange функции, которую я

App.tsx 

import { useState } from 'react';
import logo from './logo.svg';
import './App.css'; 
import { DatePicker } from 'antd';       // for css
import moment from 'moment';

const App = () => {
    const [date, setDate] = useState(new Date())
    const handleDateChange = (dateObj: Date, dateStr: string) => {
        setDate(dateObj);
    }
    return (
        <div className="App">
            <DatePicker defaultValue={moment(date)} onChange={handleDateChange} />
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.tsx</code> and save to reload.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
            </header>
        </div>
    );
}

export default App;

Вот чтоtslint говорит -

Тип '(dateObj: Date, dateStr: string) => void' нельзя назначить типу '(date: Moment, dateString: string) => void'.Типы параметров dateObj и date несовместимы.Тип «Момент» не может быть назначен типу «Дата».Свойство «toDateString» отсутствует в типе «Момент»

Но я не уверен, как это преодолеть.

Ответы [ 2 ]

0 голосов
/ 01 января 2019

Только это и требовалось. 

 const [date, setDate] = useState(moment(new Date()));
 const handleDateChange = (dateObj: moment.Moment, dateStr: string): void => {
    setDate(dateObj);
}

, а затем 

 <DatePicker defaultValue={date} onChange={handleDateChange} />

Нет необходимости выполнять отдельный импорт для Moment в качестве interface и НЕ class существует в пространстве имен моментов согласно этой ссылке

0 голосов
/ 01 января 2019

Просто вставить этот ответ в эту тему, так как это, похоже, решает эту проблему и не было помечено как правильный ответ в другом вопросе: Как можно импортировать moment.js с машинописью?

Вам необходимо импортировать moment () функцию и Moment класс отдельно в TS.

Я нашел примечание в наборе документов здесь .

/ * ~ Обратите внимание, что модули ES6 не могут напрямую экспортировать вызываемые функции.* ~ Этот файл должен быть импортирован с использованием стиля CommonJS: * ~ import x = require ('someLibrary');

Таким образом, код для импорта момента js в машинописный текст выглядит следующим образом: 

import { Moment } from 'moment'
....
let moment = require('moment');
...
interface SomeTime {
  aMoment: Moment,
}
...
fn() {
  ...
  someTime.aMoment = moment(...);
  ...
}
...