JavaScript IntelliSense

  • Artykuł

Program Visual Studio zapewnia zaawansowane środowisko edytowania języka JavaScript bezpośrednio poza urządzeniem. Obsługiwane przez usługę językową opartą na języku TypeScript, program Visual Studio zapewnia zaawansowaną funkcję IntelliSense, obsługę nowoczesnych funkcji Języka JavaScript i funkcje zwiększające produktywność, takie jak Przechodzenie do definicji, refaktoryzacja i inne.

Aby uzyskać więcej informacji na temat ogólnych funkcji IntelliSense programu Visual Studio, zobacz Using IntelliSense (Korzystanie z funkcji IntelliSense).

Funkcja IntelliSense w języku JavaScript wyświetla informacje dotyczące list parametrów i elementów członkowskich. Te informacje są udostępniane przez usługę języka TypeScript, która używa analizy statycznej w tle, aby lepiej zrozumieć kod.

Język TypeScript używa kilku źródeł do utworzenia tych informacji:

Funkcja IntelliSense oparta na wnioskowaniu typu

W języku JavaScript w większości przypadków nie ma jawnych informacji o typie. Na szczęście zwykle łatwo jest ustalić typ, biorąc pod uwagę otaczający kontekst kodu. Ten proces jest nazywany wnioskowaniem typu.

W przypadku zmiennej lub właściwości typ jest zazwyczaj typem wartości użytej do zainicjowania lub ostatniego przypisania wartości.

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

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

W przypadku funkcji zwracany typ można wywnioskować z instrukcji return.

W przypadku parametrów funkcji obecnie nie ma wnioskowania, ale istnieją sposoby obejścia tego problemu przy użyciu plików JSDoc lub TypeScript .d.ts (zobacz sekcje późniejsze).

Ponadto istnieje specjalne wnioskowanie dla następujących elementów:

  • Klasy typu "ES3" określone przy użyciu funkcji konstruktora i przypisań do właściwości prototypu.
  • Wzorce modułów w stylu CommonJS, określone jako przypisania właściwości w exports obiekcie lub przypisania do module.exports właściwości.
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.

Funkcja IntelliSense oparta na jsdoc

Jeśli wnioskowanie typu nie udostępnia żądanych informacji o typie (lub w celu obsługi dokumentacji), informacje o typie mogą być udostępniane jawnie za pośrednictwem adnotacji JSDoc. Na przykład, aby nadać częściowo zadeklarowany obiekt określony typ, można użyć tagu @type , jak pokazano poniżej:

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

Jak wspomniano, parametry funkcji nigdy nie są wnioskowane. Jednak przy użyciu tagu JSDoc @param można również dodawać typy do parametrów funkcji.

/**
 * @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".
}

Zobacz informacje jsdoc w artykule Sprawdzanie typów plików JavaScript dla adnotacji JsDoc, które są obecnie obsługiwane.

Funkcja IntelliSense oparta na plikach deklaracji TypeScript

Ponieważ języki JavaScript i TypeScript są oparte na tej samej usłudze językowej, są w stanie wchodzić w interakcje w bogaty sposób. Na przykład funkcję IntelliSense języka JavaScript można podać dla wartości zadeklarowanych w pliku .d.ts (zobacz dokumentację języka TypeScript), a typy, takie jak interfejsy i klasy zadeklarowane w języku TypeScript, są dostępne do użycia jako typy w komentarzach JsDoc.

Poniżej przedstawiono prosty przykład pliku definicji języka TypeScript dostarczającego takie informacje o typie (za pośrednictwem interfejsu) do pliku JavaScript w tym samym projekcie (przy użyciu tagu JsDoc ).

TypeScript definition file

Automatyczne pozyskiwanie definicji typów

W świecie języka TypeScript najbardziej popularne biblioteki Języka JavaScript mają swoje interfejsy API opisane przez pliki d.ts , a najbardziej typowe repozytorium dla takich definicji znajduje się na ZdecydowanieTyped.

Domyślnie usługa językowa próbuje wykryć, które biblioteki Języka JavaScript są używane, a następnie automatycznie pobrać i odwołać się do odpowiedniego pliku d.ts opisującego bibliotekę w celu zapewnienia bogatszej funkcji IntelliSense. Pliki są pobierane do pamięci podręcznej znajdującej się w folderze użytkownika w folderze %LOCALAPPDATA%\Microsoft\TypeScript.

Uwaga

Ta funkcja jest domyślnie wyłączona , jeśli używasz pliku konfiguracji tsconfig.json , ale może być ustawiona na włączoną, jak opisano poniżej.

Obecnie funkcja automatycznego wykrywania działa w przypadku zależności pobranych z narzędzia npm (odczytując plik package.json), Bower (odczytując plik bower.json) i w przypadku luźnych plików w projekcie, które pasują do listy około 400 najpopularniejszych bibliotek Języka JavaScript. Jeśli na przykład w projekcie masz plik jquery-1.10.min.js , plik jquery.d.ts zostanie pobrany i załadowany w celu zapewnienia lepszego środowiska edycji. Ten plik .d.ts nie będzie miał wpływu na projekt.

Powiązana zawartość