Tham chiếu tệp định nghĩa TypeScript từ HTML `<script>` với VS Code

Question

Tôi có thể sử dụng JSDoctrong scriptthẻ trong HTML nhưng không thể tham chiếu đến tệp định nghĩa kiểu ( .d.ts). Tôi đang sử dụng VS Code. Điều này có khả thi không và nếu có thì tôi phải làm như thế nào? Đây là một số mã ví dụ bên dưới:

Các tsconfig.jsontập tin (Tôi không chắc chắn làm thế nào để sử dụng khá này trong các thử nghiệm của tôi, nó dường như không cần thiết.):

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

Nỗ lực 1:

Trong types/MyLib/index.d.ts:

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

Trong tệp JS index.jsvà hoạt động tốt:

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

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

Trong tệp HTML (không có tệp nào trong số này hoạt động) 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>

Nỗ lực 2:

Trong types/MyLib/index2.d.ts:

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

Trong tệp JS index2.jsvà hoạt động tốt:

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

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

Trong tệp HTML (không có tệp nào trong số này hoạt động) 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

Tôi đã thực hiện một số nghiên cứu, đào sâu vào mã nguồn và phát hiện ra dịch vụ ngôn ngữ được sử dụng để nhúng <script>bên trong HTML hoàn toàn khác với dịch vụ được sử dụng cho .js/.tstệp độc lập .

Kiểm tra liên kết trên nếu bạn quan tâm. Như bạn sẽ thấy, đó là một tiện ích mở rộng nội trang khác "html-language-features"trái ngược với "typescript-language-features". Vì vậy, trước hết, không thể để hai người cư xử giống nhau. Trước hết, phiên bản dịch vụ ngôn ngữ ts được sử dụng được cố ý tạo với một phiên bản cố định và đơn giản hóa ts.compilerOptions, không có API cài đặt nào được hiển thị cho người dùng tùy chỉnh nó.

Yêu cầu tính năng của bạn thực sự là một yêu cầu lâu đời, xem # 26338 , có từ năm 2017, nhưng nhóm vscode có vẻ miễn cưỡng trả lời.

Vì vậy, kết thúc ở đây ... Không thể với phần mở rộng chính thức.

Giải pháp khả thi là phân nhánh dự án html-language-features để tạo bản dựng tùy chỉnh, do đó, nhập lậu các tính năng bạn muốn. Bạn có thể vô hiệu hóa tiện ích mở rộng bản dựng và thay thế nó bằng bản dựng tùy chỉnh của mình.

Về mã nào cần sửa đổi, tôi không phải là chuyên gia về API lập trình TS, nhưng tôi có thể giới thiệu cho bạn bản vá của anh chàng @shuaihuGao này , được tìm thấy trong vấn đề github ở trên. Bản vá bổ sung một tùy chọn cài đặt để đưa vào danh sách các tệp được đưa vào khi xác thực tập lệnh JS được nhúng.html.libDefinitionFiles.d.ts

Không hoàn toàn là những gì bạn yêu cầu, nhưng dù sao thì cũng có một cách giải quyết tốt. Bạn có thể muốn dùng thử, liên kết tải xuống tại đây .