有没有办法使用 ESLint 强制将解构对象内联键入，而不是使用单独的类型定义？

Question

我想强制我们始终内联键入解构对象，而不是创建单独的类型定义。例如，对于 React 组件，我想强制我们的所有代码都使用此模式：

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

而不是：

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

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

我查看了 ESLint 规则，没有找到类似的内容，有人有建议吗？

Answer 1

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

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

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

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

---

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

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