Reactjs 转换为Antdesign日期选择器的Typescript

我不知道如何在我已经完成的

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说的-

Type'（dateObj:Date，dateStr:string）=>void'不可分配给Type'（Date:Moment，dateString:string）=>void'。 参数“dateObj”和“date”的类型不兼容。 类型“Moment”不可分配给类型“Date”。 类型“矩”中缺少属性“toDateString”

---

但我不知道如何克服这个问题

只是把这个答案推进这个主题，因为它似乎解决了这个问题，而在另一个问题中没有标记为正确答案：

---

您需要在TS中分别导入函数和类的矩（）

我在typescript文档中找到了一个注释

/*~请注意，ES6模块无法直接导出可调用函数。 *~应使用CommonJS样式导入此文件： *~import x=require（'someLibrary'）

因此，将MomentJS导入typescript的代码实际上如下所示：

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

---

这是必须的

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

然后

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

---

由于

接口

而非

类

存在于矩命名空间上，因此不需要为

矩

单独导入，因为矩提供了自己的键入方式，我从未亲自尝试过，但请检查这是否有助于您：