Existe-t-il un moyen d'utiliser ESLint pour forcer la saisie des objets déstructurants en ligne, plutôt que d'utiliser une définition de type distincte ?

Question

Je veux nous forcer à toujours taper les objets déstructurants en ligne au lieu de créer une définition de type distincte. Par exemple, pour les composants React, je souhaite forcer tout notre code à utiliser ce modèle :

const SomeComponent = ({ foo, bar }: { foo: string, bar: boolean }) => {
  return ...
}

au lieu de :

type Props = {
    foo: string, 
    bar: boolean,
};

const SomeComponent = ({ foo, bar }: Props} => {
  return ...
}

J'ai vérifié les règles ESLint et je n'ai rien trouvé de similaire, quelqu'un a-t-il des suggestions ?

Answer 1

Pour autant que je sache, il n'existe actuellement aucune règle de charpie qui applique ce mode.

Vous pouvez utiliser no-restricted-syntax pour appliquer les règles relatives aux peluches (Exemple), mais comme le suggèrent les commentaires sur votre message, ce n'est pas une bonne idée.

Il n'est pas possible de créer un sélecteur qui correspond uniquement aux « composants de fonction réactive » car les composants de fonction réactive ne sont que des fonctions. Ainsi (comme le montre mon exemple), cette approche simple créera beaucoup de bruit et de faux positifs dans votre base de code - ce qui est mauvais car cela crée du bruit pour votre équipe.

Vous pouvez créer des règles personnalisées via , mais vous ne pourrez jamais vraiment rendre ce nombre nul.

---

BTW - Ce style de codage n'est pas bon car il va à l'encontre des conventions de l'industrie. Il est très courant et populaire de définir un type distinct afin qu'il puisse être importé dans un consommateur et combiné avec d'autres types - par exemple lors de la création de composants d'ordre supérieur ou wrapper.

En définissant toujours le type en ligne, vous compliquez la tâche car vous n'avez pas d'autre choix que d'obtenir le type d'accessoire via Params<typeof MyComponent>[0] .