Поделиться через

JavaScript IntelliSense

  • Статья

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.

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

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

  • Классы "ES3-style" определяемые с помощью функции конструктора и присваиванием свойств прототипу.
  • Шаблоны модулей в стиле 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

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

/**
 * @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

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

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

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

Заметка

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

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

Связанное содержимое