Gibt es eine Möglichkeit, ESLint zu verwenden, um zu erzwingen, dass destrukturierende Objekte inline eingegeben werden, anstatt eine separate Typdefinition zu verwenden?

Question

Ich möchte uns zwingen, destrukturierende Objekte immer inline einzugeben, anstatt eine separate Typdefinition zu erstellen. Beispielsweise möchte ich für React-Komponenten erzwingen, dass unser gesamter Code dieses Muster verwendet:

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

statt:

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

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

Ich habe die ESLint-Regeln überprüft und nichts Ähnliches gefunden. Hat jemand Vorschläge?

Answer 1

据我所知 - 目前没有强制执行此模式的现有 lint 规则。

您可以使用 no-restricted-syntax 强制执行lint 规则 (示例），但是正如您帖子中的评论所暗示的那样 - 这不是一个好主意。

不可能创建一个仅匹配“反应函数组件”的选择器，因为反应函数组件只是函数。因此（如我的示例所示）这种简单的方法会在您的代码库中产生大量噪音和误报 - 这很糟糕，因为它会给您的团队带来噪音。

您可以通过创建自定义规则，但是你永远无法真正让这个数字为零。

---

顺便说一句 - 这种代码风格并不好，因为它违反了行业惯例。定义一个单独的类型是非常常见和流行的，这样它就可以被导入到消费者中并与其他类型组合在一起 - 例如在创建高阶或包装组件时。

通过始终定义内联类型，您会变得更加困难，因为您别无选择，只能通过 Params<typeof MyComponent>[0] 来获取道具类型。