请教各位在 TS 中怎样对一个联合类型进行类型收窄呢？

[Danswerme]

React 组件的 Props 接收一个 config 数组，config 数组里面是 React 组件或者自定义配置；如果是 React 组件则直接渲染，否则按照配置项进行渲染。

目前我是通过typeof来判断Item的类型，请教各位有没有更优雅的方法呢？

代码如下：

interface ItemConfig {
    name: string,
    type: string
}

type Config = ItemConfig | React.FC;

interface XProps {
	config: Config[]
}

const Components = ({ config } : XProps) => {
    return (
        <div>
            {
                config.map(Item => {
                    if (typeof Item === "function") {
                        if (React.isValidElement(Item)) {
                            // 如果是 React 组件
                            return <Item />;
                        }

                        return null;
                    }
                    
                    // 如果是自定义配置
                    
                    ...
                    
                    return ...
                })
            }
        </div>
    );
}

[leokun]

我感觉你做的和我一样，我感觉没什么毛病，ts 不能在运行时检查，只能通过 js 的 typeof 来推断

[XCFOX]

https://react.dev/reference/react/isValidElement

[Danswerme]

@leokun
@XCFOX 谢谢！