如何用TypeScript生成并渲染HTML导航栏？求助排查空白问题

核心问题：浏览器无法直接运行TypeScript文件 #

浏览器仅支持解析JavaScript代码，你直接在HTML中引入.ts格式的文件是无效的，TypeScript代码必须先编译为JavaScript才能在浏览器中执行。

具体修复步骤 #

1. 编译TypeScript文件 #

• 先全局安装TypeScript：

  npm install -g typescript
  

• 在项目根目录创建tsconfig.json配置文件，示例配置如下：

  {
    "compilerOptions": {
      "target": "ES6",
      "module": "ES6",
      "outDir": "./dist",
      "strict": true
    },
    "include": ["src/**/*"]
  }
  

• 执行编译命令，将TypeScript文件转为JavaScript：

  tsc
  

  编译完成后，会在dist目录生成对应的common.js文件。

2. 修改HTML中的脚本引用 #

把原来的.ts文件引用替换为编译后的.js文件：

<script src="../dist/common.js"></script>
<script>createNavbar()</script>

3. 额外检查点 #

• 确认menuItems中的路径是否正确：比如index.html是否和当前HTML文件在同一目录，路径错误只会导致导航链接失效，不会直接造成页面空白。
• 打开浏览器控制台（按F12）查看报错信息：如果仍有问题，控制台会给出具体提示，比如文件找不到、变量未定义等。

简化测试方案（无需TS编译环境） #

如果暂时不想配置TypeScript编译环境，可以直接将代码转为无类型注解的JavaScript，保存为common.js：

export function createNavbar() {
    const navigation = document.createElement("nav");
    const unorderedList = document.createElement("ul");
    const menuItems = {
        Home: "index.html",
        About: "about.html",
        FAQ: "faq.html",
        Contact: "contact.html",
    };

    for (const [key, value] of Object.entries(menuItems)) {
        const listItem = document.createElement("li");
        const anchor = document.createElement("a");

        anchor.textContent = key;
        anchor.href = value;

        listItem.appendChild(anchor);
        unorderedList.appendChild(listItem);
    }

    navigation.appendChild(unorderedList);
    document.body.appendChild(navigation);
}

之后在HTML中引用这个common.js文件即可。

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