Arquivo de definição de TypeScript de referência em HTML `<script>` com código VS

Question

Consigo usar JSDocem uma scripttag em HTML, mas não consigo fazer referência a um arquivo de definição de tipo ( .d.ts). Estou usando VS Code. Isso é possível e se sim, como faço isso? Aqui está um exemplo de código abaixo:

O tsconfig.jsonarquivo (não tenho certeza de como usá-lo em meus testes, não parece ser necessário.):

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

Tentativa 1:

Em types/MyLib/index.d.ts:

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

No arquivo JS index.jse funciona bem:

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

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

No arquivo HTML (nenhum desses 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>

Tentativa 2:

Em types/MyLib/index2.d.ts:

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

No arquivo JS index2.jse funciona bem:

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

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

No arquivo HTML (nenhum desses 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

Fiz algumas pesquisas, procurei no código-fonte e descobri que o serviço de linguagem usado para embutido <script>no HTML é totalmente diferente daquele usado para .js/.tsarquivo independente .

Verifique o link acima se você estiver interessado. Como você veria, é outra extensão integrada "html-language-features", ao contrário de "typescript-language-features". Portanto, em primeiro lugar, é impossível que os dois se comportem da mesma forma. Em segundo lugar, a instância do serviço de linguagem ts usada é criada intencionalmente com uma ts.compilerOptionsAPI fixa e simplificada , sem nenhuma configuração de API exposta ao usuário para personalizá-la.

Sua solicitação de recurso é, na verdade, antiga, consulte # 26338 , data de 2017, mas a equipe vscode parece relutante em responder.

Então, beco sem saída aqui ... Não é possível com a extensão oficial.

A solução possível é bifurcar o projeto html-language-features para fazer uma construção customizada, de forma a contrabandear os recursos que você deseja. Você pode desativar a extensão interna e substituí-la por sua construção personalizada.

Quanto ao código a ser modificado, não sou especialista em API de programação TS, mas posso encaminhá-lo para o patch do cara @shuaihuGao , encontrado no problema do github acima. O patch adiciona uma opção de configuração para obter uma lista de arquivos a serem incluídos ao validar o script JS incorporado.html.libDefinitionFiles.d.ts

Não exatamente o que você pergunta, mas uma boa solução alternativa, no entanto. Você pode querer experimentar, faça o download do link aqui .