如何在React组件中动态导入对应上下文的TypeScript type类型？

TypeScript 的类型系统是静态编译期生效的，没办法像运行时模块那样动态导入类型，但可以通过以下几种方式实现不同上下文下使用对应类型约束的效果：

方法1：泛型组件+类型参数 #

把组件改成泛型形式，让调用方传入对应的 TYPE_IMPORT 类型，实现精准约束：

import type { TYPE_IMPORT as TYPE1 } from 'example/import/path1';
import type { TYPE_IMPORT as TYPE2 } from 'example/import/path2';

interface IFooProps<T extends string> {
  name: T;
}

export const FooComponent = <T extends string>(props: IFooProps<T>) => {
  const { name } = props;

  return (
    <svg>
      <use href={`#${name}`} />
    </svg>
  );
};

// 调用时指定对应类型
const Foo1 = () => <FooComponent<TYPE1> name="foo" />;
const Foo2 = () => <FooComponent<TYPE2> name="pikachu" />;

方法2：工厂函数生成类型绑定的组件 #

如果不想每次调用都手动传泛型参数，可以写一个工厂函数，生成绑定好特定类型的组件：

import type { TYPE_IMPORT as TYPE1 } from 'example/import/path1';
import type { TYPE_IMPORT as TYPE2 } from 'example/import/path2';

interface IFooProps<T extends string> {
  name: T;
}

const createFooComponent = <T extends string>() => {
  return (props: IFooProps<T>) => {
    const { name } = props;
    return (
      <svg>
        <use href={`#${name}`} />
      </svg>
    );
  };
};

// 生成对应场景的组件
export const FooComponentForPath1 = createFooComponent<TYPE1>();
export const FooComponentForPath2 = createFooComponent<TYPE2>();

// 使用示例
const Foo1 = () => <FooComponentForPath1 name="bar" />;
const Foo2 = () => <FooComponentForPath2 name="charmander" />;

方法3：构建时条件类型（适合固定场景区分） #

如果你的不同上下文是构建阶段就能确定的（比如生产/开发环境、不同打包入口），可以用条件类型结合环境变量自动选择类型：

import type { TYPE_IMPORT as TYPE1 } from 'example/import/path1';
import type { TYPE_IMPORT as TYPE2 } from 'example/import/path2';

// 根据环境变量自动切换类型
type TYPE_IMPORT = typeof process.env.NODE_ENV extends 'production' ? TYPE1 : TYPE2;

interface IFooProps {
  name: TYPE_IMPORT;
}

export const FooComponent = (props: IFooProps) => {
  const { name } = props;
  return (
    <svg>
      <use href={`#${name}`} />
    </svg>
  );
};

这种方式需要确保构建工具（如 Webpack、Vite）能正确替换环境变量。

总结：虽然无法实现运行时动态导入类型，但通过泛型、工厂函数或构建时条件类型的方式，完全可以满足不同上下文下组件使用对应类型约束的需求。

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