Fare riferimento al file di definizione TypeScript da HTML "<script>" con VS Code

Question

Sono in grado di utilizzare JSDocun scripttag in HTML ma non sono in grado di fare riferimento a un file di definizione del tipo ( .d.ts). Sto usando VS Code. È possibile e se sì come posso farlo? Di seguito è riportato un codice di esempio:

Il tsconfig.jsonfile (non sono sicuro di come utilizzarlo nei miei test, non sembra essere necessario.):

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

Tentativo 1:

In types/MyLib/index.d.ts:

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

Nel file JS index.jse funziona bene:

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

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

Nel file HTML (nessuno di questi funziona) 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>

Tentativo 2:

In types/MyLib/index2.d.ts:

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

Nel file JS index2.jse funziona bene:

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

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

Nel file HTML (nessuno di questi funziona) 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

Ho fatto qualche ricerca, ho approfondito il codice sorgente e ho scoperto che il servizio linguistico utilizzato per incorporato <script>all'interno dell'HTML è completamente diverso da quello utilizzato per i .js/.tsfile standalone .

Controlla il link sopra se sei interessato. Come vedrai, è un'altra estensione incorporata "html-language-features"al contrario di "typescript-language-features". Quindi, prima di tutto, è impossibile che i due si comportino allo stesso modo. In secondo luogo, le istanze del servizio linguistico ts utilizzate sono state intenzionalmente create con ts.compilerOptionsun'API fissa e semplificata , senza alcuna impostazione API esposta all'utente per personalizzarla.

La tua richiesta di funzionalità è in realtà di vecchia data , vedi # 26338 , risale al 2017, ma il team di vscode sembra riluttante a rispondere.

Quindi, vicolo cieco qui ... Non possibile con l'estensione ufficiale.

La soluzione possibile è fare il fork del progetto html-language-features per creare una build personalizzata, in modo da contrabbandare le funzionalità desiderate. Puoi disabilitare l'estensione incorporata e sostituirla con la tua build personalizzata.

A partire dal quale codice da modificare, io non sono esperto del TS API di programmazione, ma è possibile fare riferimento a questo @shuaihuGao ragazzo di patch , che si trova nel numero github sopra. La patch aggiunge un'opzione di impostazione html.libDefinitionFilesper prendere in un elenco di .d.tsfile da includere durante la convalida dello script JS incorporato.

Non del tutto quello che chiedi, ma comunque una bella soluzione. Potresti provarlo, scarica il link qui .