如何用函数在JS中生成可编译的TypeScript代码并在UI展示？

一、优化TypeScript代码构建逻辑 #

你现有的代码已经在尝试用JS生成TS代码，但可以通过模板字符串优化可读性，同时提升健壮性：

优化后的main.js核心代码 #

function buildTypescript(data) {
  const activeOperation = window.activeOperation;
  const modelData = getModelData(data);
  // 处理可能的空值，避免JSON.stringify报错
  const requestPayload = JSON.stringify(SDKresult[activeOperation]?.request || {}, null, 4);

  // 用模板字符串替代多次拼接，更清晰易维护
  const tsCode = `import {Api as IngenSDK} from '@SSDK';
${modelData}
app.Api.setConfig({
  "env": "SIT3"
});

${activeOperation}(${requestPayload}, function(result) {
  // Your code goes here 
  debugger; 
  console.log(result); 
});`;

  // 同步到可编辑区域（后续编译调试用）
  document.getElementById('request_method_TS').value = tsCode;
}

function getModelData(data) {
  const activePath = window.activePath.toLowerCase();
  let interfaceImports = '';

  $.each(data.children, function(id, item) {
    const path = item.name.replace(/"/g, "");
    if (path.toLowerCase().includes(activePath)) {
      interfaceImports = createInterfaces(path, item.children);
    }
  });

  return interfaceImports;
}

function createInterfaces(path, data) {
  // 过滤空名称，避免无效导入
  const imports = data.map(d => d.name.trim()).filter(Boolean).join(', ');
  return imports ? `import { ${imports} } from '${path}';
` : '';
}

二、实现浏览器端TypeScript编译与调试功能 #

要让生成的TS代码能直接编译而非仅展示文本，我们可以在浏览器中引入TypeScript的浏览器版本，实现实时编译、编辑、运行的完整调试流程：

1. 引入TypeScript库 #

在HTML中添加TypeScript的CDN引用，无需后端服务即可在浏览器中编译TS：

<script src="https://cdn.jsdelivr.net/npm/typescript@5.2.2/lib/typescript.js"></script>

2. 改造UI，添加交互区域 #

替换原有的<pre>为可编辑文本框，增加编译/重置按钮，以及编译结果、运行日志展示区：

<div style="margin: 10px;">
  <button id="compileBtn" onclick="compileTsCode()">编译并运行TypeScript</button>
  <button id="resetBtn" onclick="buildTypescript(yourData)">重置为生成代码</button>
</div>
<div>
  <h3>TypeScript代码（可编辑）</h3>
  <textarea id="request_method_TS" style="width: 100%; height: 300px; margin: 5px; font-family: monospace;"></textarea>
</div>
<div>
  <h3>编译后的JavaScript代码</h3>
  <pre id="compiledResult" style="background: #f5f5f5; padding: 10px; overflow-x: auto; font-family: monospace;"></pre>
</div>
<div>
  <h3>运行日志</h3>
  <pre id="consoleLog" style="background: #2d2d2d; color: #fff; padding: 10px; overflow-x: auto; font-family: monospace;"></pre>
</div>

3. 实现编译与运行逻辑 #

添加编译函数，调用TypeScript的编译API，同时模拟运行环境并捕获日志：

function compileTsCode() {
  const tsCode = document.getElementById('request_method_TS').value;
  const compiledResultEl = document.getElementById('compiledResult');
  const consoleLogEl = document.getElementById('consoleLog');
  
  try {
    // 使用TypeScript官方API编译代码
    const compileResult = ts.transpileModule(tsCode, {
      compilerOptions: {
        module: ts.ModuleKind.ESNext,
        target: ts.ScriptTarget.ES2020,
        esModuleInterop: true,
        skipLibCheck: true,
        strict: false // 若需要严格类型检查可改为true
      }
    });

    // 展示编译后的JS代码
    compiledResultEl.textContent = compileResult.outputText;

    // 捕获console.log输出，方便调试
    const originalLog = console.log;
    consoleLogEl.textContent = '';
    console.log = (...args) => {
      consoleLogEl.textContent += args.join(' ') + '\n';
      originalLog(...args);
    };

    // 执行编译后的代码（注意：确保全局变量如app、SDKresult已提前定义）
    eval(compileResult.outputText);

    // 恢复原生console.log
    console.log = originalLog;
  } catch (error) {
    compiledResultEl.textContent = `编译/运行错误：${error.message}`;
    consoleLogEl.textContent = `错误详情：${error.stack}`;
  }
}

关键细节说明 #

• 浏览器端编译：借助typescript.js，我们直接在前端调用TS编译器，无需后端支持。
• 可编辑调试：把静态展示的<pre>改成<textarea>，让用户可以修改生成的TS代码后重新编译调试。
• 日志捕获：重写console.log来收集运行日志，方便用户查看调试输出。
• 模块兼容：对于@SSDK这类无法在浏览器直接解析的模块，你可以提前在全局环境中挂载对应的对象（比如window.IngenSDK = ...），或者在编译前添加模块映射。

三、注意事项 #

• 确保window.activeOperation、SDKresult、app等全局变量在编译运行前已正确初始化，否则会出现引用错误。
• 若需要更专业的代码编辑体验（如语法高亮、智能提示），可以集成Monaco Editor（VS Code的浏览器版本）替代原生<textarea>。
• 生产环境中慎用eval，但在调试场景下是安全且便捷的选择。

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