Ts report a wrong comparison when a variable may be changed async.

[HuberTRoy]

🔎 Search Terms

searched This comparison appears to be unintentional because the types ... have no overlap.ts(2367)

🕗 Version & Regression Information

ts: 5.3.2

💻 Code

  let acceptOrCancel: 'pending' | 'cancel' | 'pass' = 'pending';
  

  // I use antd Modal.
  Modal.confirm({
   ....
    onOk: () => {
      acceptOrCancel = 'pass';
    },
    onCancel: () => {
      acceptOrCancel = 'cancel';
    },
  });

  await waitForSomething({ func: () => acceptOrCancel !== 'pending' });
  
 // This comparison appears to be unintentional because the types '"pending"' and '"cancel"' have no overlap.ts(2367)
  if (acceptOrCancel === 'cancel') {
    return {
      status: false,
      msg: 'user reject sign',
    };
  }

🙁 Actual behavior

Modal.confirm will make a modal for user to ask if accept or not, It's async actually, but the function will return immediately. I have declare the type of the variable possible values and wait until the variable change, but Ts also report the error This comparison appears to be unintentional because the types '"pending"' and '"cancel"' have no overlap.ts(2367)

🙂 Expected behavior

Ts don't report the error.

Additional information about the issue

No response

[MartinJohns]

Another duplicate of #9998.

See also this issue template:

TypeScript assuming the wrong type either after a callback runs, or within a callback

[HuberTRoy]

@MartinJohns

So it's expected? Close the issue or not?

[MartinJohns]

It's working as intended, yes. You can either close it yourself, or a TypeScript team member will mark this issue as duplicate and the bot will close it (or they close it directly).

A workaround is to use a type assertion to prevent the initial narrowing upon initialization: let acceptOrCancel = 'pending' as 'pending' | 'cancel' | 'pass'

Also, if possible (and here it clearly is), provide code example that can run on its own, and don't omit the Playground link. Your provided code does not compile as-is.