JavaScript IntelliSense

  • Makale

Visual Studio, hemen kullanıma sunulan güçlü bir JavaScript düzenleme deneyimi sunar. TypeScript tabanlı bir dil hizmeti tarafından desteklenen Visual Studio zengin IntelliSense, modern JavaScript özellikleri için destek ve Tanıma Git, yeniden düzenleme ve daha fazlası gibi üretkenlik özellikleri sunar.

Visual Studio'nun genel IntelliSense işlevselliği hakkında daha fazla bilgi için bkz . IntelliSense kullanma.

JavaScript IntelliSense, parametre ve üye listelerine ilişkin bilgileri görüntüler. Bu bilgiler, kodunuzu daha iyi anlamak için arka planda statik analiz kullanan TypeScript dil hizmeti tarafından sağlanır.

TypeScript, bu bilgileri oluşturmak için birkaç kaynak kullanır:

Tür çıkarımına göre IntelliSense

JavaScript'te çoğu zaman açık tür bilgisi yoktur. Neyse ki, çevresindeki kod bağlamı göz önüne alındığında bir tür bulmak genellikle oldukça kolaydır. Bu işleme tür çıkarımı denir.

Bir değişken veya özellik için tür genellikle onu başlatmak için kullanılan değerin veya en son değer atamasının türüdür.

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

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

bir işlev için dönüş türü return deyimlerinden çıkarılabilir.

İşlev parametreleri için şu anda çıkarım yoktur, ancak JSDoc veya TypeScript .d.ts dosyalarını kullanarak bu sorunu geçici olarak gidermenin yolları vardır (sonraki bölümlere bakın).

Ayrıca, aşağıdakiler için özel çıkarım vardır:

  • Bir oluşturucu işlevi ve prototip özelliğine atamalar kullanılarak belirtilen "ES3 stili" sınıflar.
  • Nesnede exports özellik atamaları veya özelliğine module.exports atamalar olarak belirtilen CommonJS stili modül desenleri.
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 tabanlı IntelliSense

Tür çıkarımı istenen tür bilgilerini (veya belgeleri desteklemek için) sağlamazsa, tür bilgileri JSDoc ek açıklamaları aracılığıyla açıkça sağlanabilir. Örneğin, kısmen bildirilen bir nesneye belirli bir tür vermek için, aşağıda gösterildiği gibi etiketini kullanabilirsiniz @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

Belirtildiği gibi, işlev parametreleri hiçbir zaman çıkarılır. Ancak, JSDoc @param etiketini kullanarak işlev parametrelerine de türler ekleyebilirsiniz.

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

Şu anda desteklenen JsDoc ek açıklamaları için JavaScript Dosyalarını Denetleme'deki JsDoc bilgilerine bakın.

TypeScript bildirim dosyalarını temel alan IntelliSense

JavaScript ve TypeScript aynı dil hizmetini temel aldıkları için zengin bir şekilde etkileşim kurabiliyorlar. Örneğin, .d.ts dosyasında bildirilen değerler için JavaScript IntelliSense sağlanabilir (bkz. TypeScript belgeleri) ve TypeScript'te bildirilen arabirimler ve sınıflar gibi türler JsDoc açıklamalarında tür olarak kullanılabilir.

Aşağıda, aynı projedeki bir JavaScript dosyasına (etiket kullanarak) bu tür bilgileri (arabirim aracılığıyla) sağlayan basit bir JsDoc TypeScript tanım dosyası örneği göstereceğiz.

TypeScript definition file

Tür tanımlarının otomatik olarak alınması

TypeScript dünyasında, en popüler JavaScript kitaplıklarının API'leri .d.ts dosyalarıyla açıklanmıştır ve bu tür tanımların en yaygın deposu Kesinlikle Türü'ndedir.

Varsayılan olarak, dil hizmeti hangi JavaScript kitaplıklarının kullanımda olduğunu algılamaya çalışır ve daha zengin IntelliSense sağlamak için kitaplığı açıklayan ilgili .d.ts dosyasını otomatik olarak indirip başvurur. Dosyalar , %LOCALAPPDATA%\Microsoft\TypeScript konumundaki kullanıcı klasörünün altında bulunan bir önbelleğe indirilir.

Not

Tsconfig.json yapılandırma dosyası kullanıyorsanız bu özellik varsayılan olarak devre dışı bırakılır, ancak aşağıda daha ayrıntılı olarak açıklandığı gibi etkin olarak ayarlanabilir.

Şu anda otomatik algılama, npm'den indirilen bağımlılıklar (package.json dosyasını okuyarak), Bower (bower.json dosyasını okuyarak) ve projenizde kabaca en popüler 400 JavaScript kitaplığının listesiyle eşleşen gevşek dosyalar için çalışır. Örneğin, projenizde jquery-1.10.min.js varsa, daha iyi bir düzenleme deneyimi sağlamak için jquery.d.ts dosyası getirilir ve yüklenir. Bu .d.ts dosyasının projeniz üzerinde hiçbir etkisi olmayacaktır.

İlgili içerik