TypeScript变量无法传入HTML页面，DOM加载及模板变量问题咨询

开发者阿泽

2026-5-15

解决TypeScript变量传递到HTML的问题

首先，你遇到的Uncaught TypeError: Cannot set property 'innerHTML' of null确实是因为代码在浏览器完成DOM构建之前就执行了——这时候document.body还未被解析出来，自然会报错。下面先解决这个核心问题，再回应你关于模板变量的疑问。

一、修复代码执行时机问题

有三种可靠方法确保代码在DOM加载完成后运行：

1. 将脚本放在`<body>`标签末尾

把编译后的JavaScript文件引入放在页面内容的最后，浏览器会先解析完所有DOM元素，再执行脚本：

<body>
  <!-- 你的页面内容 -->
  <script src="app.js"></script>
</body>

2. 监听`DOMContentLoaded`事件

修改TypeScript代码，把操作DOM的逻辑包裹在DOM加载完成的回调里：

function greeter(person: string) {
  return "Hello, " + person;
}

let user = "Jane User";

// 等待DOM完全加载后再执行DOM操作
document.addEventListener('DOMContentLoaded', () => {
  document.body.innerHTML = greeter(user);
});

3. 给脚本标签添加`defer`属性

defer会让浏览器在解析完DOM后再执行脚本，同时不会阻塞页面渲染：

<script src="app.js" defer></script>

二、关于类似Angular的`{{ variable }}`模板变量

不想引入完整框架的话，也可以实现简单的模板变量替换，或者使用轻量模板引擎：

手动实现简单模板替换

先在HTML中预留模板占位符：

<div id="greeting">Hello, {{userName}}</div>

然后在TypeScript中替换占位符：

let userName = "Jane User";

document.addEventListener('DOMContentLoaded', () => {
  const greetingElement = document.getElementById('greeting');
  if (greetingElement) {
    // 替换模板变量
    greetingElement.textContent = greetingElement.textContent.replace('{{userName}}', userName);
  }
});