Odwołanie do pliku definicji TypeScript z HTML `` <script> '' z VS Code

Question

Mogę używać JSDocw scripttagu w HTML, ale nie mogę odwołać się do pliku definicji typu ( .d.ts). Używam VS Code. Czy to możliwe, a jeśli tak, jak to zrobić? Oto przykładowy kod poniżej:

tsconfig.jsonPlik (nie jestem pewien, jak bardzo to wykorzystać w moich testach, to nie wydaje się być konieczne.):

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

Próba 1:

W types/MyLib/index.d.ts:

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

W pliku JS index.jsi działa dobrze:

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

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

W pliku HTML (żadne z tych nie działa) 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>

Próba 2:

W types/MyLib/index2.d.ts:

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

W pliku JS index2.jsi działa dobrze:

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

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

W pliku HTML (żadne z tych nie działa) 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

Zrobiłem trochę badań, zagłębiłem się w kod źródłowy i odkryłem, że usługa językowa używana do osadzania <script>w HTML jest całkowicie inna niż ta używana dla samodzielnego .js/.tspliku.

Sprawdź powyższy link, jeśli jesteś zainteresowany. Jak widać, jest to kolejne wbudowane rozszerzenie "html-language-features"w przeciwieństwie do "typescript-language-features". Przede wszystkim niemożliwe jest, aby ta dwójka zachowywała się tak samo. Po drugie, używane wystąpienie usługi języka ts jest celowo tworzone za pomocą stałego i uproszczonego ts.compilerOptions, bez ustawiania interfejsu API udostępnianego użytkownikowi w celu jego dostosowania.

Twoja prośba o funkcję jest w rzeczywistości od dawna, patrz # 26338 , pochodzi z 2017 roku, ale zespół vscode wydaje się niechętnie odpowiadać.

Więc ślepy zaułek tutaj ... Niemożliwe z oficjalnym przedłużeniem.

Możliwym rozwiązaniem jest rozwidlenie projektu html-language-features w celu wykonania niestandardowej kompilacji, aby przemycić żądane funkcje. Możesz wyłączyć wbudowane rozszerzenie i zastąpić je własną kompilacją.

Jak co kod do modyfikacji, nie jestem ekspertem od TS programowania API, ale mogę odnosić się do tej @shuaihuGao faceta plastra , znalezionego w powyższej kwestii github. Łatka dodaje opcję ustawienia, html.libDefinitionFilesaby wziąć listę .d.tsplików, które mają zostać uwzględnione podczas walidacji osadzonego skryptu JS.

Nie do końca o co pytasz, ale mimo to fajne obejście. Możesz go wypróbować, link do pobrania tutaj .