true| false can not be used to create discriminated unions

[sebald]

TypeScript Version: 2.4.2

Code

Link to the playground

type One = {
  kind: true;
  foo: string;
} 

type Two = {
  kind: false;
  foo: boolean;
}

type Options = One | Two;

const fn = (options: Options) => { /* ... */ };

const optionsOne = { kind: true, foo: 'bar' };

/**
 * ERROR:
 * Types of property 'kind' are incompatible.
 * Type 'boolean' is not assignable to type 'false'.
 */
fn(optionsOne);

/**
 * No Error.
 */
fn({ kind: true, foo: 'bar' })

Expected behavior: Should be possible to use true | false to create a discriminated union. It seems like true | false and boolean are not interchangeable.

Actual behavior: TypeScript does not widen the above kind to boolean and thus optionsOne can not be used as input for fn. (That's just my wild guess :-x) It's not possible to use true and false for discriminated unions.

[ahejlsberg]

This is working as intended. In the declaration of optionsOne you need some indication that you don't want the kind property widened. Absent that, the compiler widens the type because a property is a mutable location. You can add a type annotation to indicate your intent:

const optionsOne: One = { kind: true, foo: 'bar' };

Once you have a type annotation the object literal is contextually typed by that annotation and the compiler knows not to widen. For the same reason, there is no error in the call where you directly specify an object literal because the literal is contextually typed by the corresponding parameter type (Options) in the function.

[sebald]

Thanks for the quick and throughout explanation!

My actual use case for this was that I created typings for a library and wanted to have a strongly typed API. This is the original code that caused this issue:

// index.d.ts
declare module 'material-ui/List/ListItem' {
  import { ButtonBaseProps } from 'material-ui/internal/ButtonBase';

  interface ListItemCommonProps extends React.LiHTMLAttributes<HTMLLIElement> {
    component?: React.ReactNode;
    dense?: boolean;
    disabled?: boolean;
    disableGutters?: boolean;
    divider?: boolean;
  }

  export type ListItemDefaultProps = {
    button?: false;
  } & ListItemCommonProps;

  export type ListItemButtonProps = {
    button?: true;
  } & ListItemCommonProps &
    ButtonBaseProps;

  export type ListItemProps = ListItemDefaultProps | ListItemButtonProps;

  export default class ListItem extends MaterialUI.Component<ListItemProps> {}
}

And even casting didn't help here:

class DockedDrawer extends React.Component<{}, { docked: boolean }> {
  state = { docked: true }

  render() {
    const docked:true|false = this.state.docked;
    return (
      <Drawer
        anchor="bottom"
        open={true}
        docked={docked}
      >
        List
      </Drawer>
    );
  }

I thought I can use discriminated unions to only allow certain props on the component, depending on other props.

[mhegazy]

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.

[michaeljota]

Hi @sebald maybe if you remove the optional operator from the type, then it would work as you want. You know that the parameter could be either true or false, however I think this parameter will always exists, even if it doesn't it would simple will be evaluated to a falsy value.

Update: It works as you expect, and narrow down the type of the props. :).

  export type ListItemDefaultProps = {
    button: false;
  } & ListItemCommonProps;

  export type ListItemButtonProps = {
    button: true;
  } & ListItemCommonProps;