Reference TypeScript definition file from HTML `<script>` with VS Code

Question

I am able to use JSDoc in a script tag in HTML but am not able to reference a type definition file (.d.ts). I'm using VS Code. Is this possible and if so how do I do it? Here's some example code below:

The tsconfig.json file (I'm not sure how to quite use this in my tests, it doesn't seem to be needed.):

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "myLib": ["types/MyLib/index.d.ts"],
            "myLib2": ["types/MyLib/index2.d.ts"]
        }
    }
}

Attempt 1:

In types/MyLib/index.d.ts:

declare namespace myLib {
  function makeGreeting(s: string): string
  let numberOfGreetings: number
}

In the JS file index.js and works fine:

/// <reference path="./types/MyLib/index.d.ts" />
// @ts-check

var result = myLib.makeGreeting("Cheese")
console.log(result)

In the HTML file (none of these work) index.html:

<script>
    /// <reference path="./types/MyLib/index.d.ts" />
    // @ts-check
    var result = myLib.makeGreeting("Cheese")
</script>

<script>
    // @ts-check
    /** @type {import("./types/MyLib/index").myLib} */
    var myLib = Window.myLib
    var result = myLib.makeGreeting("Orange")
</script>

<script>
    // @ts-check
    /** @typedef {import("./types/MyLib/index").myLib} myLib */
    /** @type {myLib} */
    var myLib = Window.myLib
    var result = myLib.makeGreeting("Orange")
</script>

Attempt 2:

In types/MyLib/index2.d.ts:

export declare module myLib {
  export function makeGreeting(s: string): string
}

In the JS file index2.js and works fine:

/// <reference path="./types/MyLib/index2.d.ts" />
// @ts-check

var result = myLib.makeGreeting("Cheese")
console.log(result)

In the HTML file (none of these work) index2.html:

<script>
    /// <reference path="./types/MyLib/index2.d.ts" />
    // @ts-check
    var result = myLib.makeGreeting("Cheese")
</script>

<script>
    // @ts-check
    /** @type {import("./types/MyLib/index2").myLib} */
    var myLib = Window.myLib
    var result = myLib.makeGreeting("Orange")
</script>

<script>
    // @ts-check
    /** @typedef {import("./types/MyLib/index2").myLib} myLib */
    /** @type {myLib} */
    var myLib = Window.myLib
    var result = myLib.makeGreeting("Orange")
</script>

That is dependent on your IDE. Since those files are not JavaScript files but HTML files with embedded JavaScript inside tags, your IDE's HTML language service would need to interoperate with the TypeScript language service (or another service that does the same) and use it to process script tag contents. — Aluan Haddad
– Aluan Haddad, Commented Sep 20, 2020 at 3:20
Oh, yes, I forgot to put in what IDE I'm using. I'm using VS Code. I'll update the question. — Jon49
– Jon49, Commented Sep 20, 2020 at 5:20
Since it works in JavaScript files, but not in script tags, you need an HTML plug-in the treats script blocks the way you want but I don't know that such a plug-in is available. It's a bad practice to write more than a few lines in script tags anyway — Aluan Haddad
– Aluan Haddad, Commented Sep 20, 2020 at 5:27
This is for a fun little project that I'm working on where I stream HTML from a service worker and I'm calling IndexedDB to get the data. So, I want something similar to how Svelte works where I can have the HTML and JavaScript in the same file to keep it more cohesive. But I actually parse out the HTML/JS into a JS only file at build time. So, the reason I want the TypeScript definition files is because it is more complicated than a simple app. But TypeScript (type checker) with JSDoc works fine in the script tag but for some reason doesn't let me import external types. — Jon49
– Jon49, Commented Sep 20, 2020 at 19:08
Ah, I see what you mean now. I thought that JSDoc types weren't working for you in the tag at all. I think you can get them to work and that it may have something to do with tsconfig.json. I'll try to look at it later. — Aluan Haddad
– Aluan Haddad, Commented Sep 21, 2020 at 1:14

hackape · Accepted Answer · 2020-09-26 11:59:13Z

I did some research, dig into source code and find out the language service used for embedded <script> inside HTML is entirely different from the one used for standalone .js/.ts file.

Check the above link if you're interested. As you would see, it's another builtin extension "html-language-features" as opposed to "typescript-language-features". So first of all, it's impossible for the two to behave the same. Second of all, the ts language service instance used are intentionally created with a fixed and simplified ts.compilerOptions, with no setting API exposed to user to customize it.

Your feature request is actually a long standing one, see #26338, dates back to 2017, but vscode team seems reluctant to respond.

So, dead end here...Not possible with the official extension.

Possible solution is to fork the html-language-features project to make a custom build, so to smuggle in the features you want. You can disable the builtin extension and replace it with your custom build.

As of what code to modify, I'm not expert of the TS programming API, but I can refer you to this @shuaihuGao guy's patch, found in the above github issue. The patch adds a setting option html.libDefinitionFiles to take in a list of .d.ts files to be included when validating embedded JS script.

Not entirely what you ask, but a nice workaround nonetheless. You might want to try it out, download link here.

Collectives™ on Stack Overflow

Reference TypeScript definition file from HTML `<script>` with VS Code

Attempt 1:

Attempt 2:

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Attempt 1:

Attempt 2:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related