Megosztás:

JavaScript IntelliSense

A Visual Studio hatékony JavaScript-szerkesztési élményt nyújt közvetlenül a dobozból. A TypeScript-alapú nyelvi szolgáltatással rendelkező Visual Studio gazdag IntelliSense-t biztosít, támogatja a modern JavaScript-funkciókat, valamint olyan hatékonyságnövelő funkciókat, mint a Go to Definition, az újrabontás stb.

További információ a Visual Studio Általános IntelliSense funkciójáról: Az IntelliSensehasználata.

A JavaScript IntelliSense paraméter- és taglistákra vonatkozó információkat jelenít meg. Ezeket az információkat a TypeScript nyelvi szolgáltatás biztosítja, amely statikus elemzést használ a színfalak mögött a kód jobb megértéséhez.

A TypeScript több forrásból is összeállítja ezeket az információkat:

IntelliSense típuskövetkeztetés alapján

JavaScriptben a legtöbb esetben nincs elérhető explicit típusinformáció. Szerencsére általában könnyű kitalálni egy típust a környező kódkörnyezet alapján. Ezt a folyamatot típus-következtetésnek nevezzük.

Változók vagy tulajdonságok esetében a típus általában az inicializálásához használt érték vagy a legutóbbi érték-hozzárendelés típusa.

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

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

Függvény esetén a visszatérési típus a visszatérési utasításokból következtethető ki.

A függvényparaméterek esetében jelenleg nincs következtetés, de JSDoc- vagy TypeScript -.d.ts fájlokkal is megkerülhetők (lásd a későbbi szakaszokat).

Emellett a következőkre is speciális következtetést lehet következtetni:

  • "ES3-stílusú" osztályok, amelyek konstruktorfüggvény és a prototípustulajdonsághoz való hozzárendelések használatával adhatók meg.
  • CommonJS-stílusú modulminták, a exports objektum tulajdonság-hozzárendeléseként vagy a module.exports tulajdonság hozzárendeléseként megadva.
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.

JSDoc-alapú IntelliSense

Ha a típuskövetkeztetés nem adja meg a kívánt típusinformációkat (vagy a dokumentáció támogatása érdekében), a típusadatokat JSDoc annotációkon keresztül explicit módon is meg lehet adni. Ha például egy részben deklarált objektumnak egy adott típust szeretne adni, a címkét az @type itt látható módon használhatja:

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

Jegyzet

A JavaScripttől eltérően a TypeScript nem támogatja a JSDoc-megjegyzésekben szereplő típusinformációkat. TypeScript esetén használja x: type a szintaxist a változó deklarációjában, például let x: { a: number, b: number}. További információ: JavaScript-fájlok típusellenőrzése.

Ahogy említettük, a függvényparamétereket soha nem következtetik ki. A JSDoc @param címke használatával azonban típusokat is hozzáadhat a függvényparaméterekhez.

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

Az aktuálisan támogatott JSDoc-annotációkkal kapcsolatos információt a JavaScript-fájlok típusellenőrzése részben, a és szakaszban találja.

IntelliSense TypeScript-deklarációs fájlok alapján

Mivel a JavaScript és a TypeScript ugyanazon a nyelvi szolgáltatáson alapul, sokoldalúan tudnak kommunikálni. A JavaScript IntelliSense például megadható egy .d.ts fájlban deklarált értékekhez (lásd TypeScript-dokumentáció), és a TypeScriptben deklarált felületek és osztályok típusokként használhatók a JSDoc-megjegyzésekben.

Az alábbiakban egy egyszerű példát mutatunk be egy TypeScript-definíciós fájlra, amely ilyen típusú információkat nyújt (interfészen keresztül) egy JavaScript-fájlhoz ugyanabban a projektben (JSDoc címkével).

TypeScript-definíciós fájl

Típusdefiníciók automatikus beszerzése

A TypeScript világban a legnépszerűbb JavaScript-kódtárak api-jait .d.ts fájlok ismertetik, és az ilyen definíciók leggyakoribb adattára a DefinitelyTyped.

Alapértelmezés szerint a nyelvi szolgáltatás megpróbálja észlelni, hogy mely JavaScript-kódtárak vannak használatban, majd automatikusan letölti és hivatkozik a kódtárat leíró megfelelő .d.ts fájlra a gazdagabb IntelliSense biztosítása érdekében. A fájlok a \Microsoft\TypeScript %LOCALAPPDATA%felhasználói mappájában található gyorsítótárba lesznek letöltve.

Jegyzet

Ez a funkció alapértelmezés szerint le van tiltva , ha tsconfig.json konfigurációs fájlt használ, de a jelen szakaszban ismertetett módon engedélyezve lehet.

Az automatikus észlelés jelenleg az npm-ből letöltött függőségek esetében működik (a package.json fájl olvasásával), a Bowerrel (a bower.json fájl olvasásával), valamint a projekt laza fájljaival, amelyek nagyjából a 400 legnépszerűbb JavaScript-kódtár listájának felel meg. Ha például jquery-1.10.min.js található a projektben, a jquery.d.ts fájlt fogják beolvasni és betölteni, hogy jobb szerkesztési élményt nyújtson. Ez a .d.ts fájl nem lesz hatással a projektre.

Az IntelliSense konfigurálása

Az IntelliSense utasítás kiegészítésének viselkedését az Eszközök > beállításai > szövegszerkesztő > JavaScript/TypeScript > IntelliSense > Általános elem kiválasztásával módosíthatja.

Ha a Csak a Tab vagy az Enter billentyűkombinációt választja a véglegesítéshez, a JavaScript-kódszerkesztő csak a Tab vagy Az Enter billentyű kiválasztása után fűzi hozzá a kiegészítési listában kijelölt elemeket tartalmazó utasításokat. Ha törli a jelölőnégyzet jelölését, más karakterek – például pont, vessző, kettőspont, nyitott zárójel és nyitott zárójel ({) – is hozzáfűzhetnek utasításokat a kijelölt elemekhez.

Kapcsolódó tartalom

  • Last updated on