使用 Typescript generics 進行帶有 eslint props 驗證的 React 功能組件

Question

我想使用 Typescript 在 React 中創建一個功能組件，並且我已經根據此 Q&A進行了設置：

export interface CustomProps<T extends object> extends SomeOtherProps<T> {
  customProp?: number;
}

const CustomComponent: <T extends object>(props: CustomProps<T>) => JSX.Element = {
  customProp = 10,
  ...props
}) => {
  // etc
};

但是，這給了我一個eslint的錯誤，說這些道具沒有經過驗證：

道具驗證中缺少“customProp”

我可以嘗試通過在默認道具后添加CustomProps來使用泛型添加道具驗證：

export interface CustomProps<T extends object> extends SomeOtherProps<T> {
  customProp?: number;
}

const CustomComponent: <T extends object>(props: CustomProps<T>) => JSX.Element = {
  customProp = 10,
  ...props
}: CustomProps<any>) => {
  // etc
};

但這給了我一個“沒有明確any ”的警告。 如果我插入T ，它不會知道。 那么我該如何解決這個問題呢？

Answer 1

解決方案在於再次實例化類型，就像為組件聲明本身實例化它一樣：

export interface CustomProps<T extends object> extends SomeOtherProps<T> {
  customProp?: number;
}

const CustomComponent: <T extends object>(props: CustomProps<T>) => JSX.Element = <T extends object>({
  customProp = 10,
  ...props
}: CustomProps<T>) => {
  // etc
});

這樣，所有道具都將得到正確驗證。