Reactjs 类型脚本交叉类型

我有一些类型脚本定义如下：

接口T1{ 儿童：字符串[]； } 接口T2{ 子项？：数字|布尔|未定义|空； } 所有类型=T1和T2； 常数b：全部={ 儿童：[“测试”]， }; 看

我想知道到底什么类型的All['children']属性

我无法将字符串数组分配给它，也不知道如何使用此交集类型

在现实生活中，React.js在React.Component上有一个children定义，当我定义自己的children类型时，在这种情况下没有错误

更新，在React原生代码中添加一些真实代码。我有以下定义：

界面道具{ 儿童：视图[]； } 导出默认演示扩展了React.Component{ } //稍后在父组件中 我不明白为什么typescript可以处理演示的孩子们。这是React.Component中的子级定义

{ children？：ReactChild | ReactFragment | ReactPortal | boolean | null |未定义； } 因此，在我看来，演示中的最终儿童类型应该是：

children: (View[] & ReactChild) | (View[] & ReactFragment) | (View[] & ReactPortal) | (View[] & boolean) | (View[] & null) | (View[] & undefined)

如何将视图数组作为子对象传递给演示

再次更新，我发现，片段定义是关键

类型ReactFragment={}| ReactNodeArray； 类型ReactNode=ReactChild | ReactFragment | ReactPortal | boolean | null |未定义；

---

{}在ReactFragment中，结果是视图[]&{}，这相当于视图[]

交集类型意味着可分配给该类型的实例必须可分配给交集的组成部分。这会导致编译器将子项键入string[]&number | boolean | undefined | null，这是一种很难实现的类型，可能不是您想要的类型

如果希望所有对象都是T1或T2，则必须使用并集：

interface T1 { 
    children: string[];
}

interface T2 {
    children?: number | boolean | undefined | null;
}

type All = T1 | T2;

const b: All = { // OK
    children: ['test'],
};

---

或者，如果您需要更复杂的合并逻辑，请提供更多详细信息

这是我在阅读React.ReactNode定义时遗漏的内容。定义如下：

类型：文本=字符串|编号； 类型ReactChild=ReactElement | ReactText； 接口ReactNodeArray扩展数组{} 类型ReactFragment={}| ReactNodeArray； 类型ReactNode=ReactChild | ReactFragment | ReactPortal | boolean | null |未定义； //在React.Component中的子项定义，我已删除其他属性定义 类组件{ //道具现在不推荐使用，这意味着` //默认情况下，`P`上的属性不可用，即使您可以 //始终将子项作为可变参数传递给“createElement”。 //将来，如果我们能够有条件地定义它的调用签名 //关于'P'中'children'的存在，那么我们应该去掉这个。 只读道具：只读

&readonly； } //我的自定义组件道具定义 界面道具{ 儿童：视图[]； } 因此，我的组件的子级定义是：

type C = View[] & ReactNode;

// which is equivalent to this C2
type C2 = (View[] & ReactChild) | (View[] & ReactFragment) | (View[] & ReactPortal) | (View[] & boolean) | (View[] & null) | (View[] & undefined);

如果我们更深入，展开这个片段，我们的类型就是这样

type C3 = (View[] & ReactChild) | (View[] & {}) | (View[] & ReactNodeArray) | (View[] & ReactPortal) | (View[] & boolean) | (View[] & null) | (View[] & undefined);

查看[]&{}的结果是什么。我已经写了一个简单的演示

//测试等同于视图[] 类型测试=视图[]和{}；

---

您的示例有效地使所有['children']等效于never，但组件子级的允许类型比您这里的示例多得多。@PatrickRoberts是的，React子级的允许类型多得多，但我不知道为什么。如果我在我的道具中定义children:View[]并使用React的children定义children？：ReactChild | ReactFragment | ReactPortal | boolean | null | undefined；，根据我的理解，最后的类型应该是View[]&ReactChild | View[]&ReactFragment | View[]&ReactPortal | View[]&boolean | View[]&null | View[]&undefined；。当我在组件中将视图数组用作子级时，没有错误。我看不出React children和我的演示定义之间有什么区别。请提供一个可以在他们自己的环境中进行调查的链接，或者更好地提供一个指向web IDE（如codesandbox/stackblitz）的链接，在该IDE中，您的代码已经设置好，然后我们可能会告诉您为什么您的代码工作或不工作。@jcalz thx供您重播。我发现，在React.Component子定义中，类型ReactFragment={}| ReactNodeArray；为您的重播解决此问题。我已经更新了我的帖子。联合类型更容易理解，但交叉点类型则不然。例如React.Component中的子级定义