VS Code中TypeScript无法识别HTML内联JS变量的解决方法

有一个包含内联全局变量的HTML文件：

<body>
  <div id="load-form-here"></div>
  <script>
    let formID="abc123"
    let myBool = true
    let myArray = ["foo","bar"]
  </script>
  <script src="index.js"></script>
</body>

将配套的index.js转为TypeScript文件index.ts后，VS Code会对代码中使用的formID、myBool、myArray报错，但编译后的index.js在页面上能正常运行，仅编辑器提示错误。

index.ts内容如下：

(function () {
  var e = document.createElement('script'); e.async = true
  e.src = 'other-js-file-that-gets-loaded-into-html-head.js'
  document.getElementsByTagName('head')[0].appendChild(e)
}())

// 初始化表单
window.otherInit = function () { from-other-js.loadForm(formID) }

window.addEventListener("DOMContentLoaded", () => {
  if (myBool) {
    for (const array_item of myArray) {
      modify_a_dom_element(array_item)
    }
  }
  function modify_a_dom_element(new_value) {
    // ... DOM修改逻辑
  }
})

尝试过两种方案但都有问题：

• 将内联脚本改为type="module"并导出变量，在index.ts中通过window.前缀访问，编译后页面无法正常运行
• 在index.d.ts中声明变量，消除了编辑器报错，但破坏了内联脚本向编译后index.js传递变量的能力，页面失效

方案1：扩展Window接口添加类型定义（推荐） #

这种方式不需要修改HTML内联脚本，仅通过TypeScript类型声明让编辑器识别全局变量，同时不影响页面运行时的变量传递。

1. 在项目中创建或修改index.d.ts文件，添加以下内容：

interface Window {
  formID: string;
  myBool: boolean;
  myArray: string[];
  // 声明外部全局对象类型
  'from-other-js': {
    loadForm: (formId: string) => void;
  };
}

2. 在index.ts中，显式通过window访问这些变量（更规范，避免隐式全局依赖）：

// 修改初始化表单的代码
window.otherInit = function () { window['from-other-js'].loadForm(window.formID) }

// DOMContentLoaded回调中修改为
if (window.myBool) {
  for (const array_item of window.myArray) {
    modify_a_dom_element(array_item)
  }
}

这样编辑器不会再报错，同时页面运行时，内联脚本定义的全局变量依然能被window正确读取，功能不受影响。

方案2：直接声明全局变量类型 #

如果不想通过window访问，也可以直接在index.d.ts中声明这些变量为全局：

declare let formID: string;
declare let myBool: boolean;
declare let myArray: string[];
declare namespace from-other-js {
  function loadForm(formId: string): void;
}

这种方式可以保持index.ts中原有代码不变，编辑器就能识别这些全局变量，页面运行时也能正常获取内联脚本定义的值。

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