Reactjs TypeScript错误“；不可分配给类型'；内在的敬意'&引用；对于具有扩展判别并集的React组件 问题:

我有一个对象数组，其所有接口都扩展了一个基本接口

我想将这些对象映射到React组件上，该组件将路由到每个受支持子接口的专用组件上——但首先，我想映射到数组上，并使用

onClick

处理程序扩展每个对象，他的签名是一个通用的，我想专门针对它映射到的任何子接口

我已经想出了一个解决方案，看起来它应该可以工作，但我无法摆脱这个TS错误：

键入'AWithClick'不可分配给键入'intrinsitartributes

。我在SO和其他地方看到了大量与该接口相关的TS错误的引用，但这里似乎没有一个适用

我检查了我的解决方案，我认为我的实现中的主要区别在于，我试图用专门的

onClick

s扩展联合中的项目，而不是在原始联合中的各个接口中定义专门的

onClick

s。对象数组来自一个存储，我基本上是将它的实体映射到组件道具，所以我想将组件道具接口与存储接口分开

重新编程的步骤：

npx创建反应应用程序复制--模板类型脚本

将App.tsx替换为以下内容：

import React from 'react';

enum AType { 'as', 'an' }

interface A {
  type: AType;
}

interface AS extends A {
  type: AType.as;
  value: string;
}

interface AN extends A {
  type: AType.an;
  value: number;
}

type AnyA = AS | AN;

type AWithClick<T extends AnyA> = T & { onClick: (value: T['value']) => void }

const ASComponent = (props: AWithClick<AS>) => <button onClick={() => props.onClick(props.value)}>{props.value}</button>;
const ANComponent = (props: AWithClick<AN>) => <button onClick={() => props.onClick(props.value)}>{props.value}</button>;

const TestComponent = <T extends AnyA>(props: AWithClick<T>) => {
  switch (props.type) {
    case AType.as: return <ASComponent {...props} />;
    case AType.an: return <ANComponent {...props} />;
  }
};

const withoutClicks = [
  { type: AType.as, value: 'AS!' } as AS,
  { type: AType.an, value: 1 } as AN,
];

const withClicks = withoutClicks.map(<T extends AnyA>(props: T) => ({
  ...props,
  onClick: (value: T['value']) => { console.log(value) },
}));

const TestComponentMain = () =>
  <div>
    {withClicks.map(props => <TestComponent {...props} key={props.type} />)}
  </div>
  
export default TestComponentMain;

从“React”导入React；
枚举类型{'as'，'an}
接口A{
类型：AType；
}
接口扩展为{
类型：AType.as；
值：字符串；
}
接口扩展了{
类型：AType.an；
值：数字；
}
类型AnyA=AS | AN；
键入AWithClick=T&{onClick:（值：T['value']）=>void}
const ASComponent=（props:AWithClick）=>props.onClick（props.value）}>{props.value}；
const-ANComponent=（props:AWithClick）=>props.onClick（props.value）}>{props.value}；
const TestComponent=（道具：AWithClick）=>{
开关（道具类型）{
案例AType.as：返回；
案例AType.an：返回；
}
};
无点击的常数=[
{type:AType.as，值：'as！'}as，
{type:AType.an，值：1}作为，
];
const with clicks=without clicks.map（（道具：T）=>({
…道具，
onClick：（value:T['value']）=>{console.log（value）}，
}));
常量TestComponentMain=（）=>
{withClicks.map（props=>）}
导出默认TestComponentMain；

---

现在

npm start

您将看到错误

Type'AWithClick'不可分配给Type'intrinsitattributes

似乎typescript不能完全遵循逻辑来知道您正在充分地细化类型

但是这里的

TestComponent

不需要是泛型的。您可以简单地将您的参数声明为您所支持的超集，然后使用条件对类型进行优化

这项工作：

const TestComponent = (props: AWithClick<AnyA>) => {
  switch (props.type) {
    case AType.as: return <ASComponent {...props} />;
    case AType.an: return <ANComponent {...props} />;
  }
};

const TestComponent=（道具：AWithClick


一般来说，当使用泛型对错误消息进行故障排除时，最好问一个问题“这真的需要泛型吗？”
谢谢，这完美地解决了这个问题，让我免于疯狂。我不知道为什么
键入“AWithClick”不能指定为键入“intrinsitattributes”
是我看到的错误-如果你/任何人都能理解，我很想理解-但不管怎样，这让我摆脱了麻烦，所以谢谢！