อ้างอิงไฟล์นิยาม TypeScript จาก HTML `<script>` พร้อม VS Code

Question

ฉันสามารถใช้JSDocในscriptแท็กใน HTML แต่ไม่สามารถอ้างอิงไฟล์นิยามประเภท ( .d.ts) ฉันกำลังใช้VS Code. เป็นไปได้หรือไม่และถ้าเป็นเช่นนั้นฉันจะทำอย่างไร นี่คือตัวอย่างโค้ดด้านล่าง:

tsconfig.jsonไฟล์ (ฉันไม่แน่ใจว่าจะค่อนข้างใช้ในการทดสอบของฉันมันไม่ได้ดูเหมือนจะมีความจำเป็น.)

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

ความพยายาม 1:

ในtypes/MyLib/index.d.ts:

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

ในไฟล์ JS index.jsและใช้งานได้ดี:

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

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

ในไฟล์ HTML (ไม่สามารถใช้งานได้) 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>

ความพยายาม 2:

ในtypes/MyLib/index2.d.ts:

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

ในไฟล์ JS index2.jsและใช้งานได้ดี:

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

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

ในไฟล์ HTML (ไม่สามารถใช้งานได้) 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

ฉันได้ทำการค้นคว้าหาข้อมูลในซอร์สโค้ดและพบว่าบริการภาษาที่ใช้สำหรับฝัง<script>ใน HTML นั้นแตกต่างจากที่ใช้สำหรับ.js/.tsไฟล์แบบสแตนด์อโลนอย่างสิ้นเชิง

ตรวจสอบลิงค์ด้านบนหากคุณสนใจ ในขณะที่คุณจะได้เห็นมันอีกส่วนขยายในตัวเมื่อเทียบกับ"html-language-features" "typescript-language-features"ก่อนอื่นมันเป็นไปไม่ได้เลยที่ทั้งสองจะมีพฤติกรรมเหมือนกัน ประการที่สองอินสแตนซ์บริการภาษา ts ที่ใช้ถูกสร้างขึ้นโดยเจตนาโดยคงที่และง่ายts.compilerOptionsขึ้นโดยไม่มีการตั้งค่า API ให้ผู้ใช้ปรับแต่งได้

คำขอคุณลักษณะของคุณเป็นคำขอที่มีมายาวนานโปรดดู# 26338ย้อนหลังไปถึงปี 2017 แต่ทีมงาน vscode ไม่เต็มใจที่จะตอบกลับ

ดังนั้นทางตันที่นี่ ... เป็นไปไม่ได้กับนามสกุลอย่างเป็นทางการ

วิธีแก้ปัญหาที่เป็นไปได้คือการแยกโปรเจ็กต์html-language-featuresเพื่อสร้างบิลด์ที่กำหนดเองดังนั้นเพื่อลักลอบใช้คุณสมบัติที่คุณต้องการ คุณสามารถปิดใช้งานส่วนขยายในตัวและแทนที่ด้วยโครงสร้างที่กำหนดเองของคุณ

สำหรับโค้ดที่จะแก้ไขฉันไม่ได้เชี่ยวชาญ API การเขียนโปรแกรม TS แต่ฉันสามารถแนะนำคุณให้รู้จักกับแพตช์ของผู้ชาย@shuaihuGaoที่พบในปัญหา github โปรแกรมแก้ไขเพิ่มตัวเลือกการตั้งค่าhtml.libDefinitionFilesเพื่อรับรายการ.d.tsไฟล์ที่จะรวมเมื่อตรวจสอบความถูกต้องของสคริปต์ JS ที่ฝังไว้

ไม่ใช่สิ่งที่คุณถาม แต่เป็นวิธีแก้ปัญหาที่ดี คุณอาจต้องการที่จะลองมันออกลิงค์ดาวน์โหลดที่นี่