Schnittstelle in Vanilla JavaScript mit VS Code IntelliSense

TL;DR;

Eine reine JavaScript-Schnittstellensimulation unter Verwendung der Codeanalysefunktion von VS Code IntelliSense kann als Fertigkeit bezeichnet werden. Durch die clevere Kombination von Objektfabrik und leerer Funktion werden schnittstellenähnliche Code-Eingabeaufforderungen und Typprüfungen implementiert und der Nullwert-Zusammenführungsoperator (??) wird zur Vereinfachung des Codes verwendet. In einer Produktionsumgebung müssen Build-Skripte verwendet werden, um unnötigen Schnittstellencode zu entfernen.

Das Folgende ist ein Beispiel für eine reine JavaScript-Schnittstelle, die auf der Codeanalyse in einem Code-Editor wie VS Code IntelliSense basiert und daher auch als Trick bezeichnet werden kann:

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

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

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

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

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

createItem(opt);</code>

Hier ist ein Beispiel für das Umbenennen von Eigenschaften in reinem JavaScript:

Sie erstellen eine Objektfabrik, die die Codeanalyse der Eigenschaft initialisiert und dann das Objekt durch eine Funktion ersetzt, die null zurückgibt. Dies ermöglicht einige Deklarationstricks mit dem Null-Koaleszenzoperator (??), um Ihren Code aufgeräumt zu halten.

Es funktioniert auch mit Arrays! Sehen Sie sich den Beispielcode im Abschnitt Trivia Nr. 4 unten an.

---

Entdeckungsprozess

1. Ich hoffe, VS Code IntelliSense fragt nach den Eigenschaften der Option createBox().

---

2. Die Verwendung der Standardparameter funktioniert, aber ich würde sie gerne an einer anderen Stelle platzieren, um die Übersichtlichkeit zu verringern.

---

3. Das Deklarieren einer Option außerhalb einer Funktion erzeugt einen Fehler, da ihr Wert von jedem geändert werden kann.

---

4. Es muss also eine Objektfabrik sein. In Zeile 5 verwende ich Backticks anstelle von Klammern, um zwischen „Schnittstelle“ und Funktionsaufruf zu unterscheiden. Eigentlich sollte ich für diesen Artikel einfach ein eindeutiges Namenspräfix für Variablennamen verwenden, wie InterfaceBoxOptions oder so ähnlich, ok!

---

5. Okay, das funktioniert, aber was ist, wenn ich die Optionen als eigene Variablen deklariere? Wie kann ich IntelliSense mitteilen, dass ein Objekt Eigenschaften einer Schnittstelle hat?

---

6. Wie Sie vielleicht wissen, übernimmt IntelliSense die Schnittstelleneigenschaft, wenn ich dem Objekt zuerst die Schnittstelle zuweise.

---

7. Zu meiner Überraschung funktioniert es auch nach der Neuzuweisung der Variablen mit einem neuen Objekt noch.

---

8. Aber das ist noch eine Zeile. Sofern es sich nicht um eine Codezeile handelt, werde ich sie nicht akzeptieren! Aber kann es?

---

9. Die Antwort lautet: Ja, verwenden Sie den Null-Koaleszenzoperator (??). Dies ist der einzige Weg, den ich gefunden habe. Um jedoch ein neues Objekt anstelle einer Schnittstelle zuzuweisen, muss ich irgendwie dafür sorgen, dass boxOptions null zurückgibt.

---

10. Glücklicherweise – oder vielleicht auch absichtlich – fragt IntelliSense immer noch nach den anfänglichen Eigenschaften der Schnittstelle, selbst nachdem sie einer Funktion zugewiesen wurden, die null zurückgibt (Zeile 5).

Das war's, ich habe ein funktionierendes, schnittstellenähnliches Setup in reinem JavaScript. Hätte wahrscheinlich von Anfang an TypeScript verwenden sollen, aber ich bin im Wilden Westen.

---

Produktionsumgebung

Für die Objektdeklaration habe ich ein Build-Skript geschrieben, das interfaceName ?? durch eine leere Zeichenfolge ersetzte, bevor es an Terser übergeben wurde, da der Kompressor den durch die Zusammenführung zurückgegebenen Nullwert nicht beurteilt.

Vorher:

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

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

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

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

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

createItem(opt);</code>

Nach

:

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

Wenn Sie den Schnittstellenteil nicht löschen, sieht der komprimierte Code möglicherweise so aus:

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

---

Trivia

1. Verwenden Sie var

für die Schnittstelle

Für Schnittstellen sollten Sie var anstelle von let oder const verwenden. Dadurch wird sichergestellt, dass es entfernt wird, wenn Terser zum Komprimieren auf der obersten Ebene verwendet wird.

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

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

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

Schnelleres Problem Nr. 572: Entfernen Sie Variablen, die nur zugewiesen, aber nie gelesen werden.

---

2. Leere Schnittstellenalternative

Wenn globale Schnittstellenfunktionen nicht verfügbar sind, beispielsweise wenn Sie eine Bibliothek für jemand anderen schreiben, können Sie Folgendes tun:

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

---

3. Verwenden Sie Schnittstellen innerhalb von Schnittstellen

Wenn Sie es noch nicht herausgefunden haben, erfahren Sie hier, wie es geht:

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

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

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

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

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

createItem(opt);</code>

Nicht schlecht, oder?

---

4. Funktioniert es mit Arrays?

Ja, aber Sie müssen eine separate Schnittstelle für das Array erstellen, damit IntelliSense ordnungsgemäß funktioniert. Ich würde sagen, es ist ziemlich verwirrend.

Beispiel 1:

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

Aber es hat Vorteile. Jetzt wissen Sie, was Sie dem Array hinzufügen müssen!

Beispiel 2:

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

---

5. Kann es rekursiv funktionieren?

So? Nein, die Codeanalyse bricht für dieses bestimmte Objekt ab.

Aber Sie können dies tun:

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

Alle Bilder wurden beibehalten und haben das gleiche Format wie der Originaltext. Da die Bild-URL nicht direkt verarbeitet werden kann, habe ich den Pfad /uploads/... im Originaltext beibehalten. Bitte stellen Sie sicher, dass diese Pfade für Ihre Umgebung korrekt sind.

Das obige ist der detaillierte Inhalt vonSchnittstelle in Vanilla JavaScript mit VS Code IntelliSense. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!