Udostępnij za pośrednictwem

JavaScript IntelliSense

  • Artykuł

Visual Studio zapewnia zaawansowane środowisko edytowania języka JavaScript od razu po instalacji. 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.

Funkcja IntelliSense w języku JavaScript wyświetla informacje dotyczące list parametrów i elementów. 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 do obiektu exports lub przypisania do właściwości 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.

Funkcja IntelliSense oparta na jsdoc

Jeśli wnioskowanie typu nie udostępnia żądanych informacji o typie (lub w celu wsparcia dokumentacji), informacje o typie mogą być udostępniane jawnie za pośrednictwem adnotacji JSDoc. Aby na przykład 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 za pomocą 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 dotyczące obecnie obsługiwanych adnotacji JSDoc w Sprawdzanie typów plików JavaScript.

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, obsługa IntelliSense dla JavaScript może być zapewniona dla wartości zadeklarowanych w pliku .d.ts (zobacz dokumentację języka TypeScript ), a typy, takie jak interfejsy i klasy, które są zadeklarowane w 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).

plik definicji TypeScript

Automatyczne pozyskiwanie definicji typów

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

Domyślnie usługa językowa próbuje wykryć, które biblioteki 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 %LOCALAPPDATA%\Microsoft\TypeScript.

Notatka

Ta funkcja jest domyślnie wyłączona, jeśli używasz pliku konfiguracji tsconfig.json, ale można je włączyć zgodnie z opisem 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 mniej więcej 400 najpopularniejszych bibliotek Języka JavaScript. Jeśli na przykład masz jquery-1.10.min.js w projekcie, 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ść