如何在TypeScript中声明可接收React类组件实例的变量类型

错误原因分析 #

你之前的写法存在两个问题：

1. typeof MyComponent取的是组件类本身的类型，而你赋值给routes的是<MyComponent />——这是已经被JSX渲染后的React元素，二者类型完全不匹配。
2. 你在写<MyComponent />时没有传入IMyComponentInterfaceWithProps中定义的所有必填属性，这也是你收到属性缺失报错的直接原因。

两种场景的正确写法 #

场景1：routes存储的是已渲染完成的React元素

也就是你示例中routes = (<MyComponent />)的用法，类型声明用React.ReactNode即可，同时要补全组件所有必填属性：

import React from 'react';

// 替换为组件要求的所有必填props
const routes: React.ReactNode = <MyComponent 
  prop1="xxx"
  prop2="xxx"
  // 其余必填属性
/>;

React.ReactNode是React官方提供的通用可渲染内容类型，兼容组件实例、字符串、数字、null等所有合法JSX返回值。

场景2：routes存储的是组件本身，后续使用时再渲染

如果不需要立刻渲染组件，只把组件类/函数存起来后续调用，类型声明用React.ComponentType，泛型传入组件的props类型即可：

import React from 'react';

// 存储组件本身
const routes: React.ComponentType<IMyComponentInterfaceWithProps> = MyComponent;

// 后续使用时再渲染并传入属性
function App() {
  return <routes prop1="xxx" prop2="xxx" />;
}

React.ComponentType是类组件和函数组件的联合类型，两种组件都可以兼容。

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