使用Module Federation与Lazy/Suspense时如何正确为组件添加类型校验？

核心问题分析 #

你遇到的类型错误，本质是.d.ts文件中对远程组件的类型定义存在两处问题：

1. 错误的React导入方式（import { React } from 'react'是错误写法，React是默认导出）；
2. React.LazyExoticComponent包裹的组件类型未被TypeScript正确识别。

正确的类型定义方案 #

方案一：远程应用提供类型（最佳实践）

如果能控制远程应用，建议在远程组件中直接导出Props类型，宿主应用可直接复用，避免重复定义：

// 远程应用的Button组件文件
import React from 'react';

// 导出Props类型
export interface ButtonProps {
  label: string;
}

const Button: React.FC<ButtonProps> = ({ label }) => {
  return <button>{label}</button>;
};

export default Button;

宿主应用中直接导入组件和类型，无需额外编写.d.ts：

import { lazy, Suspense } from 'react';
const Button = lazy(() => import('remote/Button'));
// 导入远程组件的Props类型
import type { ButtonProps } from 'remote/Button';

function App() {
  return (
    <>
      <h1>Host app</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <Button label="测试按钮" /> {/* 自动校验props，不传label会报错 */}
      </Suspense>
    </>
  );
}

方案二：远程应用不提供类型，宿主自行定义

如果无法修改远程应用，在宿主应用中创建remote.d.ts文件，正确声明模块类型：

// remote.d.ts
import type { ComponentType } from 'react';

// 定义组件Props
export interface ButtonProps {
  label: string;
}

// 声明远程模块的默认导出为符合Props的组件类型
declare module 'remote/Button' {
  const Button: ComponentType<ButtonProps>;
  export default Button;
}

宿主应用导入组件时，TypeScript会自动读取.d.ts的类型定义，实现静态校验：

import { lazy, Suspense } from 'react';
const Button = lazy(() => import('remote/Button'));

function App() {
  return (
    <>
      <h1>Host app</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <Button label="测试按钮" /> {/* 正确识别label属性，类型不匹配会报错 */}
      </Suspense>
    </>
  );
}

之前写法报错的原因 #

你之前的代码中import { React } from 'react'是错误的，应使用类型导入import type { FC, ComponentType } from 'react'（避免编译时引入冗余代码）。另外，ComponentType比FC更通用，兼容函数组件和类组件，且不会隐含children属性（若组件不需要children，用ComponentType可避免不必要的类型警告）。

内容的提问来源于stack exchange，提问作者sore-spot