如何重新定義 React class 道具的類型

Question

我正在使用來自react-native-elements的Avatar ，並且 ImageComponent 道具的類型為 React.ComponentClass （IntelliSense 報告類型React.ComponentClass<{}, any> ）

當使用功能組件（帶有道具鍵）時，我在 ImageComponent 下得到紅色曲線：

  <Avatar
    rounded
    size={c.styles.avatarSize}
    containerStyle={{ margin: c.styles.marginLRTB / 2 }}
    placeholderStyle={{ backgroundColor: colors.background }}
    ImageComponent={() => AvatarImage(key)}
  />

Type '() => JSX.Element' is not assignable to type 'ComponentClass<{}, any>'.ts(2769)

頭像圖片：

  const AvatarImage = (key: string) => (
    <FastImage
      style={{ width: '100%', height: '100%' }}
      source={sourcesState[key].category === 'In-app' ? avatars[key as QuotesListKeys] : { uri: sourcesState[key].imageUrl }}
    />
  );

如何修復此 typescript 錯誤？

我試圖定義一個擴展 Avatar/AvatarProps 的新類/接口：

  type MyAvatarProps = Omit<AvatarProps, 'ImageComponent'> & { ImageComponent: FC<{ key: string }> };

  class MyAvatar extends Avatar<MyAvatarProps> {}

我收到 typescript 錯誤Type 'Avatar' is not generic.ts(2315)

當它不是通用的時，如何使用 MyAvatarProps 擴展 Avatar？

還是有其他/更好的方法來處理這個？

更新：

請看下面我的回答

Answer 1

我用一個簡單的 TS cast 解決了這個問題：

ImageComponent={((() => AvatarImage(key)) as unknown) as ComponentClass<{}, any>}