使用 VS Code 从 HTML `<script>` 引用 TypeScript 定义文件

Question

我可以在 HTML 中的标记JSDoc中使用script，但无法引用类型定义文件 ( .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

我做了一些研究，深入研究了源代码，发现用于嵌入HTML 的语言服务与用于独立文件的语言服务完全不同。<script>.js/.ts

如果您有兴趣，请查看上面的链接。正如您所看到的，它是另一个内置扩展，"html-language-features"而不是"typescript-language-features". 所以首先，两人的行为不可能是一样的。其次，所使用的ts 语言服务实例是有意使用固定和简化的方式创建的ts.compilerOptions，没有向用户公开任何设置 API 来对其进行自定义。

您的功能请求实际上是一个长期存在的请求，请参阅#26338，可以追溯到 2017 年，但 vscode 团队似乎不愿意回应。

所以，这里是死胡同……官方扩展不可能实现。

可能的解决方案是分叉html-language-features项目来进行自定义构建，以便走私您想要的功能。您可以禁用内置扩展并将其替换为您的自定义构建。

至于要修改哪些代码，我不是 TS 编程 API 的专家，但我可以向您推荐这个@shuaihuGao家伙的补丁，在上面的 github 问题中找到。该补丁添加了一个设置选项，用于在验证嵌入式 JS 脚本时html.libDefinitionFiles获取要包含的文件列表.d.ts。

不完全是你所要求的，但仍然是一个很好的解决方法。您可能想尝试一下，请在此处下载链接。