VSCode中模块联邦（Module Federation）的智能提示实现方案

方案1：手动/自动生成类型声明文件（最直接） #

手动编写类型声明 #

如果远程组件的Props结构稳定且简单，直接在本地项目里写类型声明就行：

• 在项目根目录创建types/remote-components.d.ts文件
• 编写组件的Props类型和远程模块的声明：

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

// 定义远程Button组件的Props类型
export interface RemoteButtonProps {
  label: string;
  onClick?: () => void;
  disabled?: boolean;
}

// 声明远程模块的类型，对应模块联邦的导入路径
declare module 'remoteApp/Button' {
  const Button: ComponentType<RemoteButtonProps>;
  export default Button;
}

• 之后正常导入使用组件，VSCode/IntelliJ会自动识别类型并给出Props补全：

import { lazy, Suspense } from 'react';

const RemoteButton = lazy(() => import('remoteApp/Button'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      {/* 这里会自动补全label、onClick等Props */}
      <RemoteButton label="点我" />
    </Suspense>
  );
}

自动拉取远程类型文件 #

要是远程组件的Props经常变动，让远程项目构建时生成类型文件并放到可访问的地址（比如CDN），本地写个脚本定期拉取就行：

1. 远程项目配置：在tsconfig.json里开启declaration: true，构建时会生成.d.ts类型文件，把这些文件上传到CDN（比如https://remote-app-cdn.com/types/Button.d.ts）
2. 本地项目写个拉取脚本scripts/fetch-remote-types.js：

// scripts/fetch-remote-types.js
const fs = require('fs');
const fetch = require('node-fetch');

async function fetchTypes() {
  const buttonTypeUrl = 'https://remote-app-cdn.com/types/Button.d.ts';
  const response = await fetch(buttonTypeUrl);
  const typeContent = await response.text();
  // 创建目录并写入类型文件
  fs.mkdirSync('./types/remote', { recursive: true });
  fs.writeFileSync('./types/remote/Button.d.ts', typeContent);
}

fetchTypes().catch(console.error);

3. 在package.json里加个脚本："fetch-types": "node scripts/fetch-remote-types.js"，定期运行就能拉取最新类型
4. 在tsconfig.json的include数组里加上"types/remote/**/*.d.ts"，让TypeScript识别这些类型

方案2：类型声明+类型断言（快速临时方案） #

如果暂时拿不到远程组件的准确类型，用类型断言先实现基础提示：

import { lazy, Suspense, ComponentType } from 'react';

// 先定义临时的Props类型
interface TempRemoteCardProps {
  title: string;
  content: string;
  footer?: React.ReactNode;
}

// 加载远程组件并断言为定义好的类型
const RemoteCard = lazy(() => import('remoteApp/Card')) as ComponentType<TempRemoteCardProps>;

// 使用时就能获得Props补全
function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <RemoteCard title="卡片标题" content="卡片内容" />
    </Suspense>
  );
}

这种方式适合快速开发，后续拿到准确类型再替换临时定义就行。

方案3：模块联邦类型共享插件（团队协作场景） #

如果远程项目也是TypeScript开发的，用模块联邦的类型共享插件可以自动同步类型：

1. 远程项目的webpack配置：安装@module-federation/typescript，配置插件导出类型：

// remote webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
const { FederatedTypesPlugin } = require('@module-federation/typescript');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button',
      },
    }),
    new FederatedTypesPlugin({
      federationConfig: {
        name: 'remoteApp',
        exposes: {
          './Button': './src/components/Button',
        },
      },
    }),
  ],
};

2. 本地项目的webpack配置：同样安装插件，配置拉取远程类型：

// host webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
const { FederatedTypesPlugin } = require('@module-federation/typescript');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@https://remote-app-cdn.com/remoteEntry.js',
      },
    }),
    new FederatedTypesPlugin({
      remotes: {
        remoteApp: 'remoteApp@https://remote-app-cdn.com/remoteEntry.js',
      },
    }),
  ],
};

3. 启动本地项目时，插件会自动把远程组件的类型拉到本地@mf-types目录，TypeScript会自动识别，不用手动维护类型。

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