转换为Antdesign日期选取器的 typescript

mklgxw1f  于 2023-01-06  发布在  TypeScript
关注(0)|答案(4)|浏览(133)

我不知道如何在handleDateChange函数中注解dateObj参数

    • 应用程序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;

兹林特是这么说的-
类型'(日期对象:日期,日期字符串:string)=〉void '不能赋值给类型'(日期:时刻,日期字符串:string)=〉void "。参数" dateObj "和" date "的类型不兼容。类型" Moment "无法分配给类型" Date "。类型" Moment "中缺少属性" toDateString "
但我不知道该怎么克服。

x6yk4ghg

x6yk4ghg1#

这是必须的。

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

然后

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

无需单独导入Moment,因为根据此参考,moment命名空间中存在interface而非class

hgqdbh6s

hgqdbh6s2#

只是将此答案推入此主题,因为它似乎解决了此问题,并且在另一个问题中未标记为正确答案:如何使用typescript导入moment.js?
您需要在TS中分别导入 moment() 函数和 Moment 类。
我在打印文档here中发现了一个注解。
/~注意ES6模块不能直接导出可调用函数。~此文件应使用CommonJS样式导入:*~ import x =需要(“某个库”);
因此,将moment js导入到typescript的代码实际上是这样的:

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

z2acfund3#

我尝试了这个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时遇到这个警告

idv4meu8

idv4meu84#

如果大家想知道迁移到antd v5后应该做什么,请按照上面的@muhammad-irva答案,将dateObject: moment.Moment替换为dateObject: Dayjs | null

相关问题