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中文网其他相关文章！