Référence fichier de définition TypeScript à partir de HTML `<script>` avec VS Code

Question

Je peux utiliser JSDocune scriptbalise en HTML mais je ne peux pas référencer un fichier de définition de type ( .d.ts). J'utilise VS Code. Est-ce possible et si oui, comment puis-je le faire? Voici un exemple de code ci-dessous:

Le tsconfig.jsonfichier (je ne sais pas comment l'utiliser dans mes tests, il ne semble pas nécessaire.):

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

Tentative 1:

Dans types/MyLib/index.d.ts:

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

Dans le fichier JS index.jset fonctionne bien:

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

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

Dans le fichier HTML (aucun de ceux-ci ne fonctionne) 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>

Tentative 2:

Dans types/MyLib/index2.d.ts:

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

Dans le fichier JS index2.jset fonctionne bien:

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

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

Dans le fichier HTML (aucun de ceux-ci ne fonctionne) 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

J'ai fait quelques recherches, fouillé dans le code source et découvert que le service de langage utilisé pour le <script>HTML intégré est complètement différent de celui utilisé pour le .js/.tsfichier autonome .

Vérifiez le lien ci-dessus si vous êtes intéressé. Comme vous le verrez, c'est une autre extension intégrée "html-language-features"par opposition à "typescript-language-features". Donc, tout d'abord, il est impossible que les deux se comportent de la même manière. Deuxièmement, l' instance de service de langage ts utilisée est intentionnellement créée avec une ts.compilerOptionsAPI fixe et simplifiée , sans API de configuration exposée à l'utilisateur pour la personnaliser.

Votre demande de fonctionnalité est en fait une demande de longue date, voir # 26338 , remonte à 2017, mais l'équipe vscode semble réticente à répondre.

Donc, impasse ici ... Pas possible avec l'extension officielle.

La solution possible est de bifurquer le projet html-language-features pour créer une version personnalisée, afin de passer en contrebande les fonctionnalités souhaitées. Vous pouvez désactiver l'extension intégrée et la remplacer par votre version personnalisée.

A partir de ce code pour modifier, je ne suis pas expert de l'API de programmation TS, mais je peux vous référer à cette @shuaihuGao de type patch , dans le numéro de github ci - dessus. Le correctif ajoute une option de paramétrage html.libDefinitionFilesà .d.tsinclure dans une liste de fichiers à inclure lors de la validation du script JS intégré.

Pas tout à fait ce que vous demandez, mais néanmoins une belle solution de contournement. Vous voudrez peut-être l'essayer, téléchargez le lien ici .