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

Question

我可以在 HTML 的 script 标签中使用 JSDoc，但无法引用类型定义文件 (.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文件中（none这些作品）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文件中（none这些作品）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

我做了一些研究，深入研究了 source code，发现 HTML 中用于嵌入式 <script> 的 语言服务 完全不同来自用于独立 .js/.ts 文件的文件。

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

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

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

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

至于修改什么代码，我不是TS编程专家API，但是可以参考这个@shuaihuGao guy's patch，在上面的github问题中找到.该补丁添加了一个设置选项 html.libDefinitionFiles 以在验证嵌入式 JS 脚本时接收要包含的 .d.ts 文件列表。

不完全是你问的，但仍然是一个很好的解决方法。您可能想尝试一下，download link here。

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

Reference TypeScript definition file from HTML `<script>` with VS Code

html

jsdoc

typescript

visual-studio-code

尝试 1：

尝试 2：