Bug: Behavior in tsplayground and local project differ

This issue has been tracked since 2022-09-09.

React version: 18.1.0

Steps To Reproduce

  1. Install [email protected] [email protected] [email protected] and the respective @types
  2. Create the following component with props
type FooProps = {
  base: string;
} & (
  | {
      cb: (n: number) => void;
      flag: true;
  | {
      cb: (n: [number]) => void;
      flag: false;

const Foo: React.FC<FooProps> = ({ cb, flag }) => {
  const on = (n: number | [number]) => {
    if (flag && Array.isArray(n)) {
    } else if (!flag && !Array.isArray(n)) {
  return null;
  1. Then on the line with cb(n) the types aren't inferring correctly. If you put this code in a tsplayground it works

Link to code example:

Here's a tsplayground and a codesandbox

The current behavior

The type for n isn't inferring correctly. This happens in codesandbox and vscode locally.

The expected behavior

Same behavior as what happens in the tsplayground which is that the type is correctly narrowed down.

eps1lon wrote this answer on 2022-09-10

Support requests filed as GitHub issues often go unanswered. We want you to find the answer you're looking for, so we suggest the following alternatives:

Coding Questions
If you have a coding question related to React and React DOM, it might be better suited for Stack Overflow. It's a great place to browse through frequent questions about using React, as well as ask for help with specific questions.


Talk to other React developers
There are many online forums which are a great place for discussion about best practices and application architecture as well as the future of React.


More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-10-03
Star Count 195560
Watcher Count 6648
Fork Count 40508
Issue Count 1111


Issue Title Created Date Updated Date