Referensi file definisi TypeScript dari HTML `<script>` dengan VS Code

Question

Saya dapat menggunakan JSDocdalam scripttag di HTML tapi saya tidak dapat referensi file jenis definisi ( .d.ts). Saya menggunakan VS Code. Apakah ini mungkin dan jika ya, bagaimana cara melakukannya? Berikut beberapa contoh kode di bawah ini:

The tsconfig.jsonberkas (saya tidak yakin bagaimana cukup menggunakan ini di tes saya, itu tampaknya tidak diperlukan.):

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

Percobaan 1:

Masuk types/MyLib/index.d.ts:

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

Di file JS index.jsdan berfungsi dengan baik:

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

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

Di file HTML (tidak ada yang berfungsi) 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>

Percobaan 2:

Masuk types/MyLib/index2.d.ts:

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

Di file JS index2.jsdan berfungsi dengan baik:

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

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

Di file HTML (tidak ada yang berfungsi) 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

Saya melakukan penelitian, menggali kode sumber dan menemukan layanan bahasa yang digunakan untuk tertanam <script>di dalam HTML sama sekali berbeda dari yang digunakan untuk .js/.tsfile mandiri .

Periksa tautan di atas jika Anda tertarik. Seperti yang Anda lihat, ini adalah ekstensi bawaan lain "html-language-features"sebagai lawan "typescript-language-features". Jadi pertama-tama, tidak mungkin keduanya berperilaku sama. Kedua, contoh layanan bahasa ts yang digunakan sengaja dibuat dengan tetap dan disederhanakan ts.compilerOptions, tanpa API pengaturan yang diekspos kepada pengguna untuk menyesuaikannya.

Permintaan fitur Anda sebenarnya sudah lama, lihat # 26338 , berasal dari tahun 2017, tetapi tim vscode tampaknya enggan untuk menanggapinya.

Jadi, jalan buntu di sini ... Tidak mungkin dengan ekstensi resmi.

Solusi yang mungkin adalah membagi proyek fitur-bahasa-bahasa-html untuk membuat sebuah build khusus, sehingga menyelundupkan fitur-fitur yang Anda inginkan. Anda dapat menonaktifkan ekstensi bawaan dan menggantinya dengan build khusus Anda.

Sebagai kode apa untuk memodifikasi, saya tidak ahli TS pemrograman API, tapi saya dapat merujuk Anda ke ini @shuaihuGao pria Patch , ditemukan dalam edisi github di atas. Tambalan menambahkan opsi pengaturan html.libDefinitionFilesuntuk memasukkan daftar .d.tsfile yang akan disertakan saat memvalidasi skrip JS yang disematkan.

Tidak sepenuhnya apa yang Anda minta, tapi tetap saja solusi yang bagus. Anda mungkin ingin mencobanya, unduh tautan di sini .