Higher order type inference from generic constructors

In TypeScript 3.4, we improved inference for when generic functions that return functions like so:

  1. function compose<T, U, V>(
  2.     f: (x: T) => U, g: (y: U) => V): (x: T) => V {
  4.     return x => g(f(x))
  5. }

took other generic functions as arguments, like so:

  1. function arrayify<T>(x: T): T[] {
  2.     return [x];
  3. }
  5. type Box<U> = { value: U }
  6. function boxify<U>(y: U): Box<U> {
  7.     return { value: y };
  8. }
  10. let newFn = compose(arrayify, boxify);

Instead of a relatively useless type like (x: {}) => Box<{}[]>, which older versions of the language would infer, TypeScript 3.4’s inference allows newFn to be generic.Its new type is <T>(x: T) => Box<T[]>.

TypeScript 3.5 generalizes this behavior to work on constructor functions as well.

  1. class Box<T> {
  2.     kind: "box";
  3.     value: T;
  4.     constructor(value: T) {
  5.         this.value = value;
  6.     }
  7. }
  9. class Bag<U> {
  10.     kind: "bag";
  11.     value: U;
  12.     constructor(value: U) {
  13.         this.value = value;
  14.     }
  15. }
  18. function composeCtor<T, U, V>(
  19.     F: new (x: T) => U, G: new (y: U) => V): (x: T) => V {
  21.     return x => new G(new F(x))
  22. }
  24. let f = composeCtor(Box, Bag); // has type '<T>(x: T) => Bag<Box<T>>'
  25. let a = f(1024); // has type 'Bag<Box<number>>'

In addition to compositional patterns like the above, this new inference on generic constructors means that functions that operate on class components in certain UI libraries like React can more correctly operate on generic class components.

  1. type ComponentClass<P> = new (props: P) => Component<P>;
  2. declare class Component<P> {
  3.     props: P;
  4.     constructor(props: P);
  5. }
  7. declare function myHoc<P>(C: ComponentClass<P>): ComponentClass<P>;
  9. type NestedProps<T> = { foo: number, stuff: T };
  11. declare class GenericComponent<T> extends Component<NestedProps<T>> {
  12. }
  14. // type is 'new <T>(props: NestedProps<T>) => Component<NestedProps<T>>'
  15. const GenericComponent2 = myHoc(GenericComponent);

To learn more, check out the original pull request on GitHub.