Bagikan melalui

JavaScript IntelliSense

  • Artikel

Visual Studio menyediakan pengalaman pengeditan JavaScript yang canggih langsung dari kotak. Didukung oleh layanan bahasa berbasis TypeScript, Visual Studio memberikan IntelliSense yang kaya, dukungan untuk fitur JavaScript modern, dan fitur produktivitas seperti Buka Definisi, pemfaktoran ulang, dan banyak lagi.

Untuk informasi selengkapnya tentang fungsionalitas IntelliSense umum Visual Studio, lihat Menggunakan IntelliSense.

JavaScript IntelliSense menampilkan informasi tentang parameter dan daftar anggota. Informasi ini disediakan oleh layanan bahasa TypeScript, yang menggunakan analisis statis di belakang layar untuk lebih memahami kode Anda.

TypeScript menggunakan beberapa sumber untuk membangun informasi ini:

IntelliSense berdasarkan inferensi jenis

Di JavaScript, sebagian besar waktu tidak ada informasi jenis eksplisit yang tersedia. Untungnya, biasanya cukup mudah untuk mencari tahu jenis yang diberikan konteks kode di sekitarnya. Proses ini disebut inferensi jenis.

Untuk variabel atau properti, jenis biasanya adalah jenis nilai yang digunakan untuk menginisialisasinya atau penetapan nilai terbaru.

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

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

Untuk fungsi, jenis pengembalian dapat disimpulkan dari pernyataan pengembalian.

Untuk parameter fungsi, saat ini tidak ada inferensi, tetapi ada cara untuk mengatasinya menggunakan file JSDoc atau TypeScript .d.ts (lihat bagian selanjutnya).

Selain itu, ada inferensi khusus untuk hal-hal berikut:

  • Kelas "gaya ES3", ditentukan menggunakan fungsi konstruktor dan penugasan ke properti prototipe.
  • Pola modul gaya CommonJS, ditentukan sebagai penetapan properti pada exports objek, atau penugasan ke module.exports properti .
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.

IntelliSense berdasarkan JSDoc

Jika inferensi jenis tidak memberikan informasi jenis yang diinginkan (atau untuk mendukung dokumentasi), informasi jenis dapat diberikan secara eksplisit melalui anotasi JSDoc. Misalnya, untuk memberikan jenis tertentu pada objek yang dideklarasikan sebagian, Anda dapat menggunakan tag seperti yang @type ditunjukkan di bawah ini:

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

Seperti disebutkan, parameter fungsi tidak pernah disimpulkan. Namun, menggunakan tag JSDoc @param Anda juga dapat menambahkan jenis ke parameter fungsi.

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

Lihat informasi JsDoc di Mengetik Memeriksa File JavaScript untuk anotasi JsDoc yang saat ini didukung.

IntelliSense berdasarkan file deklarasi TypeScript

Karena JavaScript dan TypeScript didasarkan pada layanan bahasa yang sama, mereka dapat berinteraksi dengan cara yang kaya. Misalnya, JavaScript IntelliSense dapat disediakan untuk nilai yang dideklarasikan dalam file .d.ts (lihat dokumentasi TypeScript), dan jenis seperti antarmuka dan kelas yang dideklarasikan dalam TypeScript tersedia untuk digunakan sebagai jenis dalam komentar JsDoc.

Di bawah ini, kami menunjukkan contoh sederhana file definisi TypeScript yang menyediakan informasi jenis tersebut (melalui antarmuka) ke file JavaScript dalam proyek yang sama (menggunakan JsDoc tag).

TypeScript definition file

Akuisisi otomatis definisi jenis

Di dunia TypeScript, pustaka JavaScript paling populer memiliki API mereka yang dijelaskan oleh file .d.ts , dan repositori yang paling umum untuk definisi tersebut adalah di DefinitelyTyped.

Secara default, layanan bahasa mencoba mendeteksi pustaka JavaScript mana yang digunakan, lalu secara otomatis mengunduh dan mereferensikan file .d.ts terkait yang menjelaskan pustaka untuk menyediakan IntelliSense yang lebih kaya. File diunduh ke cache yang terletak di bawah folder pengguna di %LOCALAPPDATA%\Microsoft\TypeScript.

Catatan

Fitur ini dinonaktifkan secara default jika Anda menggunakan file konfigurasi tsconfig.json, tetapi dapat diatur ke diaktifkan seperti yang diuraikan lebih lanjut di bawah ini.

Saat ini, deteksi otomatis berfungsi untuk dependensi yang diunduh dari npm (dengan membaca file package.json ), Bower (dengan membaca file bower.json ), dan untuk file longgar dalam proyek Anda yang cocok dengan daftar sekitar 400 pustaka JavaScript paling populer. Misalnya, jika Anda memiliki jquery-1.10.min.js dalam proyek Anda, file jquery.d.ts akan diambil dan dimuat untuk memberikan pengalaman pengeditan yang lebih baik. File .d.ts ini tidak akan berdampak pada proyek Anda.

Konten terkait