Antdesign Datepicker 转换为 Typescript答案

【问题标题】：Conversion to Typescript for Antdesign DatepickerAntdesign Datepicker 转换为 Typescript
【发布时间】：2019-01-01 09:45:11
【问题描述】：

我不知道如何在 handleDateChange 函数中注释 dateObj 参数我已经

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' 的类型不兼容。 “时刻”类型不能分配给“日期”类型。 “Moment”类型中缺少属性“toDateString”

但我不确定如何克服这一点。

【问题讨论】：

Moment 提供了他们自己的类型，我从未亲自尝试过，但请检查这是否对您有帮助：stackoverflow.com/a/45584936/236205

标签： reactjs typescript react-hooks

【解决方案1】：

这是必需的。

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

然后

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

没有必要对Moment 进行单独的导入，因为interface 和NOT class 存在于moment 命名空间中，根据这个reference

【讨论】：

【解决方案2】：

只是将这个答案推到这个主题中，因为它似乎解决了这个问题，并且在另一个问题中没有被标记为正确答案：How can moment.js be imported with typescript?

你需要在TS中分别导入moment()函数和Moment类。

我在打字稿文档here 中找到了一条注释。

/*~ 注意 ES6 模块不能直接导出可调用函数。 *~ 这个文件应该使用 CommonJS 风格导入： *~ import x = require('someLibrary');

所以将 moment js 导入 typescript 的代码实际上是这样的：

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

【讨论】：

【解决方案3】：

我试试这个answer reference，并收到这样的警告：

我解决了这个问题：

const [date, setDate] = useState<moment.Moment | null>(moment(new Date()))
  const handleDateChange = (dateObject: moment.Moment | null, dateString: string): void => {
    console.info('date string:', dateString)
    console.info('date obj:', dateObject)
    setDate(dateObject)
  }

希望这篇文章可以帮助您在尝试在 typescript 中实现 antd datepicker 时遇到此警告

【讨论】：