Regression with >= v3 and React, generics, defaultProps

[tkrotoff]

I encountered a regression with TypeScript >= 3 + React, generics and defaultProps

• TypeScript versions: 3.1.0-dev.20180810 and 3.0.1, not with < 3

• Search terms: React defaultProps generics

• Code:

import React from 'react';
import ReactDOM from 'react-dom';

interface BaseProps {
  when?: (value: string) => boolean;
}

interface Props extends BaseProps {
}

class FieldFeedback<P extends Props = BaseProps> extends React.Component<P> {
  static defaultProps = {
    when: () => true
  };

  render() {
    return <div>Hello</div>;
  }
}

// Error: Parameter 'value' implicitly has an 'any' type
const Test = () => <FieldFeedback when={value => console.log(value)} />;

ReactDOM.render(<Test />, document.getElementById('app'));

• Expected behavior: No error

• Actual behavior: Parameter 'value' implicitly has an 'any' type at line when={value => ...}

When removing defaultProps, there is no error:

interface BaseProps {
  when?: (value: string) => boolean;
}

interface Props extends BaseProps {
}

class FieldFeedback<P extends Props = BaseProps> extends React.Component<P> {
  /*static defaultProps = {
    when: () => true
  };*/

  render() {
    return <div>Hello</div>;
  }
}

// No error
const Test = () => <FieldFeedback when={value => console.log(value)} />;

Error vscode (using 3.1.0-dev.20180810) screenshot:

No error vscode (using 3.1.0-dev.20180810) screenshot:

Stumble upon this while upgrading this lib: https://github.com/tkrotoff/react-form-with-constraints to TypeScript 3.

I do not think this is related with @types/react. Using v16.4.9 (latest version) it fails with TypeScript >= 3 and works with TypeScript < 3:

[mattmccutchen]

The "regression" is due to TypeScript 3.0 adding support for the JSX.LibraryManagedAttributes special type defined in @types/react, which is used to adjust the expected type of the JSX attributes based on the defaultProps. The relevant definitions:

class Component<P, S> {
    readonly props: Readonly<{ children?: ReactNode }> & Readonly<P>;
    // ...
}

type LibraryManagedAttributes<C, P> =
    C extends { propTypes: infer T; defaultProps: infer D; }
    ? Defaultize<MergePropTypes<P, PropTypes.InferProps<T>>, D>
    : C extends { propTypes: infer T; }
        ? MergePropTypes<P, PropTypes.InferProps<T>>
        : C extends { defaultProps: infer D; }
            ? Defaultize<P, D>  // <--- This case applies.
            : P;

type Defaultize<P, D> = P extends any
    ? string extends keyof P ? P :
        & Pick<P, Exclude<keyof P, keyof D>>
        & Partial<Pick<P, Extract<keyof P, keyof D>>>
        & Partial<Pick<D, Exclude<keyof D, keyof P>>>
    : never;

The expected type of the attributes is based on the props property of the component class:

JSX.LibraryManagedAttributes<typeof FieldFeedback,
    Readonly<{ children?: ReactNode }> & Readonly<P>>

The important things here are the Readonly<P> and the inner conditional type of Defaultize. I was able to reduce the problem to the following, where the {[K in keyof P]: P[K]} plays the same essential role as the Readonly<P>:

interface Props {
  when: (value: string) => boolean;
}

function bad<P extends Props>(
    attrs: string extends keyof P ? {[K in keyof P]: P[K]} : {[K in keyof P]: P[K]}) {}
function good1<P extends Props>(
    attrs: string extends keyof P ? P : {[K in keyof P]: P[K]}) {}
function good2<P extends Props>(
    attrs: {[K in keyof P]: P[K]}) {}

bad({when: value => false});
good1({when: value => false});
good2({when: value => false});

Before using the type of the attrs parameter as a contextual type, the compiler takes its apparent type. For good2, because the mapped type is not instantiable, its apparent type is itself, and the compiler appears to be able to work out the type of the when member. In the other two cases, the conditional type does not simplify, so it is instantiable, so its apparent type is its constraint, which is the union of the constraints of the two branches. The constraint of a generic mapped type is {}, so in bad, the constraint of the entire conditional type is {} and we're out of luck. In good1, the constraint of the conditional type is P | {}, and the compiler appears to be able to work out the type of the when member from that.

I hope this partial analysis is helpful. I don't have a good enough understanding of the intended purposes of the compiler concepts to go any further in speculating about what would be an appropriate fix.

[weswigham]

I opened #26281 as a partial fix for this when I saw this appear in our user suite btw. It at least makes generic index types simplifiable much more often.

[weswigham]

@mattmccutchen I can confirm that your reduced example now builds correctly in master (and have opened #27083 to add your example as a regression test). Does your original project work alongside our latest nightlies?

[mattmccutchen]

The original project belonged to @tkrotoff...

[weswigham]

ah, doh. @tkrotoff I mean. 😺

[weswigham]

ahhh, looking at @tkrotoff 's example, the full Defaultize still doesn't work; just @mattmccutchen 's simplified example.

[weswigham]

Righto, so another problem with defaultize is any - when we're calculating the conditional type's constraint, within the true branch we replace a subsitution type in the root with its substitute. Since P is first checked agaisnt any, it is substituted with any, when then produces any | (Pick<P, Exclude<keyof P, keyof D>> & Partial<Pick<P, Extract<keyof P, keyof D>>> & Partial<Pick<D, Exclude<keyof D, keyof P>>>) which is, ofc, just any.

Two things. Defaultize should probably be P extends unknown and we should probably have the constraint be the intersection of the type parameter and the substitute for it, not just the substitute.

[weswigham]

Scratch that. Has nothing to do with any of that. Real remaining issue is that the contextual type created by inference isn't being applied to the attributes correctly. Haaaaaaaaaaaaaaaaaah.