有沒有辦法使用 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] 來取得道具類型。