Aracılığıyla paylaş

JavaScript IntelliSense

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

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

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ını temel alan 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 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 fonksiyon 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.
  • exports nesnesinde özellik atamaları veya module.exports özelliğine 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 etiketini burada gösterildiği gibi 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ımlanmaz. 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".
}

Tür Denetimi JavaScript Dosyaları'deki JSDoc bilgilerine bakarak şu anda desteklenen JSDoc açıklamalarını görebilirsiniz.

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, JavaScript IntelliSense bir .d.ts dosyasında bildirilen değerler için 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 (JSDoc etiketi kullanarak) bu tür bilgileri (arabirim aracılığıyla) sağlayan basit bir TypeScript tanım dosyası örneği göstereceğiz.

TypeScript tanım dosyası

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 DefinitelyTypedüzerindedir.

Varsayılan olarak, dil hizmeti hangi JavaScript kitaplıklarının kullanıldığını 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\TypeScriptkonumundaki 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 bu bölümde 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 dosya jquery.d.ts getirilir ve yüklenir. Bu .d.ts dosyasının projeniz üzerinde hiçbir etkisi olmayacaktır.

IntelliSense'i yapılandırma

Araçlar > Seçenekleri > Metin Düzenleyicisi > JavaScript/TypeScript > IntelliSense Genel'i seçerek IntelliSense >deyimi tamamlama davranışını değiştirebilirsiniz.

İşlemek için Yalnızca Sekme veya Enter kullan'ı seçtiğinizde JavaScript kod düzenleyicisi, tamamlama listesinde yalnızca Sekme veya Enter tuşunu seçtikten sonra seçili öğeler içeren deyimleri ekler. Bu onay kutusunun seçimini kaldırdığınızda nokta, virgül, iki nokta üst üste, ayraç açma ve ayraç ({) gibi diğer karakterler de seçili öğelerle deyimleri ekleyebilir.

İlgili içerik