CODEWITHSUNDEEP
reactjstypescript
koral
koral

Reputation: 2945

typescript generics: what does <T,> mean?

I try to understand the code (part of a React app):

interface SearchProps<T> {
  className?: string;
  value?: T;
  options?: T[];
  onChange?: (event: object, value: T | string, reason: string) => void;
  onInputChange?: (event: object, value: string, reason: string) => void;
  onClear?: () => void;
  renderOption?: FC<T>;
  getOptionLabel?: (option: T) => string;
}

interface TranslatedSearchProps<T> extends SearchProps<T> {
  t?: TFunction;
}

export const PureSearch = <T,>({
  className,
  value,
  options,
  onChange,
  onInputChange,
  onClear,
  renderOption,
  getOptionLabel,
  t = (key: string) => key,
}: TranslatedSearchProps<T>) => {
  return (
    <Autocomplete
      className={className}
      freeSolo
      disableClearable
      options={options || []}
      value={value}
      onChange={onChange}
      onInputChange={onInputChange}
      renderInput={SearchAppBar(t, onClear)}
      renderOption={
        renderOption ||
        ((option: T) => <ListItemText primaryTypographyProps={{ variant: 'h6' }} primary={option} />)
      }
      getOptionLabel={getOptionLabel || ((o: T) => `${o}`)}
    />
  );
};

Upvotes: 21

Views: 3698

Answers (1)

Connor Low
Connor Low

Reputation: 7176

Pretty much everywhere in JS, you can leave a trailing comma in a list-style declaration and the parser will ignore it. [0,1,2,] gives the same result as [0,1,2], { a: true, } is the same as { a: true }, etc.

As Jared Smith commented, the comma, in this case, clarifies to the parser that this is a type parameter, not JSX markup. Normally though, this would have no effect on execution.

Upvotes: 20

Related Questions