IntelliSense для JavaScript

  • Статья

Visual Studio обеспечивает эффективное редактирование JavaScript без дополнительной подготовки. На основе языковой службы TypeScript Visual Studio предоставляет широкие возможности IntelliSense, поддержку современных функций JavaScript и функции повышения производительности, такие как Переход к определению, рефакторинг и многое другое.

Дополнительные сведения об общих функциональных возможностях IntelliSense в Visual Studio см. в разделе Использование технологии IntelliSense.

В JavaScript IntelliSense отображаются сведения о списках параметров и членов. Эта информация предоставляется службой языка TypeScript, которая использует статический анализ за кулисами, чтобы лучше понять код.

Для формирования такой информации TypeScript использует несколько источников.

IntelliSense на основе определения типа

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

Для переменной или свойства типом обычно является тип значения, используемый для его инициализации, либо последнее присвоенное значение.

var nextItem = 10;
nextItem; // here we know nextItem is a number

nextItem = "box";
nextItem; // now we know nextItem is a string

Для функции тип возвращаемого значения можно вывести из операторов return.

Для параметров функций вывод сейчас отсутствует, однако это можно обойти с помощью файлов .d.ts TypeScript или JSDoc (см. в следующих разделах).

Кроме того, есть специальный вывод для следующих элементов:

  • Классы в стиле ES3, определяемые с использованием функции конструктора и назначений свойству прототипа.
  • Шаблоны модуля в стиле CommonJS, указанные в качестве назначений свойств для объекта exports или назначений свойству module.exports.
function Foo(param1) {
    this.prop = param1;
}
Foo.prototype.getIt = function () { return this.prop; };
// Foo will appear as a class, and instances will have a 'prop' property and a 'getIt' method.

exports.Foo = Foo;
// This file will appear as an external module with a 'Foo' export.
// Note that assigning a value to "module.exports" is also supported.

IntelliSense на основе JSDoc

Если вывод типов не предоставляет необходимые сведения о типе (или для поддержки документации), сведения о типе могут предоставляться явным образом с помощью заметок JSDoc. Например, чтобы назначить определенный тип частично объявленному объекту, можно использовать тег @type, как показано ниже:

/**
 * @type {{a: boolean, b: boolean, c: number}}
 */
var x = {a: true};
x.b = false;
x. // <- "x" is shown as having properties a, b, and c of the types specified

Как уже упоминалось, параметры функции никогда не выводятся. Однако с помощью тега @param JSDoc можно добавить типы и в параметры функции.

/**
 * @param {string} param1 - The first argument to this function
 */
function Foo(param1) {
    this.prop = param1; // "param1" (and thus "this.prop") are now of type "string".
}

Сведения JsDoc см. в статье "Проверка файлов JavaScript для типов " для поддерживаемых в настоящее время заметок JsDoc.

IntelliSense на основе файлов объявления TypeScript

Так как JavaScript и TypeScript основаны на одной языковой службе, они могут взаимодействовать с широкими возможностями. Например, JavaScript IntelliSense можно предоставить для значений, объявленных в файле .d.ts (см. документацию по TypeScript), а типы, такие как интерфейсы и классы, объявленные в TypeScript, доступны для использования в качестве типов в комментариях JsDoc.

Ниже показан простой пример файла определения TypeScript, предоставляющий подробные сведения о типе (через интерфейс) файлу JavaScript в том же проекте (с помощью тега JsDoc).

TypeScript definition file

Автоматическое получение определений типов

В среде TypeScript API наиболее популярных библиотек JavaScript описываются файлами .d.ts, а наиболее распространенным репозиторием для таких определений является DefinitelyTyped.

По умолчанию языковая служба пытается определить, какие библиотеки JavaScript используются, а затем автоматически скачать и ссылаться на соответствующий D.ts-файл, описывающий библиотеку, чтобы обеспечить более широкий объем IntelliSense . Файлы скачиваются в кэш, расположенный в пользовательской папке в %LOCALAPPDATA%\Microsoft\TypeScript.

Примечание.

Эта функция отключена по умолчанию, если вы используете файл конфигурации tsconfig.json , но его можно включить, как описано ниже.

В настоящее время автоматическое обнаружение работает для зависимостей, скачанных из npm (считывая файл package.json), Bower (считывая файл bower.json), а также для свободных файлов в проекте, которые соответствуют списку наиболее популярных библиотек JavaScript. Например, если у вас в проекте есть jquery-1.10.min.js, для расширения возможностей редактирования будет получен и загружен файл jquery.d.ts. Этот файл .d.ts не оказывает влияния на проект.

Связанный контент