VS Code ile HTML "<script>" den referans TypeScript tanım dosyası

Question

HTML'de JSDocbir scriptetiketi kullanabiliyorum , ancak bir tür tanımlama dosyasına ( .d.ts) başvuruda bulunamıyorum . Kullanıyorum VS Code. Bu mümkün mü ve eğer öyleyse bunu nasıl yaparım? Aşağıda bazı örnek kodlar verilmiştir:

tsconfig.jsonDosyası (Emin oldukça benim testlerinde bu nasıl kullanılacağı değilim, gerekli görünmüyor.):

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

Deneme 1:

İçinde types/MyLib/index.d.ts:

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

JS dosyasında index.jsve iyi çalışıyor:

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

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

HTML dosyasında (bunların hiçbiri çalışmaz) 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>

Deneme 2:

İçinde types/MyLib/index2.d.ts:

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

JS dosyasında index2.jsve iyi çalışıyor:

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

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

HTML dosyasında (bunların hiçbiri çalışmaz) 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

Biraz araştırma yaptım, kaynak kodunu araştırdım ve HTML içine gömmek için kullanılan dil hizmetinin<script> bağımsız .js/.tsdosya için kullanılandan tamamen farklı olduğunu öğrendim .

Eğer ilgileniyorsanız yukarıdaki bağlantıya bakın. Göreceğiniz gibi, bu "html-language-features", aksine başka bir yerleşik uzantıdır "typescript-language-features". Yani her şeyden önce, ikisinin aynı şekilde davranması imkansız. İkincisi, kullanılan ts dil hizmeti örneği kasıtlı olarak sabit ve basitleştirilmiş bir şekilde oluşturulur ve ts.compilerOptionskullanıcının özelleştirmesi için hiçbir ayar API'sı kullanılmaz.

Özellik isteğiniz aslında uzun süredir devam eden bir sorundur , bkz. # 26338 , 2017 yılına kadar uzanıyor, ancak vscode ekibi yanıt vermekte isteksiz görünüyor.

Öyleyse, burada çıkmaz ... Resmi uzatma ile mümkün değil.

Olası çözüm , özel bir yapı oluşturmak için html-dil-özellikleri projesini çatallayarak istediğiniz özellikleri kaçırmaktır. Yerleşik uzantıyı devre dışı bırakabilir ve kendi özel yapınızla değiştirebilirsiniz.

Hangi kodun değiştirileceği konusunda, TS programlama API'sinde uzman değilim, ancak sizi yukarıdaki github sorununda bulunan bu @shuaihuGao adamın yamasına yönlendirebilirim . Yama html.libDefinitionFiles, .d.tsgömülü JS komut dosyası doğrulanırken dahil edilecek dosyaların bir listesini almak için bir ayar seçeneği ekler .

Tam olarak ne istediğinizi değil, yine de güzel bir çözüm. Denemek isteyebilirsiniz, burayı indirin .