Typescript Example - Generic items & render

typescript-example-generic-items-render.ts

/**
 * A TypeScript example of a generic type used
 * by a function where the type passed
 * into the function allows TypeScript to infer the
 * type of another value passed in.
 */

interface Params<I> {
  items: I[];
  render: (item: I) => void;
}

function foo<I>({ items, render }: Params<I>) {
  items.forEach(render);
}
// Alternative: Arrow syntax
// Note that this syntax doesn't work in tsx files due to conflicts with JSX syntax
// const foo = <I>({ items, render }: Params<I>) => {
//   items.forEach(render);
// };

interface Square {
  h: number;
  w: number;
}

interface Circle {
  r: number;
}

const circles: Circle[] = [{ r: 1 }, { r: 2 }];
const squares: Square[] = [
  { h: 1, w: 2 },
  { h: 3, w: 4 },
];

foo({
  // circles has the type Circle[]
  items: circles,
  // so the render function's first parameter is assumed to be a Cirlce
  render: circle => console.log(`Circle with radius ${circle.r}`),
});
foo({
  // Now squares has the type Square[]
  items: squares,
  // so the render function's first parameter is assumed to be a Square
  render: square => console.log(`Square of size ${square.h} x ${square.w}`),
});