Type inference problem with generics and Readonly

[jbialobr]

TypeScript Version: 3.0.1

Search Terms:
Type inference generics Readonly

Code

class ReactComponent<P>
{
 public constructor(public props: Readonly<P>)
 {
 }
}

interface XampleProps
{
 x?: boolean;
}

class Xample<PT extends XampleProps = XampleProps> extends ReactComponent<PT>
{
 public render()
 {
 const localX = this.props.x;
 return this.doSthWithX(localX || false);
 }

 private doSthWithX(data: boolean): boolean
 {
 return data;
 }
}

Expected behavior:

Code should compile with no errors.

Actual behavior:

The compiler complains about the return this.doSthWithX(localX || false); line. It says:

Argument of type 'PT["x"]' is not assignable to parameter of type 'boolean'.
 Type 'boolean | undefined' is not assignable to type 'boolean'.
 Type 'undefined' is not assignable to type 'boolean'.

Adding the explicit type for localX solves the problem.

class Xample<PT extends XampleProps = XampleProps> extends ReactComponent<PT>
{
 public render()
 {
 const localX: boolean | undefined = this.props.x;
 return this.doSthWithX(localX || false);
 }

 private doSthWithX(data: boolean): boolean
 {
 return data;
 }
}

Removing the Readonly from the ReactComponent also eliminates the compiler error.

Playground Link:

Related Issues:
Perhaps #26418

Simplified repro:

function f<P extends { x?: boolean }>(props: { [K in keyof P]: P[K] }): boolean {
 return props.x || false;
}

[RyanCavanaugh]

Requires strictNullChecks on; not a regression

[RyanCavanaugh]

We'd need #22348 or something similar to correctly typecheck this -- it requires the checker understanding that all of the truthy values of the mapped type's x property are boolean, which is not immediately apparent.