Vanilla JavaScript 與 VS Code IntelliSense 的接口

TL;DR;

純JavaScript介面模擬，利用VS Code IntelliSense的程式碼分析功能，可稱為技巧。透過物件工廠和空函數巧妙結合，實現類似介面的程式碼提示和類型檢查，並利用空值合併運算子（??）簡化程式碼。生產環境中需使用建置腳本移除不必要的介面程式碼。

以下是一個純JavaScript介面的範例，它依賴VS Code IntelliSense之類的程式碼編輯器中的程式碼分析，所以也可以稱之為技巧：

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

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

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

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

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

createItem(opt);</code>

以下是純JavaScript中重新命名屬性的範例：

你建立了一個物件工廠，它會初始化屬性的程式碼分析，然後用一個傳回null的函數取代該物件。這使得可以使用空值合併運算子（??）進行一些聲明技巧，使你的程式碼保持整潔。

它也適用於陣列！請參閱下面瑣事 #4部分中的範例程式碼。

---

發現過程

1. 我希望VS Code IntelliSense能夠提示createBox()選項的屬性。

---

2. 使用預設參數有效，但我希望將其放在其他地方以減少混亂。

---

3. 在函數外部聲明選項會產生錯誤，因為任何人都可以修改其值。

---

4. 所以它必須是一個物件工廠。在第5行，我使用反引號而不是括號來區分「介面」和函數呼叫。實際上，為了這篇文章，我應該只為變數名稱使用一個唯一的名稱前綴，例如InterfaceBoxOptions之類的，好吧！

---

5. 好吧，這有效，但是如果我將選項聲明為它們自己的變數呢？我該如何告訴IntelliSense一個物件具有介面的屬性？

---

6. 你可能知道，如果我先將介面分配給對象，IntelliSense會假設介面屬性。

---

7. 令我驚訝的是，即使在用一個新物件重新賦值變數後，它仍然有效。

---

8. 但那多了一行。除非它是一行程式碼，否則我不會接受它！但是可以嗎？

---

9. 答案是肯定的，使用空值合併（??）運算子。這是我找到的唯一方法。但是，要分配新物件而不是接口，我需要以某種方式使boxOptions返回null。

---

10. 幸運的是——或者可能是故意設計的——即使在將其重新賦值給返回null的函數（第5行）後，IntelliSense仍然會提示介面的初始屬性。

就這樣，我在純JavaScript中得到了一個有效的類似介面的設定。可能應該從一開始就使用TypeScript，但我屬於蠻荒西部。

---

生產環境

對於物件聲明，我編寫了一個建置腳本，在將其傳遞給Terser之前替換interfaceName ??為空字串，因為壓縮器不會判斷合併傳回的null值。

之前：

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

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

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

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

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

createItem(opt);</code>

之後：

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

如果你不刪除介面部分，壓縮後的程式碼可能如下圖：

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

---

瑣事

1. 為介面使用var

對於接口，你應該使用var而不是let或const。這確保了在使用Terser在頂層壓縮時將其刪除。

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

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

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

Terser問題#572：刪除僅被賦值但從未讀取的變數。

---

2. 空介面替代方案

如果全域介面函數不可用，例如，如果你正在為其他人編寫函式庫，則可以這樣做：

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

---

3. 在介面中使用介面

如果你還沒弄清楚，以下是如何操作：

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

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

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

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

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

createItem(opt);</code>

不錯，對吧？

---

4. 它適用於陣列嗎？

是的，但是你需要為陣列建立一個單獨的介面才能讓IntelliSense正常運作。我會說這相當混亂。

範例1：

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

但它確實有好處。現在你知道要加到陣列中的內容了！

範例2：

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

---

5. 它可以遞歸地工作嗎？

像這樣？不，程式碼分析會為此特定物件中斷。

但是你可以這樣做：

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

所有圖片都已保留，並使用了與原文相同的格式。 由於無法直接處理圖片URL，我保留了原文中的/uploads/...路徑。 請確保這些路徑在你的環境中是正確的。

以上是Vanilla JavaScript 與 VS Code IntelliSense 的接口的詳細內容。更多資訊請關注PHP中文網其他相關文章！