How to use @ts-check in VS Code across multiple files with non-module-based website?

Question

I'm trying to create a really simple website with:

• A few JavaScript files that are directly included in the index.html
• No modules / import statements
• No bundling system or direct compilation step
• No requirement for a server to be run (so index.html can be double-clicked without CORS issues)

BUT I'd love to be able to use TypeScript's @ts-check or jsconfig.json within VS Code, and for it to understand the global scope of the code across JavaScript files. However, I'm finding that it's unable to jump to definitions between JavaScript files (or at least, inconsistently?).

Is there a way to tell the TypeScript compiler that all the JavaScript files are in global scope together, and to use the correct order of evaluation from the index.html?

Answer 1

Use "js/ts.implicitProjectConfig.checkJs": true in VSC config (or // @ts-check in files) and reference other files with /// <reference path="[...]" />

/// <reference path="other.js" />

somethingDefinedInOtherJS; // no error, f12 go to definition works

See Triple-Slash Directives docs for TS for more info.