Эта статья была впервые опубликована в моем блоге (Нажмите здесь, чтобы просмотреть), добро пожаловать, чтобы следовать.
предисловие
Недавно я занимался рефакторингом кода проекта, и одним из требований было добавить в код интеллектуальные подсказки и проверку типов. Интеллектуальные подсказки, которые представляют собой IntelliSense на английском языке, могут предоставить разработчикам такие функции, как интеллектуальное завершение кода, всплывающие подсказки и определения перехода, чтобы помочь им правильно и быстро завершить кодирование. Кстати говоря, JavaScript, как динамический слаботипизированный интерпретируемый язык, может менять тип после объявления переменной, а определить тип можно только во время выполнения, что склонно производить большое количество ошибок, которые можно обнаружить только в запуск кода По сравнению со статически типизированными языками, такими как Java, опыт разработки действительно плохой. Что более раздражает, так это то, что intellisense полагается на статическую проверку типов, поэтому в прошлом было практически невозможно ожидать, что intellisense в JavaScript догонит Java. Конечно, времена меняются, и TypeScript существует уже давно, привнося в JavaScript статическую проверку типов и многие другие функции. Также есть решение для intellisense JavaScript. После изучения в течение определенного периода времени, следующий использует редактор VSCode в качестве инструмента разработки, чтобы представить, как добавлять интеллектуальные подсказки и проверку типов в JavaScript.
На основе JSDoc
JSDocВ настоящее время это самый распространенный генератор документации JavaScript API, очень удобно автоматически генерировать документацию, оставляя комментарии к коду в соответствии с его синтаксисом. Поскольку JSDoc может предоставить подробную информацию о типе, он также принимается редакторами, такими как VSCode, для интеллектуальных подсказок. Например, вы можете использовать@typeтег, чтобы придать частично объявленному объекту особый тип:
/**
* @type {{a: boolean, b: boolean, c: number}}
*/
var x = {a: true};
x.b = false;
x. // <- 由于 type 声明，"x" 将被提示含有属性 a,b 以及 c
Чаще всего JSDoc используется для объявления типов параметров функций, используя@paramЧто нужно сделать:
/**
* @param {string} param1 - 这里可以用于解释参数含义
*/
function Foo(param1) {
this.prop = param1; // param1 （以及 this.prop）均为 string 类型
}
Добавление комментариев JSDoc в код облегчает чтение и понимание кода (не нужно сходить с ума, когда код сдается, конечно, предпосылка в том, что комментарии хорошо написаны), а также обеспечивает разработку опыт и уменьшает количество типов данных, которые можно обнаружить только при ошибках во время выполнения. VSCode в основном поддерживает общий синтаксис JSDoc.Подробнее см.JSDoc support in JavaScript.
На основе файлов объявления типов TypeScript
В дополнение к использованию JSDoc для предварительного объявления типов более радикальным подходом является прямое использование TypeScript, разработанного Microsoft, чтобы обеспечить полную статическую проверку типов для всего проекта. Конечно, для старых проектов стоимость преобразования относительно велика (аналогично использованию Flow, слишком много кодов, которые нужно переместить, а Flow не закончен). Однако из-за той же двери, что и учитель TypeScript, VSCode может напрямую читать файл объявления типа первого, чтобы предоставить интеллектуальные подсказки для JavaScript (фактически, функция интеллектуальных подсказок JavaScript разработана на основе языковой службы JavaScript, предоставляемой Команда TypeScript для VSCode). Файлы объявления типов TypeScript начинаются с.d.tsЭто суффикс для описания типа экспортируемого кода файла JavaScript с тем же именем, который по функциям аналогичен языку C..hголовной файл. Грубо говоря, файл объявления типа ts подобен переписыванию комментариев JSDoc в синтаксисе TypeScript и извлечению в отдельный файл. VSCode интегрирует их. Когда вы смешиваете их, вы можете напрямую использовать интерфейс и класс, определенные в файле объявления типа ts в комментариях JSDoc. Используйте официальную принципиальную схему напрямую (Visual Studio на картинке, но это не помешает):
Для собственного кода вы можете написать соответствующий файл объявления типа ts, а для упомянутых сторонних библиотек сообщество также предоставляет решения:DefinitelyTypedПредоставляет файлы объявления типов для распространенных сторонних библиотек. В VSCode есть много сторонних библиотек со встроенными файлами объявления типов.Если вы скачаете его самостоятельно, то сможете напрямую использовать npm:
# @types + 第三方库名称
npm i @types/express
Сведения о синтаксисе файла объявления типа ts см.Введение на официальном сайте.
Кроме того, в VSCode проверка типов не включена по умолчанию, а это значит, что даже если у вас есть подробные комментарии JSDoc или файлы объявления типов ts, у вас все равно могут возникнуть проблемы с типами данных. Метод открытия заключается в добавлении в корневой каталог проектаjsconfig.jsonфайл и установить"checkJs": true, пример следующий:
{
"compilerOptions": {
"checkJs": true
},
// 位于此目录下的文件不进行静态检查和智能提示
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
Суммировать
Наконец, будь то преобразование старых проектов или разработка новых проектов, использование вышеуказанных методов для добавления интеллектуальных подсказок и проверки типов, очевидно, немного замедлит скорость разработки, но мы считаем, что опыт разработки, полученный с помощью интеллектуальных подсказок, принесет много возможностей Ошибки, обнаруженные во время выполнения, предварительно устраняются путем проверки типов, хорошо документированы, а уверенность в рефакторинге кода стоит того, чтобы пожертвовать скоростью.
Справочная документация: