转换为Antdesign日期选取器的 typescript

mklgxw1f 于 2023-01-06 发布在 TypeScript

关注(0)|答案(4)|浏览(132)

我不知道如何在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 "
但我不知道该怎么克服。

typescript

来源：https://stackoverflow.com/questions/53994444/conversion-to-typescript-for-antdesign-datepicker

4条答案

按热度按时间

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

赞(0）回复(0）举报 2023-01-06

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(...);
  ...
}

赞(0）回复(0）举报 2023-01-06

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时遇到这个警告

赞(0）回复(0）举报 2023-01-06

idv4meu84#

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

赞(0）回复(0）举报 2023-01-06