Soy bastante nuevo en Typescript y estoy tratando de tener una extensión condicional basada en un valor de argumento de función. El contexto es definir un widget para la selección de objetos que puede ser una selección, una lista de radio (un grupo de radio) o una lista de casillas de verificación (un grupo de casillas de verificación). Cada uno de estos diferentes widgets acepta diferentes accesorios, nombre: SelectProps , RadioGroupProps y CheckboxGroupProps . La selección del widget se basa en dos parámetros: expand (significa que queremos una lista de casillas de verificación o radio) y multiple (significa que queremos seleccionar varios elementos o no).
function SelectionWidget(props: SelectionWidgetProps) {} Toma, quiero eso:
si los props coinciden con {expand: true, multiple: false} , entonces SelectionWidgetProps debe extender RadioGroupProps .
si los props coinciden con {expand: true, multiple: true} , entonces SelectionWidgetProps debe extender CheckboxGroupProps .
de lo contrario, SelectionWidgetProps debe extender SelectProps .
Intenté lo siguiente:
type SelectTypeExtend<T> = T extends { expand: false } ? SelectProps : T extends { expand: true; multiple: false } ? RadioGroupProps : T extends { expand: true; multiple: true; } ? CheckboxGroupProps : never; interface SelectTypeProps extends SelectTypeExtends { multiple?: boolean; expand?: boolean; } Pero no funciona porque SelectTypeExtends espera un argumento. ¿Es posible lograr esto con Typescript? ¡Gracias!
Puede extender interface solo con tipos conocidos estáticamente. Significa que no le permite extender SelectTypeProps con SelectTypeExtends porque SelectTypeExtends es una caja negra. Nadie sabe el tipo de T
Para manejar este caso, debe usar type en lugar de interface :
type SelectProps = { tag: 'SelectProps' } type RadioGroupProps = { tag: 'RadioGroupProps' } type CheckboxGroupProps = { tag: 'CheckboxGroupProps ' } type SelectTypeExtend<T> = T extends { expand: false } ? SelectProps : T extends { expand: true; multiple: false } ? RadioGroupProps : T extends { expand: true; multiple: true; } ? CheckboxGroupProps : never; type SelectTypeProps<T> = { // <------ type instead of interface multiple?: boolean; expand?: boolean; } & SelectTypeExtend<T>Ejemplo con componentes de reacción:
import React from "react"; import { Select, SelectProps, Checkbox, CheckboxGroupProps, Radio, RadioGroupProps } from "formik-antd"; export type SelectionComponentProps = | { expand?: false } & { options: SelectProps } | { expand: true; multiple?: false } & { options: RadioGroupProps } | { expand: true; multiple: true } & { options: CheckboxGroupProps }; function SelectionComponent(props: SelectionComponentProps) { if (props.expand) { if (props.multiple) { return <Checkbox.Group {...props.options} />; } else { return <Radio.Group {...props.options} />; } } return <Select {...props.options} />; }; const select: SelectProps = 'unimplemented' as any; const radio: RadioGroupProps = 'unimplemented' as any; const checkbox: CheckboxGroupProps = 'unimplemented' as any; export const TestRadio = () => { // Accept properties from RadioGroupProps but not from SelectProps or CheckboxGroupProps return [ <SelectionComponent expand options={radio} />, // ok <SelectionComponent expand options={select} />, // expected error <SelectionComponent expand options={checkbox} />, // expected error ] }; export const TestCheckbox = () => { // Accept properties from CheckboxProps but not from SelectProps or RadioGroupProps return [ <SelectionComponent expand multiple options={checkbox} />, // ok <SelectionComponent expand multiple options={select} />, // expected error <SelectionComponent expand multiple options={radio} /> // expected error ] }; export const TestSelect = () => { // Accept properties from SelectProps but not from RadioGroupProps or CheckboxGroupProps return [ <SelectionComponent options={select} />, // ok <SelectionComponent options={radio} />, // expected error <SelectionComponent options={checkbox} />, // expected error ] }; He modificado ligeramente el tipo SelectionComponentProps . Tenga en cuenta que si no proporciona alguna propiedad para reaccionar componente, TS lo trata como undefined y no como false , por lo tanto, debe hacer que algunas de sus propiedades false sean partial .