davidgilbertson

type Nullable<IdType, RequiredType> = RequiredType extends true ? IdType : IdType | null;

export type SelectProps<IdType extends string, RequiredType extends boolean> = {
  options: Array<{id: IdType; name: string}>;
  selectedItemId: Nullable<IdType, RequiredType>;
  onSelect: (id: Nullable<IdType, RequiredType>) => void;
  required?: RequiredType;
};

const Select = <IdType extends string, RequiredType extends boolean>(

davidgilbertson

<Select
  selectedItemId={selectedItemId}
  onSelect={setSelectedItemId}
  options={[
    {value: Size.Small, children: 'Small'},
    {value: Size.Medium, children: 'Medium'},
    {value: Size.Large, children: 'Large', disabled: true},
  ]}
  required
/>

davidgilbertson

type Nullable<IdType, RequiredType> = RequiredType extends true ? IdType : IdType | null;

type OptionProps<IdType> = React.ComponentProps<'option'> & {
  value: IdType;
};

const Select = <IdType extends string, RequiredType extends boolean>(props: {
  options: Array<OptionProps<IdType>>;
  selectedItemId: Nullable<IdType, RequiredType>;
  onSelect: (id: Nullable<IdType, RequiredType>) => void;

davidgilbertson

type BaseProps<IdType> = {
  options: Array<{id: IdType; name: string}>;
};
  
type PropsWhenOptional<IdType> = BaseProps<IdType> & {
  required?: false;
  selectedItemId?: IdType | null;
  onSelect: (id: IdType | null) => void;
};
  

davidgilbertson

const makeBigger = <T extends string | number>(stringOrNumber: T) => {
  if (typeof stringOrNumber === 'string') {
    return stringOrNumber.toUpperCase();
  }
  return (stringOrNumber * 4);
};

davidgilbertson

const makeBigger = (stringOrNumber: string | number) => {
  if (typeof stringOrNumber === 'string') {
    return stringOrNumber.toUpperCase();
  }
  return stringOrNumber * 4;
};

davidgilbertson

type Nullable<IdType, RequiredType> = RequiredType extends true
  ? IdType
  : IdType | null;

const Select = <IdType extends string, RequiredType extends boolean>(props: {
  options: Array<{id: IdType; name: string}>;
  selectedItemId: Nullable<IdType, RequiredType>;
  onSelect: (id: Nullable<IdType, RequiredType>) => void;
  required?: RequiredType;
}) => (

davidgilbertson

type BaseEntityWithFancyId<IdType> = {
  id: IdType;
  name: string;
};
  
const Select = <IdType extends string>(props: {
  options: Array<BaseEntityWithFancyId<IdType>>;
  selectedItemId?: IdType;
  onSelect: (id: IdType) => void;
}) => (

davidgilbertson

const Select = <IdType extends string>(props: {
  options: Array<{
    id: IdType;
    name: string;
  }>;
  selectedItemId?: IdType;
  onSelect: (id: IdType) => void;
}) => (
  <select
    value={props.selectedItemId ?? ''}

davidgilbertson

<Select
  onSelect={id => {
    // Do something with id
  }}
  options={[
    {id: Size.Small, name: 'Small'},
    {id: Size.Medium, name: 'Medium'},
    {id: Size.Large, name: 'Large'},
  ]}
/>