Interface en JavaScript Vanilla avec VS Code IntelliSense

TL;DR;

La simulation d'interface JavaScript pure, utilisant la fonction d'analyse de code de VS Code IntelliSense, peut être qualifiée de compétence. Grâce à la combinaison intelligente de la fabrique d'objets et de la fonction vide, des invites de code de type interface et une vérification de type sont implémentées, et l'opérateur de fusion de valeurs nulles (??) est utilisé pour simplifier le code. Dans un environnement de production, des scripts de build doivent être utilisés pour supprimer le code d'interface inutile.

Ce qui suit est un exemple d'interface JavaScript pure qui s'appuie sur l'analyse de code dans un éditeur de code comme VS Code IntelliSense, on peut donc également l'appeler une astuce :

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

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

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

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

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

createItem(opt);</code>

Voici un exemple de renommage de propriétés en JavaScript pur :

Vous créez une fabrique d'objets qui initialise l'analyse du code de la propriété, puis remplace l'objet par une fonction qui renvoie null. Cela permet quelques astuces de déclaration en utilisant l'opérateur de fusion nul (??) pour garder votre code bien rangé.

Cela fonctionne aussi avec les tableaux ! Consultez l’exemple de code dans la section Trivia #4 ci-dessous.

---

Processus de découverte

1. J'espère que VS Code IntelliSense vous demandera les propriétés de l'option createBox().

---

2. L'utilisation des paramètres par défaut fonctionne, mais j'aimerais les placer ailleurs pour réduire l'encombrement.

---

3. Déclarer une option en dehors d'une fonction génère une erreur car sa valeur peut être modifiée par n'importe qui.

---

4. Ce doit donc être une usine à objets. À la ligne 5, j'utilise des guillemets au lieu de parenthèses pour faire la différence entre "interface" et appel de fonction. En fait, pour le bien de cet article, je devrais simplement utiliser un préfixe de nom unique pour les noms de variables, comme InterfaceBoxOptions ou quelque chose comme ça, ok !

---

5. D'accord, cela fonctionne, mais que se passe-t-il si je déclare les options comme leurs propres variables ? Comment indiquer à IntelliSense qu'un objet possède les propriétés d'une interface ?

---

6. Comme vous le savez peut-être, si j'attribue d'abord l'interface à l'objet, IntelliSense assume la propriété d'interface.

---

7. À ma grande surprise, cela fonctionne toujours même après avoir réaffecté la variable avec un nouvel objet.

---

8. Mais c’est une ligne de plus. À moins que ce ne soit une ligne de code, je ne l'accepterai pas ! Mais est-ce possible ?

---

9. La réponse est oui, utilisez l'opérateur de fusion nul (??). C'est le seul moyen que j'ai trouvé. Cependant, pour allouer un nouvel objet au lieu d'une interface, je dois d'une manière ou d'une autre faire en sorte que boxOptions renvoie null.

---

10. Heureusement - ou peut-être par conception - IntelliSense demande toujours les propriétés initiales de l'interface même après les avoir réaffectées à une fonction qui renvoie null (ligne 5).

Ça y est, j'ai une configuration de type interface fonctionnelle en JavaScript pur. J'aurais probablement dû utiliser TypeScript depuis le début, mais je suis dans le Far West.

---

Environnement de production

Pour la déclaration d'objet, j'ai écrit un script de construction qui a remplacé interfaceName ?? par une chaîne vide avant de la transmettre à Terser, car le compresseur ne jugera pas la valeur nulle renvoyée par la fusion.

Avant :

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

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

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

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

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

createItem(opt);</code>

Après

 :

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

Si vous ne supprimez pas la partie interface, le code compressé peut ressembler à ceci :

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

---

Anecdote

1. Utilisez var

pour l'interface

Pour les interfaces, vous devez utiliser var au lieu de let ou const. Cela garantit qu'il est supprimé lors de l'utilisation de Terser pour compresser au niveau supérieur.

<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 numéro 572 : Supprimez les variables qui sont uniquement affectées mais jamais lues.

---

2. Alternative à l'interface vide

Si les fonctions d'interface globale ne sont pas disponibles, par exemple si vous écrivez une bibliothèque pour quelqu'un d'autre, vous pouvez faire ceci :

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

---

3. Utiliser des interfaces dans les interfaces

Si vous ne l'avez pas encore compris, voici comment procéder :

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

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

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

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

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

createItem(opt);</code>

Pas mal, non ?

---

4. Est-ce que ça marche avec les tableaux ?

Oui, mais vous devez créer une interface distincte pour que la baie fonctionne correctement. Je dirais que c'est assez déroutant.

Exemple 1 :

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

Mais cela présente des avantages. Vous savez maintenant quoi ajouter au tableau !

Exemple 2 :

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

---

5. Est-ce que ça peut fonctionner de manière récursive ?

Comme ça ? Non, l'analyse du code s'interrompt pour cet objet spécifique.

Mais vous pouvez faire ceci :

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

Toutes les images ont été conservées et ont utilisé le même format que le texte original. Comme l'URL de l'image ne peut pas être traitée directement, j'ai conservé le chemin /uploads/... dans le texte original. Veuillez vous assurer que ces chemins sont corrects pour votre environnement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!