使用VS Code从HTML`< script>`中引用TypeScript定义文件 [英] Reference TypeScript definition file from HTML `<script>` with VS Code

问题描述

我可以在HTML的script标记中使用JSDoc，但不能引用类型定义文件(.d.ts).我正在使用VS Code.这可能吗，如果可以，我该怎么做?下面是一些示例代码:

I am able to use JSDoc in a script tag in HTML but am not able to reference a type definition file (.d.ts). I'm using VS Code. Is this possible and if so how do I do it? Here's some example code below:

tsconfig.json文件(我不确定如何在测试中充分使用它，似乎不需要.):

The tsconfig.json file (I'm not sure how to quite use this in my tests, it doesn't seem to be needed.):

{
    "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中，并且可以正常运行:

In the JS file index.js and works fine:

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

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

在HTML文件中(这些功能均无效)index.html:

In the HTML file (none of these work) 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中，并且可以正常运行:

In the JS file index2.js and works fine:

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

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

在HTML文件中(这些功能均无效)index2.html:

In the HTML file (none of these work) 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>

推荐答案

我做了一些研究，深入研究了

I did some research, dig into source code and find out the language service used for embedded <script> inside HTML is entirely different from the one used for standalone .js/.ts file.

如果您有兴趣，请查看上面的链接.如您所见，它是另一个内置扩展"html-language-features"，而不是"typescript-language-features".因此，首先，两者不可能表现出相同的行为.第二，所使用的 ts语言服务实例是使用固定且经过简化的ts.compilerOptions故意创建的，没有暴露给用户的自定义设置API.

Check the above link if you're interested. As you would see, it's another builtin extension "html-language-features" as opposed to "typescript-language-features". So first of all, it's impossible for the two to behave the same. Second of all, the ts language service instance used are intentionally created with a fixed and simplified ts.compilerOptions, with no setting API exposed to user to customize it.

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

Your feature request is actually a long standing one, see #26338, dates back to 2017, but vscode team seems reluctant to respond.

所以，这里死胡同了……官方扩展名无法实现.

可能的解决方案是派发

Possible solution is to fork the html-language-features project to make a custom build, so to smuggle in the features you want. You can disable the builtin extension and replace it with your custom build.

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

As of what code to modify, I'm not expert of the TS programming API, but I can refer you to this @shuaihuGao guy's patch, found in the above github issue. The patch adds a setting option html.libDefinitionFiles to take in a list of .d.ts files to be included when validating embedded JS script.

并非完全是您的要求，但是还是一个不错的解决方法.您可能想尝试一下，在此处下载链接.

Not entirely what you ask, but a nice workaround nonetheless. You might want to try it out, download link here.

这篇关于使用VS Code从HTML`< script>`中引用TypeScript定义文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！