Referenz TypeScript-Definitionsdatei aus HTML `<script>` mit VS-Code

Question

Ich kann JSDocin einem scriptTag in HTML verwenden, aber nicht auf eine Typdefinitionsdatei ( .d.ts) verweisen . Ich benutze VS Code. Ist das möglich und wenn ja, wie mache ich das? Hier ist ein Beispielcode unten:

Die tsconfig.jsonDatei (Ich bin mir nicht sicher, wie ich das in meinen Tests verwenden soll, es scheint nicht benötigt zu werden.):

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

Versuch 1:

In types/MyLib/index.d.ts:

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

In der JS-Datei index.jsund funktioniert gut:

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

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

In der HTML-Datei (keine dieser Arbeiten) 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>

Versuch 2:

In types/MyLib/index2.d.ts:

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

In der JS-Datei index2.jsund funktioniert gut:

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

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

In der HTML-Datei (keine dieser Arbeiten) 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>

Answer 1

Ich habe einige Nachforschungen angestellt, mich mit dem Quellcode befasst und herausgefunden, dass der für das Einbetten in HTML verwendete Sprachdienst<script> völlig anders ist als der für eigenständige .js/.tsDateien verwendete.

Überprüfen Sie den obigen Link, wenn Sie interessiert sind. Wie Sie sehen würden, handelt es sich um eine weitere integrierte Erweiterung "html-language-features"im Gegensatz zu "typescript-language-features". Zunächst einmal ist es für die beiden unmöglich, sich gleich zu verhalten. Zweitens wird die verwendete ts-Sprachdienstinstanz absichtlich mit einer festen und vereinfachten Funktion erstellt ts.compilerOptions, ohne dass dem Benutzer eine Einstellungs-API zur Anpassung zur Verfügung gestellt wird.

Ihre Feature-Anfrage ist eigentlich eine langjährige, siehe # 26338 , stammt aus dem Jahr 2017, aber das vscode-Team scheint nicht zu antworten.

Also, Sackgasse hier ... Mit der offiziellen Erweiterung nicht möglich.

Eine mögliche Lösung besteht darin, das HTML-Sprachfeatures- Projekt zu verzweigen, um einen benutzerdefinierten Build zu erstellen, um die gewünschten Features einzuschmuggeln. Sie können die integrierte Erweiterung deaktivieren und durch Ihren benutzerdefinierten Build ersetzen.

Was den zu ändernden Code angeht, bin ich kein Experte für die TS-Programmier-API, aber ich kann Sie auf den Patch dieses @ shuaihuGao- Typen verweisen , der in der obigen Github-Ausgabe enthalten ist. Der Patch fügt eine Einstellungsoption hinzu html.libDefinitionFiles, mit der eine Liste von .d.tsDateien aufgenommen werden kann, die beim Überprüfen des eingebetteten JS-Skripts berücksichtigt werden sollen.

Nicht ganz das, was Sie fragen, aber dennoch eine gute Lösung. Vielleicht möchten Sie es ausprobieren, laden Sie den Link hier herunter .