How to make parameter conditional inside interface with generic type interface

Question

I'm trying to build an interface, for example, Dropdown props interface for React component, and I'm trying to make params optional only if T generic is string. My research found zero answers for my question.

as you can see here, I'm trying to make getTemplate optional only if T extends string type, but if it something else I will have to write it.

Unfortunately it doesn't work. param with undefined type is not optional parameter, it is parameter with undefined.

Any suggestions? Thanks ahead.

here an example of something I tried but doesn't work:

type Props<T extends string | Omit<any, 'string'>> = (T extends string
? {}
: {
      getTemplate: (item: T) => ReactNode;
      getDisplayTemplate(item: T): ReactNode;
      getItemIdentifier(item: T): string | number;
  }) & {
items: Array<T>;
disabled?: boolean;
className?: string;
placeholder?: string;
selectedItems: Array<T>;
isMultiSelect?: boolean;
onChange(items: Array<T>): void;

};

export const Dropdown = <T,>({
disabled,
placeholder,
selectedItems = [],
items,
onChange,
getDisplayTemplate,
getItemIdentifier,
getTemplate,
isMultiSelect,
className,

}: Props) => {

Please paste your original code next time instead of using image. — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Dec 1, 2021 at 8:01
Noted, thanks will be done next time. I'll edit the post right now — Eden Binyamin
– Eden Binyamin, Commented Dec 1, 2021 at 9:12

GOTO 0 · Accepted Answer · 2021-12-01 10:31:05Z

1

Maybe extract the conditional part into a member of a union type. Make getTemplate, etc. optional only if T is a string.

type ConditionalProps<T> = {
      getTemplate: (item: T) => ReactNode;
      getDisplayTemplate(item: T): ReactNode;
      getItemIdentifier(item: T): string | number;
};
type Props<T> =
(T extends string ? Partial<ConditionalProps<T>> : ConditionalProps<T>) & {
    items: Array<T>;
    disabled?: boolean;
    className?: string;
    placeholder?: string;
    selectedItems: Array<T>;
    isMultiSelect?: boolean;
    onChange(items: Array<T>): void;
};

edited Dec 1, 2021 at 10:31

answered Dec 1, 2021 at 7:04

GOTO 0

48.8k25 gold badges140 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eden Binyamin Over a year ago

Thanks for the comment, I tried it but I think it doesnt work also. I can't extract the functions when i use the componet

GOTO 0 Over a year ago

@EdenBinyamin It's difficult to help you without seeing the code and the actual error, but if you type the props with a type parameter like props: Props<MyClass>, you should be able to access props.getTemplate.

Eden Binyamin Over a year ago

wrote it on the post itself, sorry man

Collectives™ on Stack Overflow

How to make parameter conditional inside interface with generic type interface

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related