Перегрузка / изменение типов шрифтов заданными типами третьим компонентом библиотеки в React.js

Question

начинающий машинописный текст здесь.

Я пытаюсь преобразовать свой существующий реагирующий проект в использование машинописного текста. Теперь я изменил свой файл на tsx и получил кучу ошибок, которые я мог исправить. Но я застрял с одним типом, я не могу найти ответы на вопросы в сети. Чтобы перегрузить третьи типы библиотек своими.

Например, я использую ant design для своих компонентов, который приносит свои собственные типы внутрь:

import React from 'react';
import { Select, Form } from 'antd';
import { AdvancedSelectPROPS, selectOptionItem } from '../types';
const FormItem = Form.Item;
const Option = Select.Option;

const SelectElement = React.memo(function InputElement(props: AdvancedSelectPROPS) {
    const { status, hasfeed, error, label, formItemStyle, disabled, forwhom, value, options = [], ...otherProps } = props;

    return (
        <FormItem
            validateStatus={disabled ? (status === 'error' ? 'error' : 'warning') : status === 'error' ? 'error' : ''}
            className="addLabel"
            hasFeedback={hasfeed === 'true'}
            help={status === 'error' ? error : ''}
            style={formItemStyle}
            label={label}
        >
            <Select {...otherProps} disabled={disabled} value={!value ? [] : value} forwhom={forwhom}> 
              // I have added new prop "forwhom" which is not provided by the types of ant design
                {options.map((item: selectOptionItem, index) => {
                    return (
                        <Option value={item.value} key={item.name + index}>
                            {item.name || item.Name}
                        </Option>
                    );
                })}
            </Select>
        </FormItem>
    );
});

export default SelectElement;

Я добавил новую опору «для кого», которая не предусмотрена типами дизайна муравья. Теперь я хотел бы добавить новые реквизиты и их типы во встроенные типы, как это делается?

Я пытался

declare namespace JSX {
  interface Select {
        forwhom: string | number
    }
}

или

declare namespace JSX {
    interface IntrinsicAttributes {
        forwhom: string | number
    }
    interface IntrinsicClassAttributes {
        forwhom: string | number
    }
}

Но это не сработало.

Ошибка:

Property 'forwhom' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Select<any>> & Pick<Pick<Readonly<SelectProps<any>> & Readonly<{ children?: ReactNode; }>, "disabled" | "style" | "prefixCls" | ... 50 more ... | "loading"> & Pick<...> & Pick<...>, "disabled" | ... 51 more ... | "loading"> & Partial<...> & Partial<...>

Спасибо за помощь.

Answer 1

Попробуйте:

// types/antd.ts
declare module "antd/lib/select" {
  export interface SelectProps {
    forwhom: string | number;
  }
}

export {}; // you only need this line if "--isolatedModules" is provided to tsc

После этого вам нужно будет импортировать как пользовательский набор (здесь ./types/antd.ts), так и Select из antd:

import "./types/antd";
import { Select } from "antd";

// ...

<Select forwhom={1} /> // works

Codesandbox