Allow the Context type to be passed a Component type to infer props

[brainkim]

Currently, the first type parameter to the Context class is the props for the component:

function *Greeting(this: Context<{name: string}>, {name}: {name: string}) {
  let count = 0;
  for ({name} of this) {
    yield <div>Hello, {name} {count++}</div>;
  }
}

Unfortunately, this leads to the situation where we have to type the props twice, once for the Context, and once for the props parameter. TypeScript uses the type of the first parameter in JSX, so it’s important that the props are typed. Nevertheless, it’s annoying to have to either type out the props twice, or to extract the props in a separate type.

I was playing around in the TypeScript playground, and you can actually reference the function type of the function you’re currently defining in its parameters. So, I had the idea that, rather than passing the props to the current context, you could pass the component type itself, and infer the props. This works:

interface Context<TComponent extends (this: Context<never>, props: never) => unknown> {
  props: Parameters<TComponent>[0];
  [Symbol.iterator](): Generator<Parameters<TComponent>[0]>;
}

function *Greeting(this: Context<typeof Greeting>, {name}: {name: string}) {
  let count = 0;
  for ({name} of this) {
    yield <div>Hello, {name} {count++}</div>;
  }
}

The this: Context<typeof Greeting> seems like a more or less acceptable amount of syntax for the user, and it allows props to be defined inline. Unfortunately, this requires us to change the TypeScript API, so it would be a breaking change. We could define another type name that does the same thing, but I’m feeling like ripping off the band-aid, as this is only a TypeScript thing and wouldn’t have an effect on the runtime. Plus I can’t think of a name for the alternative type.

Something to think about.

[brainkim]

Added in 0.5.0