Archivo de definición de TypeScript de referencia de HTML `<script>` con VS Code

Question

Puedo usar JSDocen una scriptetiqueta en HTML pero no puedo hacer referencia a un archivo de definición de tipo ( .d.ts). Estoy usando VS Code. ¿Es esto posible y, de ser así, cómo lo hago? Aquí hay un código de ejemplo a continuación:

El tsconfig.jsonarchivo (no estoy seguro de cómo usar esto en mis pruebas, no parece ser necesario):

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

Intento 1:

En types/MyLib/index.d.ts:

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

En el archivo JS index.jsy funciona bien:

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

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

En el archivo HTML (ninguno de estos funciona) 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>

Intento 2:

En types/MyLib/index2.d.ts:

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

En el archivo JS index2.jsy funciona bien:

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

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

En el archivo HTML (ninguno de estos funciona) 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

Investigué un poco, profundicé en el código fuente y descubrí que el servicio de lenguaje utilizado para <script>HTML incrustado es completamente diferente del utilizado para el .js/.tsarchivo independiente .

Consulte el enlace anterior si está interesado. Como puede ver, es otra extensión incorporada a "html-language-features"diferencia de "typescript-language-features". Entonces, en primer lugar, es imposible que los dos se comporten igual. En segundo lugar, la instancia de servicio de lenguaje ts utilizada se crea intencionalmente con una ts.compilerOptionsAPI fija y simplificada , sin configuración de API expuesta al usuario para personalizarla.

Su solicitud de función es en realidad una de larga data, consulte # 26338 , se remonta a 2017, pero el equipo de vscode parece reacio a responder.

Entonces, callejón sin salida aquí ... No es posible con la extensión oficial.

Una posible solución es bifurcar el proyecto html-language-features para hacer una compilación personalizada, de modo que pueda contrabandear las características que desee. Puede deshabilitar la extensión incorporada y reemplazarla con su compilación personalizada.

A partir de lo que el código para modificar, no soy experto de la ST API de programación, pero se puede hacer referencia a esta @shuaihuGao de tipo parche , que se encuentra en la edición anterior GitHub. El parche agrega una opción de configuración html.libDefinitionFilespara incluir una lista de .d.tsarchivos que se incluirán al validar el script JS incrustado.

No del todo lo que pides, pero es una buena solución. Es posible que desee probarlo, enlace de descarga aquí .