TypeScript赋值收窄`type | type[]`不生效问题咨询

问题现象 #

自定义类型的异常情况 #

当使用自定义类型myType时，即使将参数赋值为数组，TypeScript仍无法完成类型收窄，调用函数时会提示类型错误：

declare function foo(first: myType[]): void;

type myType = {};

function x(param: myType | myType []): void {
    param = [];
    foo(param); // 错误提示：param could be myType | myType[]
}

内置类型的正常情况 #

换成内置类型string | string[]时，赋值操作可以正常触发类型收窄：

declare function foo(first: string[]): void;

function x(param: string | string[]): void {
    param = [];
    foo(param); // 无类型错误，TypeScript识别param为string[]
}

React项目中的类似问题 #

在处理ReactNode联合类型时也会遇到相同问题：

import useAutoCycle from '@/hooks/useAutoCycle';
import { ReactNode } from 'react';

interface Props {
  children: ReactNode[] | ReactNode;
  /** Delay between content changes in milliseconds */
  delay: number;
}

function CycleHeader({ children, delay }: Props): JSX.Element {
  if (!Array.isArray(children)) {
    children = [children] as ReactNode[];
  }
  const currentContent = useAutoCycle(children, delay); // 可能提示children类型仍为ReactNode | ReactNode[]
  return <> {currentContent} </>;
}

export default CycleHeader;

核心原因 #

这是TypeScript结构化类型系统的特性导致的：

• 自定义类型myType = {}是一个开放的对象类型，任何对象（包括数组）都符合这个类型的约束——因为数组本质也是对象，满足{}的结构要求。所以[]同时属于myType和myType[]，TypeScript无法通过赋值[]确定它的具体类型。
• 内置原始类型（如string）和对应的数组类型（string[]）结构完全不重叠：原始类型不是对象，数组是对象，所以赋值[]可以明确收窄到string[]。
• ReactNode是一个包含多种类型的联合类型（比如数组本身也属于合法的ReactNode），所以即使把单个ReactNode包装成数组，TypeScript依然无法确定这个数组是否同时符合ReactNode的约束，因此无法自动完成类型收窄。

类型断言（比如as ReactNode[]）是可行的解决方案，本质是通过开发者手动告诉TypeScript变量的具体类型，绕过编译器的自动类型推断限制。

内容的提问来源于stack exchange，提问作者Minelt