Ссылка на файл определения 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, чтобы создать индивидуальную сборку, чтобы скрыть в себе нужные вам функции. Вы можете отключить встроенное расширение и заменить его собственной сборкой.

На какой код необходимо изменить, я не эксперт в TS программирования API, но я могу направить вас к этой @shuaihuGao парню патч , найденный в вышеуказанном вопросе GitHub. Патч добавляет параметр настройки html.libDefinitionFilesдля включения списка .d.tsфайлов при проверке встроенного JS-скрипта.

Не совсем то, о чем вы спрашиваете, но тем не менее хороший обходной путь. Возможно, вы захотите попробовать, ссылка для скачивания здесь .