VS Code not picking up inline javascript variables from an HTML file in a typescript file

Question

I have an index.html file containing an inline script with variables...

<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>

Those variables were picked up fine by the index.js file in VS Code. My issue is that since I've converted that file from javascript to typescript, VS Code now raises errors on those same variables.

How can I avoid that? How can I tell the index.ts file where to find the HTML file? Or am I doing this the wrong way?

When I compile the index.ts to index.js, the HTML page works fine, of course, so this is just a minor annoyance.

the index.ts looks something like this, if relevant...

(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)
}())

// This initializes the BB form
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) {
    ...
  }
})

I tried converting the initial inline script to be a module:

<script type="module">
    let formId="123abc"
    export let myBool = true
    export let myArray = ["foo","bar"]
</script>

That seems to allow me to see the variables in index.ts if i prefix them with "window." ...but also breaks the webpage when compiled.

At some point I also did something that seemed to feed the variables into an index.d.ts file and suddenly the index.ts no longer showed errors... however it also broke the ability for that inline script (now a module) to feed its variables to the actual compiled index.js file, consequently preventing the html page from functioning properly.

Wow, a `` tag would be interesting to have. But have you tried the actual tag for ES6 modules: ``) that imports from `"./variables.js"`. — Sebastian Simon, Nov 30 '22 at 11:39
Cheers. I'm trying to avoid having the variables in an external js file as I want people to be able to paste in that small snippet (one div & two script tags) in a field of our CMS. Depending on the variables, a different form gets displayed. As for — GRF Digital, Nov 30 '22 at 12:46
There is no `` tag in the HTML standard. If it works, you’re doing something that transpiles this SGML-derivative into standard HTML. — Sebastian Simon, Nov 30 '22 at 12:54
Well it didn't work. I'm not sure that's what ended up adding the variables to the index.d.ts file. It was probably something else. But to clarify... VS Code is showing errors but my code (as presented in my question) works fine... — GRF Digital, Nov 30 '22 at 22:55
I've edited out of my question, as I don't think it was relevant. — GRF Digital, Nov 30 '22 at 23:36
It does! Thanks @CodeSpirit. Can you change you answer slightly and I'll accept it. The index.d.ts file seems to want this instead: export { } and then... declare global {var formId: string; var myBool: boolean; var myArray: string[];} — GRF Digital, Dec 01 '22 at 02:40

score 0 · Answer 1 · answered Dec 01 '22 at 00:01

You have to declare globals in a .d.ts file and add it to types config in tsconfig.json:

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "src/types.d.ts"
    ]
  }
}

// src/types.d.ts
declare let formId: string;
declare let myBool: true;
declare let myArray: string[];

VS Code not picking up inline javascript variables from an HTML file in a typescript file

1 Answers1