React ComponentType与Props接口适配：TypeScript错误2322求解

问题原因 #

你遇到的TS2322错误，核心是TypeScript的泛型约束逻辑：当TComponent作为Test的子类型时，foo的类型可能被收窄为更具体的类型（比如字面量类型100），而你传入的123是基础number类型，无法匹配子类型中更严格的foo类型要求。举个例子，如果有组件的Props定义为{foo: 100; test: string}，硬传123就会触发类型不匹配。

解决方案 #

方案1：类型断言（快速解决，需注意适用场景） #

直接通过类型断言告诉TypeScript，组合后的props符合TComponent的要求。这种方式简单直接，但如果你的场景中存在foo被收窄为字面量类型的组件，运行时可能出现不符合预期的情况，适合你确定foo始终是number类型的场景：

import React, { ComponentType, JSX } from 'react'

interface Test {
  foo: number
  test: string
}

const openWindow = 
  <TComponent extends Test>(Window: ComponentType<TComponent>, props: Omit<TComponent, 'foo'>):
    JSX.Element => <Window {...props as TComponent} foo={123} />

方案2：约束泛型的foo类型（更安全） #

调整泛型约束，明确要求TComponent的foo类型必须兼容number，避免子类型收窄导致的不兼容：

import React, { ComponentType, JSX } from 'react'

interface Test {
  foo: number
  test: string
}

const openWindow = 
  <TProps extends Omit<Test, 'foo'> & { foo: number }>(Window: ComponentType<TProps>, props: Omit<TProps, 'foo'>):
    JSX.Element => <Window foo={123} {...props} />

或者通过提取TComponent的foo类型，确保传入的值完全符合该类型要求：

import React, { ComponentType, JSX } from 'react'

interface Test {
  foo: number
  test: string
}

const openWindow = 
  <TComponent extends Test>(Window: ComponentType<TComponent>, props: Omit<TComponent, 'foo'>):
    JSX.Element => {
      const foo: TComponent['foo'] = 123 as TComponent['foo'];
      return <Window foo={foo} {...props} />;
    }

这种方式更安全，即使foo是字面量类型，只要123属于该字面量的范围，就能正常适配。

内容的提问来源于stack exchange，提问作者helion3