React.FC<SpecificProps> 不可分配给 React.FC<GenericProps>，但 props 是可分配的

Question

我有组件的道具：

interface SpecyficProps {
  data: {
    body: string
  }
}

可分配给抽象道具

interface ComponentProps {
  data: {
    [propName: string]:
      | string
      | number
      | ComponentProps
      | ComponentProps[]
      | undefined
  }
}

const specyficProps: SpecyficProps = {
  data: {
    body: 'xxxx',
  },
}

// ok
const universalProps: ComponentProps = specyficProps

但是FunctionalComponents使用这个道具不是：

const specyficComponent: React.FC<SpecyficProps> = ({ data }) => null

// error
const universalComponent: React.FC<ComponentProps> = specyficComponent

Type 'FC<SpecyficProps>' is not assignable to type 'FC<ComponentProps>'.
  Types of parameters 'props' and 'props' are incompatible.
    Type 'PropsWithChildren<ComponentProps>' is not assignable to type 'PropsWithChildren<SpecyficProps>'.
      Type 'PropsWithChildren<ComponentProps>' is not assignable to type 'SpecyficProps'.
        Types of property 'data' are incompatible.
          Property 'body' is missing in type '{ [propName: string]: string | number | ComponentProps | ComponentProps[] | undefined; }' but required in type '{ body: string; }'.(2322)
input.tsx(16, 5): 'body' is declared here.

如何将此组件类型定义为可分配？

playground link

Answer 1

此错误源于strictFunctionTypes，introduced in 2.6. As this will compile, one "solution"将此关闭。一种替代方法是在界面中引入层次结构。让最低接口成为最高接口的子类型，它就会编译。基本上这些变化

type HigherMost = SpecyficProps | ComponentProps 

const specyficComponent: React.FC<HigherMost> = ({ data }) => null

// ok
const universalComponent: React.FC<ComponentProps> = specyficComponent

React.FC<SpecificProps> 不可分配给 React.FC<GenericProps>，但 props 是可分配的

React.FC<SpecificProps> is not assignable to React.FC<GenericProps>, but props are assignable

types

typescript

reactjs

react-functional-component