懒加载React复合组件时遭遇TypeScript警告问题

当用React.lazy导入组件时，返回的LazyExoticComponent类型仅包装原组件的核心函数类型，不会自动继承你挂载在组件上的静态属性（比如示例中的A.component），因此TypeScript会提示该属性不存在。

下面是几种可行的解决方法：

方案1：为组件定义包含静态属性的完整类型 #

先明确组件的类型结构，把静态属性纳入类型声明中：

import type { ReactNode, ComponentType } from 'react';

// 定义包含静态属性的组件类型
type ComponentA = React.FC<{ children: ReactNode }> & {
  component: ComponentType;
};

const A: ComponentA = ({ children }) => {
  return <div>{children}</div>;
};

A.component = SomeComponent;

export default A;

之后懒加载该组件时，TypeScript就能自动识别到component静态属性，不会再报错。

方案2：使用类型断言临时兼容 #

如果不想修改原组件的类型定义，可以在懒加载时通过类型断言明确告知TypeScript属性存在：

const A = React.lazy(() => import('./A')) as typeof import('./A').default;

// 或者更精准的断言方式
const A = React.lazy(() => import('./A')) as (
  React.LazyExoticComponent<typeof import('./A').default> & {
    component: typeof import('./SomeComponent').default;
  }
);

方案3：拆分导出静态组件 #

如果场景允许，把静态组件单独导出，避免依赖主组件的静态属性挂载：

// A.tsx
export default function A({ children }: { children: ReactNode }) {
  return <div>{children}</div>;
}

// 单独导出静态组件
export const AComponent = SomeComponent;

使用时按需导入：

const A = React.lazy(() => import('./A'));
// 静态组件无需懒加载可直接导入
import { AComponent } from './A';

// 使用<AComponent />即可

内容的提问来源于stack exchange，提问作者Игор Ташевски