В чем причина ts ошибки при передаче пропсов в компонент?

Question

[Анастасия]

При попытке передать в компонент Select все остальные props - { ...props } - props Options начинает подсвечиваться ошибкой:

Type 'OptionType[]' is not assignable to type 'readonly (string | number | GroupBase)[]'.
Type 'OptionType' is not assignable to type 'string | number | GroupBase'.
Property 'options' is missing in type 'OptionType' but required in type 'GroupBase'.

если не пытаюсь делать спред пропсов в Select, то все ок, options передается без ошибок. Возможно я неправильно расширяя интерфейс ISelectProp от наивного элемента select? И как при такой записи передать ref в компонент Select?

import React from 'react';
import Select from 'react-select';

export type OptionType = {
    value: string;
    label: string;
};

interface ISelectProps extends React.ComponentPropsWithRef<'select'> {
    caption?: string;
    options?: OptionType[];
    className?: string;
}

export const DefaultSelect = React.forwardRef<HTMLSelectElement, ISelectProps>(
    ({
         options = [], 
         placeholder = 'Выберите марку',
         disabled, 
         ...props
     }, ref
    ) => {

        return (
            <Select
                options={options}
                placeholder={placeholder}
                isDisabled={disabled}
                noOptionsMessage={() => 'Нет совпадений'}
                {...props}
            />
        );
    },
);

DefaultSelect.displayName = 'Select';

Answer 1

[Aetae]

Где-то среди >260 свойств из React.ComponentPropsWithRef<'select'> находится свойство, которое дженерик Option в Select устанавливает как string | number с большим приоритетом, чем то что ты кладёшь собственно в Options. Можешь поискать сам убирая по одному или сравнивая с декларацией для Select.

Но в принципе решение просто выкинуть React.ComponentPropsWithRef<'select'>, т.к. ты расширяешь не нативный select, а react-select.

import Select, { Props } from 'react-select';

interface ISelectProps extends Props<OptionType> {
    caption?: string;
    disabled?: boolean
}

Comments

[Анастасия]

а ref можно как-то прокинуть в Select?

[Aetae]

Анастасия, хз, дюже кривые типы.)
В короткой перспективе - дать рефу тип any и оно заработает. А дальше разбираться когда не лень.) (мне - лень)