JSDoc и общие типы. Машинопись

В этой статье я объясню, как использовать Typescript с JSDoc, и покажу 2 способа создания общих типов в ваш код.

То, что я собираюсь показать, работает с модулем как ES5, так и ES6. Мой набор инструментов - VSCode в конфигурации по умолчанию без расширений.

Дженерики в JSDoc

Тег @template определяет общий тип. Просто используйте его как обычный тип в нотации JSDoc:

Простая функция определяется , которая заключает аргумент в обещание . Определяется тип шаблона, который затем используется для описания как аргумента, так и возвращаемого типа.

Вот как линтер помогает нам с вызовом функции :

Как видите, тип значения результата изменяется на основе аргумента.

Машинопись с JSDoc

Вы когда-нибудь использовали MomentJS? Он имеет отличную систему набора текста. Введите соответствующие подсказки все над местом. Вот пример. Обратите внимание, как всплывающие подсказки справки с типами аргументов:

Это работает так, потому что исходный код MomentJS содержит типизированный файл с именем moment.d.ts , который определяет все типы и описывает аргументы функции с помощью Typescript синтаксис.

Попробуйте удалить файл определения из node_modules и локального кеша, и вы иметь грубое время на выяснение аргумента функции.

То же верно для любой популярной и сложной библиотеки.

Теперь давайте перейдем от MomentJS и реализуем аналогичный подход с помощью настраиваемого модуля. Скажем, нам нужно создать модуль, который содержит ранее показанную selfPromised() функцию из приведенного выше примера.

Сначала создайте файл определения для модуля . имя модуля будет ./useless.js. Файл определения: ./useless.d.ts. Он описывает экспортированное значение модуля useless.

Я показываю здесь простейший пример. Набор файла поддерживает все Машинописные функции.

Во-вторых, мы реализуем модуль:

Я использую здесь небольшую уловку. VSCode только ищет ввод файла с тем же именем, когда импорт произошел с require или import ключевых слов. Вы не получите никаких подсказок при внедрении модуля, если не используете этот трюк. Хитрость заключается в том, чтобы явно определить тип модуля, как я это сделал в первой строке. с помощью JSDoc нотации.

С помощью этого трюка вам не даже нужно имя набирать для файла то же way как модуль. Если у вас есть несколько модулей, для которых вы хотите создать набор файлов, вы можете определить их в один файл и разделите его с помощью функции пространства имен в Typescript. .

Вот полная реализация ./useless.js.

Наконец, используйте модуль в других местах и возьмите преимущество типа подсказки:

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

Другие мои статьи JSDoc: