TL;DR;

純JavaScript接口模擬，利用VS Code IntelliSense的代碼分析功能，可稱之為技巧。通過(guò)對(duì)象工廠和空函數(shù)巧妙結(jié)合，實(shí)現(xiàn)類似接口的代碼提示和類型檢查，并利用空值合并運(yùn)算符（??）簡(jiǎn)化代碼。生產(chǎn)環(huán)境中需使用構(gòu)建腳本移除不必要的接口代碼。

以下是一個(gè)純JavaScript接口的示例，它依賴于VS Code IntelliSense之類的代碼編輯器中的代碼分析，所以也可以稱之為技巧：

var interface = () => null;

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

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

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

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

createItem(opt);

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

你創(chuàng)建了一個(gè)對(duì)象工廠，它會(huì)初始化屬性的代碼分析，然后用一個(gè)返回null的函數(shù)替換該對(duì)象。這使得可以使用空值合并運(yùn)算符（??）進(jìn)行一些聲明技巧，使你的代碼保持整潔。

它也適用于數(shù)組！請(qǐng)參見(jiàn)下面瑣事 #4部分中的示例代碼。

發(fā)現(xiàn)過(guò)程

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

2. 使用默認(rèn)參數(shù)有效，但我希望將其放在其他地方以減少混亂。

3. 在函數(shù)外部聲明選項(xiàng)會(huì)產(chǎn)生錯(cuò)誤，因?yàn)槿魏稳硕伎梢孕薷钠渲怠?/li>

4. 所以它必須是一個(gè)對(duì)象工廠。在第5行，我使用反引號(hào)而不是括號(hào)來(lái)區(qū)分“接口”和函數(shù)調(diào)用。實(shí)際上，為了這篇文章，我應(yīng)該只為變量名使用一個(gè)唯一的名稱前綴，例如InterfaceBoxOptions之類的，好吧！

5. 好吧，這有效，但是如果我將選項(xiàng)聲明為它們自己的變量呢？我該如何告訴IntelliSense一個(gè)對(duì)象具有接口的屬性？

6. 你可能知道，如果我先將接口分配給對(duì)象，IntelliSense會(huì)假設(shè)接口屬性。

7. 令我驚訝的是，即使在用一個(gè)新對(duì)象重新賦值變量后，它仍然有效。

8. 但那多了一行。除非它是一行代碼，否則我不會(huì)接受它！但是可以嗎？

9. 答案是肯定的，使用空值合并（??）運(yùn)算符。這是我找到的唯一方法。但是，要分配新對(duì)象而不是接口，我需要以某種方式使boxOptions返回null。

10. 幸運(yùn)的是——或者可能是故意設(shè)計(jì)的——即使在將其重新賦值給返回null的函數(shù)（第5行）后，IntelliSense仍然會(huì)提示接口的初始屬性。

就這樣，我在純JavaScript中得到了一個(gè)有效的類似接口的設(shè)置?？赡軕?yīng)該從一開(kāi)始就使用TypeScript，但我屬于蠻荒西部。

生產(chǎn)環(huán)境

對(duì)于對(duì)象聲明，我編寫(xiě)了一個(gè)構(gòu)建腳本，在將其傳遞給Terser之前替換interfaceName ??為空字符串，因?yàn)閴嚎s器不會(huì)判斷合并返回的null值。

之前：

var interface = () => null;

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

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

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

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

createItem(opt);

之后：

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

如果你不刪除接口部分，壓縮后的代碼可能如下所示：

let opt = {
  name: null,
};

瑣事

1. 為接口使用var

對(duì)于接口，你應(yīng)該使用var而不是let或const。這確保了在使用Terser在頂層壓縮時(shí)將其刪除。

let opt = (() => null)() ?? {
  name: null,
};

var interface = () => null;

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

Terser問(wèn)題#572：刪除僅被賦值但從未讀取的變量。

2. 空接口替代方案

如果全局接口函數(shù)不可用，例如，如果你正在為其他人編寫(xiě)庫(kù)，則可以這樣做：

// terser 選項(xiàng)
{
  toplevel: true,
  compress: true,
  // ...
}

3. 在接口中使用接口

如果你還沒(méi)弄明白，以下是如何操作：

var interface = () => null;

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

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

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

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

createItem(opt);

不錯(cuò)，對(duì)吧？

4. 它適用于數(shù)組嗎？

是的，但是你需要為數(shù)組創(chuàng)建一個(gè)單獨(dú)的接口才能使IntelliSense正常工作。我會(huì)說(shuō)這相當(dāng)混亂。

示例1：

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

但它確實(shí)有好處?，F(xiàn)在你知道要添加到數(shù)組中的內(nèi)容了！

示例2：

let opt = {
  name: null,
};

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

像這樣？不，代碼分析會(huì)為此特定對(duì)象中斷。

但是你可以這樣做：

let opt = (() => null)() ?? {
  name: null,
};

所有圖片都已保留，并使用了與原文相同的格式。 由于無(wú)法直接處理圖片URL，我保留了原文中的/uploads/...路徑。 請(qǐng)確保這些路徑在你的環(huán)境中是正確的。

以上是Vanilla JavaScript 與 VS Code IntelliSense 的接口的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！