Antd DatePickerProps 接口报错：'接口只能扩展使用静态已知成员的对象类型或对象类型的交集。' 解决方法

Antd DatePickerProps 接口报错：'接口只能扩展使用静态已知成员的对象类型或对象类型的交集。' 解决方法

在使用 Antd 的 DatePicker 组件时，如果扩展 DatePickerProps 接口并添加了 value 属性，可能会遇到以下错误：

接口只能扩展使用静态已知成员的对象类型或对象类型的交集。

这是因为 DatePickerProps 接口中的 value 属性类型为 moment.Moment，而我们在扩展接口时将其定义为 string 类型，导致类型不匹配。

解决方法

将 QDatePickerProps 中的 value 属性改为和 DatePickerProps 中 value 属性类型一致的 moment.Moment 类型即可解决报错。

import { DatePickerProps } from 'antd/es/date-picker';
import moment from 'moment';

interface QDatePickerProps extends DatePickerProps {
    value?: moment.Moment
}

代码示例

import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';

interface QDatePickerProps extends DatePickerProps {
    value?: moment.Moment
}

const QDatePicker: React.FC<QDatePickerProps> = (props) => {
    return (
        <DatePicker {...props} />
    );
};

const App: React.FC = () => {
    const value = moment('2023-01-01');

    return (
        <div>
            <QDatePicker value={value} />
        </div>
    );
};

export default App;

通过将 QDatePickerProps 中的 value 属性改为 moment.Moment 类型，我们就可以成功扩展 DatePickerProps 接口，并使用 moment.Moment 类型的值作为 DatePicker 组件的 value 属性。