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

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 <module> tag would be interesting to have. But have you tried the actual tag for ES6 modules: <script type="module">? You should have one JS source, e.g. variables.js, that exports things, and one JS source (could be inline <script type="module">…</script>) that imports from "./variables.js". — Sebastian Simon
– Sebastian Simon, Commented Nov 30, 2022 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 <script type="module"> I did try that initially but thought <module> was its modern equivalent (albeit one that won't work on fairly old browsers)? — GRF Digital
– GRF Digital, Commented Nov 30, 2022 at 12:46
There is no <module> tag in the HTML standard. If it works, you’re doing something that transpiles this SGML-derivative into standard HTML. — Sebastian Simon
– Sebastian Simon, Commented Nov 30, 2022 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
– GRF Digital, Commented Nov 30, 2022 at 22:55
I've edited <module> out of my question, as I don't think it was relevant. — GRF Digital
– GRF Digital, Commented Nov 30, 2022 at 23:36

Code Spirit · Accepted Answer · 2022-12-01 00:01:00Z

0

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[];

answered Dec 1, 2022 at 0:01

Code Spirit

5,1776 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related