'yes' | 'no' converted to string when in react state

[matthewoates]

Search Terms:
enums react, unions broken, react union broken, react state union

Code

import React, { Component } from 'react';

type PropsType = {};
type StateType = {
    ans: 'yes' | 'no'
}

// this works
const data: StateType = { ans: 'yes' };

export default class ExampleComponent extends Component<PropsType, StateType> {
    // error
    state = { ans: 'yes' };

    constructor(props: PropsType) {
        super(props);

        // this works
        this.state = { ans: 'yes' };
    }
}

Playground Link

Expected behavior:
no errors

Actual behavior:
error on state = { ans: 'yes' };

(property) ExampleComponent.state: {
    ans: string;
}
Property 'state' in type 'ExampleComponent' is not assignable to the same property in base type 'Component<PropsType, StateType, any>'.
  Type '{ ans: string; }' is not assignable to type 'Readonly<StateType>'.
    Types of property 'ans' are incompatible.
      Type 'string' is not assignable to type '"yes" | "no"'.(2416)

[RyanCavanaugh]

Duplicate #10570. You can use { ans: 'yes' } as const" in the meantime.

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.