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'},
  ]}
/>

davidgilbertson

<Select<Size>
  onSelect={id => {
    // Do something with id
  }}
>
  <option value={Size.Small}>Small</option>
  <option value={Size.Medium}>Medium</option>
  <option value={Size.Large}>Large</option>
</Select>

davidgilbertson

<Select
  onSelect={id => {
    // Do something with id
  }}
>
  <option value={Size.Small}>Small</option>
  <option value={Size.Medium}>Medium</option>
  <option value={Size.Large}>Large</option>
</Select>

davidgilbertson

const List = <ItemType extends {id: string}>(props: {
  items: ItemType[];
  renderItem: (item: ItemType) => React.ReactNode;
}) => (
  <ul>
    {props.items.map(item => (
      <li key={item.id}>{props.renderItem(item)}</li>
    ))}
  </ul>
);

davidgilbertson

const List = <ItemType extends any>(props: {
  items: ItemType[]; 
  renderItem: (item: ItemType) => React.ReactNode};
) => (
  <ul>
    {props.items.map(item => (
      <li key={item.id}>{props.renderItem(item)}</li>
    ))}
  </ul>
);

davidgilbertson

const List = <ItemType extends any>(props: {
  items: ItemType[];
  renderItem: (item: ItemType) => React.ReactNode;
}) => (
  <>{props.items.map(props.renderItem)}</>
);