Antara muka dalam JavaScript Vanila dengan Kod VS IntelliSense

TL;DR;

Simulasi antara muka JavaScript tulen, menggunakan fungsi analisis kod VS Code IntelliSense, boleh dipanggil kemahiran. Melalui gabungan pintar kilang objek dan fungsi kosong, gesaan kod seperti antara muka dan pemeriksaan jenis dilaksanakan, dan pengendali penggabungan nilai nol (??) digunakan untuk memudahkan kod. Dalam persekitaran pengeluaran, skrip binaan perlu digunakan untuk mengalih keluar kod antara muka yang tidak diperlukan.

Berikut ialah contoh antara muka JavaScript tulen yang bergantung pada analisis kod dalam editor kod seperti VS Code IntelliSense, jadi ia juga boleh dipanggil helah:

<code class="language-javascript">var interface = () => null;

var InterfaceOptions = () => ({
  name: '',
});
InterfaceOptions = interface;

// 使用示例
// =====

let opt = InterfaceOptions`` ?? {
  name: 'Bagel',
};

function createItem(options = InterfaceOptions``) {
  // ...
}

createItem(opt);</code>

Berikut ialah contoh menamakan semula sifat dalam JavaScript tulen:

Anda mencipta kilang objek yang memulakan analisis kod sifat dan kemudian menggantikan objek dengan fungsi yang mengembalikan null. Ini membolehkan beberapa helah pengisytiharan menggunakan operator penggabungan nol (??) untuk memastikan kod anda kemas.

Ia juga berfungsi dengan tatasusunan! Lihat kod sampel dalam bahagian Trivia #4 di bawah.

---

Proses penemuan

1. Saya harap VS Code IntelliSense akan meminta sifat pilihan createBox().

---

2. Menggunakan parameter lalai berfungsi, tetapi saya ingin meletakkannya di tempat lain untuk mengurangkan kekacauan.

---

3. Mengisytiharkan pilihan di luar fungsi menjana ralat kerana nilainya boleh diubah suai oleh sesiapa sahaja.

---

4. Jadi mestilah kilang objek. Pada baris 5, saya menggunakan backticks dan bukannya kurungan untuk membezakan antara "antara muka" dan panggilan fungsi. Sebenarnya, demi artikel ini, saya hanya perlu menggunakan awalan nama unik untuk nama pembolehubah, seperti InterfaceBoxOptions atau sesuatu seperti itu, ok!

---

5. Baiklah, ini berfungsi, tetapi bagaimana jika saya mengisytiharkan pilihan sebagai pembolehubahnya sendiri? Bagaimanakah saya memberitahu IntelliSense bahawa objek mempunyai sifat antara muka?

---

6. Seperti yang anda ketahui, jika saya menetapkan antara muka kepada objek dahulu, IntelliSense menganggap sifat antara muka.

---

7. Saya terkejut, ia masih berfungsi walaupun selepas menetapkan semula pembolehubah dengan objek baharu.

---

8. Tetapi itu satu baris lagi. Melainkan ia adalah baris kod, saya tidak akan menerimanya! Tetapi bolehkah?

---

9. Jawapannya ya, gunakan operator gabungan nol (??). Ini adalah satu-satunya cara yang saya temui. Walau bagaimanapun, untuk memperuntukkan objek baharu dan bukannya antara muka, saya perlu entah bagaimana membuat boxOptions mengembalikan null.

---

10. Nasib baik - atau mungkin dengan reka bentuk - IntelliSense masih menggesa sifat awal antara muka walaupun selepas menugaskannya semula kepada fungsi yang mengembalikan nol (baris 5).

Itu sahaja, saya mendapat persediaan seperti antara muka yang berfungsi dalam JavaScript tulen. Mungkin sepatutnya menggunakan TypeScript dari awal, tetapi saya berada di barat liar.

---

Persekitaran pengeluaran

Untuk pengisytiharan objek, saya menulis skrip binaan yang menggantikan interfaceName ?? dengan rentetan kosong sebelum menghantarnya kepada Terser, kerana pemampat tidak akan menilai nilai nol yang dikembalikan oleh gabungan.

Sebelum:

<code class="language-javascript">var interface = () => null;

var InterfaceOptions = () => ({
  name: '',
});
InterfaceOptions = interface;

// 使用示例
// =====

let opt = InterfaceOptions`` ?? {
  name: 'Bagel',
};

function createItem(options = InterfaceOptions``) {
  // ...
}

createItem(opt);</code>

Selepas

:

<code class="language-javascript">let opt = InterfaceOptions`` ?? {
  name: null,
};</code>

Jika anda tidak memadamkan bahagian antara muka, kod yang dimampatkan mungkin kelihatan seperti ini:

<code class="language-javascript">let opt = {
  name: null,
};</code>

---

Trivia

1. Gunakan var

untuk antara muka

Untuk antara muka, anda harus menggunakan var bukannya let atau const. Ini memastikan bahawa ia dialih keluar apabila menggunakan Terser untuk memampatkan di peringkat teratas.

<code class="language-javascript">let opt = (() => null)() ?? {
  name: null,
};</code>

<code class="language-javascript">var interface = () => null;

var InterfaceOptions = () => ({
  name: null,
});
InterfaceOptions = interface;</code>

Isu Terser #572: Alih keluar pembolehubah yang hanya ditetapkan tetapi tidak pernah dibaca.

---

2. Alternatif antara muka kosong

Jika fungsi antara muka global tidak tersedia, contohnya jika anda menulis perpustakaan untuk orang lain, anda boleh melakukan ini:

<code class="language-javascript">// terser 选项
{
  toplevel: true,
  compress: true,
  // ...
}</code>

---

3. Gunakan antara muka dalam antara muka

Jika anda masih belum memahaminya, begini caranya:

<code class="language-javascript">var interface = () => null;

var InterfaceOptions = () => ({
  name: '',
});
InterfaceOptions = interface;

// 使用示例
// =====

let opt = InterfaceOptions`` ?? {
  name: 'Bagel',
};

function createItem(options = InterfaceOptions``) {
  // ...
}

createItem(opt);</code>

Tidak buruk, bukan?

---

4. Adakah ia berfungsi dengan tatasusunan?

Ya, tetapi anda perlu mencipta antara muka yang berasingan untuk tatasusunan agar IntelliSense berfungsi dengan baik. Saya akan mengatakan ia agak mengelirukan.

Contoh 1:

<code class="language-javascript">let opt = InterfaceOptions`` ?? {
  name: null,
};</code>

Tetapi ia mempunyai faedah. Sekarang anda tahu apa yang perlu ditambah pada tatasusunan!

Contoh 2:

<code class="language-javascript">let opt = {
  name: null,
};</code>

---

5. Bolehkah ia berfungsi secara rekursif?

Macam ini? Tidak, analisis kod terputus untuk objek khusus ini.

Tetapi anda boleh melakukan ini:

<code class="language-javascript">let opt = (() => null)() ?? {
  name: null,
};</code>

Semua imej telah dipelihara dan menggunakan format yang sama seperti teks asal. Memandangkan URL imej tidak boleh diproses secara langsung, saya mengekalkan laluan /uploads/... dalam teks asal. Sila pastikan laluan ini betul untuk persekitaran anda.

Atas ialah kandungan terperinci Antara muka dalam JavaScript Vanila dengan Kod VS IntelliSense. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!