У меня есть этот компонент React, где variables.search
передается в компонент ввода Ant Design:
type SearchPopoverProps<TData, TVariables> = {
placement?: TooltipPlacement;
variables: Omit<TVariables, "page">;
loading?: boolean;
};
export function SearchPopover<
TData extends Record<string, Page<any>>,
TVariables extends Filters
>({
placement,
variables,
loading
}: SearchPopoverProps<TData, TVariables>) {
return (
<Popover
trigger="click"
placement={placement}
content={
<Input
allowClear
prefix={<Icon type={loading ? "loading" : "search"} />}
placeholder="Search..."
defaultValue={variables.search || ""}
/>
}>
<Badge dot={!!variables.search}>
<Button icon="search" />
</Badge>
</Popover>
);
}
Filters
, из которого TVariables
выходит из, определяется так:
export type Filters = {
search: string | null;
sort: string | null;
sortOrder: number | null;
limit: number;
page: number;
};
Опора defaultValue
, используемая Ant Design, определяется в интерфейсе HTMLAttributes:
interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
// ...
defaultValue?: string | number | string[];
// ...
}
В моем понимании все должно работать нормально. variables.search
может быть string | null
или чем-то более узким. Если оно равно нулю, то пустая строка отправляется на defaultValue
, что удовлетворяет требованию string
для defaultValue
. Фактически, null
никогда не может быть отправлено вниз по этому реквизиту.
Но Typescript выдает мне эту ошибку:
Error:(365, 11) TS2322: Type 'TVariables["search"]' is not assignable to type 'string | number | string[] | undefined'.
Type 'string | null' is not assignable to type 'string | number | string[] | undefined'.
Type 'null' is not assignable to type 'string | number | string[] | undefined'.
Type 'TVariables["search"]' is not assignable to type 'string[]'.
Type 'string | null' is not assignable to type 'string[]'.
Type 'null' is not assignable to type 'string[]'.
Что происходит и как я могу это исправить? Спасибо.
Редактировать : Это исправляет это, но я действительно не понимаю, зачем нужна такая проверка:
defaultValue={ typeof variables.search === "string" ? variables.search : "" }