如何让自定义React Show控制流组件支持Typescript类型窄化？

核心原因是Typescript的控制流分析默认不会跨组件属性边界生效，你之前的实现中when属性和children的类型没有强绑定，自然没法把when的类型判断结果同步到children内部。
最优的改造方案是用泛型+函数式children传递窄化后的值，实现代码如下：

import type { ReactNode } from "react";

// 定义泛型Props，把when的非空类型绑定到children的入参上
type ShowProps<T> = {
  when: T | null | undefined | false;
  fallback?: ReactNode;
  // children是接收窄化后非空值的函数
  children: (validValue: NonNullable<T>) => ReactNode;
};

// 类型守卫：判断值是否为真值，自动窄化为非空类型
function isTruthy<T>(val: T | null | undefined | false): val is NonNullable<T> {
  return Boolean(val);
}

export function Show<T>({ when, fallback, children }: ShowProps<T>) {
  if (isTruthy(when)) {
    // 无需额外类型断言，when已经被窄化为NonNullable<T>
    return <>{children(when)}</>;
  }
  return fallback ?? null;
}

使用示例 #

const value: { nested: string } | null = Math.random() > 0.5 ? { nested: "test" } : null;

<Show when={value} fallback={<div>无数据</div>}>
  {/* 这里的val会被自动推断为{ nested: string }类型，无需可选链 */}
  {(val) => <div>{val.nested}</div>}
</Show>

补充说明 #

如果不想改造成函数式children的写法，目前没有完美的兼容方案：Typescript的类型系统限制了无法将组件属性的判断结果穿透到作为React节点的children内部做自动类型窄化。 #

内容的提问来源于stack exchange，提问作者L.Blondy