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

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>
    );
}