JSFiddle - React, Tailwind, and code Playground

TypeScript

// Error!

interface Renderer<Props extends object = object> {
  render: (props: Props) => void;
}
interface SayHelloProps {
  name: { firstName: string };
}
type SayHelloRenderer = Renderer<SayHelloProps>;
const sayHelloRenderer: SayHelloRenderer = {
  render: (props: SayHelloProps) => { console.log('my name is ' + props.name.firstName) }
}
// Error!
//const renderers: Array<Renderer> = [sayHelloRenderer];

// Cast to avoid error
const renderers: Array<Renderer> = [sayHelloRenderer as Renderer];

// But should we be doing this??
const renderer = renderers[0];
// This will throw an error! It's not typesafe!
renderer.render({});