如何在JavaScript中编程实现动态创建带装饰器的类声明

最优方案：手动调用装饰器（无动态代码执行，无安全风险） #

装饰器本质是运行时调用的高阶函数，@Type(() => DynamicType) data的语法糖等效于手动执行Type(() => DynamicType)(类原型, 'data')，完全不需要动态生成类代码，直接在运行时传入动态参数即可：

import { Type } from "external-module";

// 工厂函数，运行时传入动态类型参数生成对应包装类
function createTypeWrapper(DynamicType) {
  class TypeWrapper {
    data;
  }
  // 手动应用Type装饰器，等效于装饰器语法效果
  Type(() => DynamicType)(TypeWrapper.prototype, 'data');
  return TypeWrapper;
}

// 运行时传入任意动态类型生成类
const DynamicClass = class {
  // 可在运行时动态定义的类逻辑
};
const MyTypeWrapper = createTypeWrapper(DynamicClass);

// 正常实例化使用
const instance = new MyTypeWrapper();

替代方案1：修正eval动态生成类的写法 #

eval运行在当前模块作用域，可以直接访问当前模块提前导入的依赖，不需要在eval字符串内写import语句：

import { Type } from "external-module";

// 运行时动态类
const runtimeDynamicClass = class {};

// 动态生成带装饰器的类，可直接引用当前作用域的Type和runtimeDynamicClass
const TypeWrapper = eval(`
(class TypeWrapper {
  @Type(() => runtimeDynamicClass)
  data
})
`);

const instance = new TypeWrapper();

注意：该方案需要你的编译环境已经将装饰器语法转义为可直接执行的JS代码，否则eval会无法识别装饰器语法报错。同时要确保动态拼接的代码内容可信，避免代码注入风险。

替代方案2：修正Data URL导入模块的写法 #

你之前的报错是运行环境的兼容问题：

• 浏览器原生支持导入data URL格式的ES模块
• Node.js需要在启动时添加--experimental-network-imports参数才能支持导入data URL
  同时推荐用百分号编码代替base64，避免特殊字符编码问题：

const moduleContent = `
import { Type } from "external-module";
export default class TypeWrapper {
  @Type(() => class RuntimeClass {})
  data
}
`;
// 生成合法的data URL
const dataUrl = `data:text/javascript,${encodeURIComponent(moduleContent)}`;

// 导入动态模块
const { default: TypeWrapper } = await import(dataUrl);
const instance = new TypeWrapper();

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