对于具有扩展的可区分联合的 React 组件，TypeScript 错误“不可分配给类型‘IntrinsicAttributes’”

Question

问题：

我有一个对象数组，它们的接口都扩展了一个基本接口。

I want to map these objects onto a React component which will route to specialised components for each of the supported child interfaces -- but first, I want to map over the array and extend each object with an onClick handler, whose signature is a generic which我想专门适应它被映射到的任何子界面。

我想出了一个看起来应该可以工作的解决方案，但我无法摆脱这个 TS 错误： Type 'AWithClick<T>' is not assignable to type 'IntrinsicAttributes 。 我在 SO 和其他地方看到很多与该接口相关的 TS 错误的引用，但似乎没有一个完全适用于此。

我对照这篇有用的文章检查了我的解决方案，我认为我的实现中的主要区别在于我正在尝试使用专门的onClick来扩展联合中的项目，而不是在原始联合中的各个接口中定义专门的onClick . 对象数组来自商店，我基本上是将其实体映射到组件道具，因此我想将组件道具接口与商店接口分开。

复现步骤：

npx create-react-app repro --template typescript

将 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;

现在npm start ，您将看到错误Type 'AWithClick<T>' is not assignable to type 'IntrinsicAttributes

Answer 1

似乎 typescript 不能完全遵循逻辑来知道您正在充分改进类型。

但是这里的TestComponent不需要是泛型的。 您可以简单地将您的参数声明为您支持的内容的超集，然后使用条件优化类型。

这有效：

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

操场

---

通常，在对 generics 的错误消息进行故障排除时，最好问一个问题“这真的需要通用吗？”