如何正确将.ts文件导出的变量引入HTML script标签获取有效值

你当前的代码存在4个核心问题，导致无法正确获取变量值：

• myVariable是类的实例属性，不属于类本身，直接通过类名访问无法拿到有效值
• 浏览器原生不支持直接运行/导入.ts后缀的TypeScript文件，必须先编译为JavaScript文件才能在浏览器环境运行
• 导入路径末尾多了冗余空格，且script标签未声明为模块类型，无法识别ES Module的import语法
• 额外隐患：document.write在页面加载完成后执行会覆盖整个页面内容，不适合用来动态插入元素

1. 调整TypeScript文件代码 #

根据你的使用场景二选一即可：

• 如果该变量是全局共享的固定值，直接声明为静态属性，无需实例化即可访问：

// getVariable.ts
// 类名建议使用大驼峰命名规范，避免和普通函数混淆
export class GetVariable {
  static myVariable: number = 0;           
}

• 如果需要创建多个类实例使用，保留实例属性写法，后续使用时先实例化：

// getVariable.ts
export class GetVariable {
  myVariable: number = 0;           
}

2. 编译TypeScript文件为JavaScript #

在项目目录执行TS编译命令，生成可在浏览器运行的js文件：

tsc getVariable.ts

执行完成后同目录会生成getVariable.js文件。

3. 修正HTML代码 #

script标签必须添加type="module"才能支持import语法，导入路径要指向编译后的js文件，去掉冗余空格，同时替换document.write为安全的DOM操作：

<button type="button" id="btn1" class="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>

<script type="module">          
  // 注意路径不要加多余空格，引入编译后的js文件，不要直接引用ts文件
  import { GetVariable } from "../getVariable.js";
  
  // 静态属性访问写法
  const statement = GetVariable.myVariable;
  // 如果用实例属性写法，替换为下面两行
  // const variableInstance = new GetVariable();
  // const statement = variableInstance.myVariable;

  if (statement !== 0) {
    const btn3 = document.createElement('button');
    btn3.type = 'button';
    btn3.id = 'btn3';
    btn3.className = 'btn3';
    btn3.textContent = 'btn3';
    document.body.appendChild(btn3);
  }
</script>

本地直接通过file://协议打开HTML文件时，ES模块导入会触发跨域错误，需要启动本地静态服务访问页面，比如使用VSCode的Live Server插件，或者在项目目录执行npx serve启动临时服务。

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