Блог

Главная - Вопросы по программированию - Ссылка на файл машинописного текста определения от HTML « with VS Code

Ссылка на файл машинописного текста определения от HTML « with VS Code

#html #typescript #visual-studio-code #jsdoc

#HTML #typescript #visual-studio-code #jsdoc

Вопрос:

Я могу использовать 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>

Комментарии:

1. Это зависит от вашей среды разработки. Поскольку эти файлы являются не файлами JavaScript, а HTML-файлами со встроенным JavaScript внутри тегов, службе языка HTML вашей IDE потребуется взаимодействовать со службой языка TypeScript (или другой службой, которая делает то же самое) и использовать ее для обработки содержимого тегов скрипта.

2. О, да, я забыл указать, какую среду IDE я использую. Я использую VS Code. Я обновлю вопрос.

3. Поскольку он работает в файлах JavaScript, но не в тегах скрипта, вам нужен плагин HTML, который обрабатывает блоки скрипта так, как вы хотите, но я не знаю, доступен ли такой плагин. В любом случае писать больше нескольких строк в тегах скрипта — плохая практика

4. Это для небольшого забавного проекта, над которым я работаю, где я передаю HTML от сервисного работника и вызываю IndexedDB для получения данных. Итак, я хочу что-то похожее на то, как работает Svelte, где я могу иметь HTML и JavaScript в одном файле, чтобы сохранить его более целостным. Но я на самом деле разбираю HTML / JS в файл только для JS во время сборки. Итак, причина, по которой мне нужны файлы определения TypeScript, заключается в том, что это сложнее, чем простое приложение. Но TypeScript (проверка типов) с JSDoc отлично работает в теге script, но по какой-то причине не позволяет мне импортировать внешние типы.

5. А, теперь я понимаю, что вы имеете в виду. Я думал, что типы JSDoc вообще не работают для вас в теге. Я думаю, вы можете заставить их работать и что это может иметь какое-то отношение к tsconfig.json. Я попытаюсь взглянуть на это позже.

Ответ №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-скрипта.

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