Question

我正在尝试实现某种自动补全功能，但我遇到了麻烦。基本上，我只有很少的嵌套组件

AutocompleteContainer 
  Autocomplete
    Input
    Dropdown
      OptionList

但是，我意识到Autocomplete的道具是相同的，并且由Input道具和Dropdown道具组成，而AutocompleteContainer的道具主要由Autocomplete道具和少量新的props助手组成，但是，我无法扩展接口，因为我是

Cannot read property 'getTypeAtLocation' of undefined

所以我需要一些建议，我如何才能更优雅地实现这两个组件的接口（使用DRY原理）

export interface AutocompleteProps<OptionValueType> {
    options: (Option<OptionValueType> | OptionGroup<OptionValueType>)[];
    value: Option<OptionValueType>;
    autocompleteRef?: (el: HTMLDivElement | null) => void;
    isFocused?: boolean;
    isLoading?: boolean;
    inputValue?: string;
    onFocus?: () => void;
    onBlur?: () => void;
    onInputChange?: (inputValue?: string) => void;
    onChange?: (option: Option<OptionValueType>) => void;
    valueRenderer?: (option: Option<OptionValueType>) => React.ReactNode;
    optionGroupRenderer?: (optionGroup: OptionGroup<OptionValueType>) => React.ReactNode;
    optionRenderer?: (option: Option<OptionValueType>) => React.ReactNode;
    inputProps?: {
        placeholder?: string;
        readOnly?: boolean;
    };
}

和

export interface AutocompleteContainerProps<OptionValueType> {


options: (Option<OptionValueType> | OptionGroup<OptionValueType>)[];
    value: Option<OptionValueType>;
    isFocused?: boolean;
    isLoading?: boolean;
    inputValue?: string;
    onFocus?: () => void;
    onBlur?: () => void;
    onInputChange?: (inputValue?: string) => void;
    onChange?: (option: Option<OptionValueType>) => void;
    valueRenderer?: (option: Option<OptionValueType>) => React.ReactNode;
    optionRenderer?: (option: Option<OptionValueType>) => React.ReactNode;
    optionGroupRenderer?: (optionGroup: OptionGroup<OptionValueType>) => React.ReactNode;
    inputProps?: {
        placeholder?: string;
        readOnly?: boolean;
    };
}

看到了吗？ Autocomplete和AutocompleteContainer接口之间的唯一区别是

autocompleteRef?: (el: HTMLDivElement | null) => void;

当我在Input＆Dropdown道具上看到相同的商店时，它们看起来像AutocompleteProps，差别很小

Answer 1

如果除了单个属性外，您的接口相同，则可以使用extends关键字，如下所示：

export interface AutocompleteContainerProps<OptionValueType> {   
    options: (Option<OptionValueType> | OptionGroup<OptionValueType>)[];
    value: Option<OptionValueType>;
    isFocused?: boolean;
    isLoading?: boolean;
    inputValue?: string;
    onFocus?: () => void;
    onBlur?: () => void;
    onInputChange?: (inputValue?: string) => void;
    onChange?: (option: Option<OptionValueType>) => void;
    valueRenderer?: (option: Option<OptionValueType>) => React.ReactNode;
    optionRenderer?: (option: Option<OptionValueType>) => React.ReactNode;
    optionGroupRenderer?: (optionGroup: OptionGroup<OptionValueType>) => React.ReactNode;
    inputProps?: {
        placeholder?: string;
        readOnly?: boolean;
    };
}

和

export interface AutocompleteProps<OptionValueType> extends AutocompleteContainerProps<OptionValueType> {
    autocompleteRef?: (el: HTMLDivElement | null) => void;
}

与打字稿儿童道具反应几乎与父级相同

1 个答案: