Contextual typing with optional discriminant

[matt-tingen]

TypeScript Version: 3.5.0-dev.20190525

Search Terms: discriminated union, optional discriminant, contextual typing, missing vs undefined

Opened from SO question since this seems like a possible bug.

TypeScript supports using an explicit undefined for the value of an optional discriminant and contextual typing works with that, but contextual typing does not fully work when an optional discriminant is missing.

Code

interface NumProps {
  isString?: false
  onChange: (value: number) => void
}

interface StringProps {
  isString: true,
  onChange: (value: string) => void
}

type Props = NumProps | StringProps

const props: Props = {
  // Error: Parameter 'value' implicitly has an 'any' type.
  // Expected: 'value' is contextually typed as 'number'.
  onChange: value => {},
}

const propsUndefined: Props = {
  isString: undefined,
  // OK: 'value' is contextually typed as 'number'. 
  onChange: value => {},
}

Expected behavior: value is contextually typed as number for props

Actual behavior: value is any

Playground Link: Playground (enable strict options)

As pointed out in the SO comments, annotating value with an invalid type will error which suggests that TS is correctly resolving the discriminated union, but possibly not applying contextual typing to onChange at the right time.

const props: Props = {
  // Error: Type 'number' is not assignable to type 'boolean'.
  onChange: (value: boolean) => {}
}

Related Issues:
#16817
#13195 (Missing vs undefined props)

[NiGhTTraX]

Hitting the same exact problem when trying to improve the types for react-select: Playground Link.

It appears that we can work around it with overloads, but then exporting the type for the component is difficult due to #32164.

import React from 'react';

type SingleProps = { isMulti?: false; onChange: (value: number) => void };
type MultiProps = { isMulti: true; onChange: (value: number[]) => void };

function Select(props: SingleProps): JSX.Element;
function Select(props: MultiProps): JSX.Element;
function Select(props: SingleProps | MultiProps): JSX.Element {
  return <span>foo</span>;
};

const x = [
  <Select onChange={value => console.log(value)} />,
  <Select isMulti={false} onChange={value => console.log(value)} />,
  <Select isMulti onChange={value => console.log(value)} />,
];

Playground Link

[asterikx]

Still not working in TS 4.2.4 😕

[david10sing]

It seems to be working on the TS playground now. The type of value is inferred correctly. However, if you add an optional property on B, and you add that property to props, there is no error which I think is incorrect.