你如何从 React 组件中提取特定的 TypeScript prop 类型？

Question

I'm creating my own Image component and want to reuse React's image component ImageSourcePropType for my source/previewSource props.

Here's the component.

import React from 'react';
import { Image, ImageBackground } from 'react-native';

type ImageSourceProp = React.ComponentProps<typeof Image>.ImageSourcePropType; // HOW?

interface CachedImageProps {
  source: ImageSourceProp;
  previewSource: ImageSourceProp;
}

const CachedImage: React.FC<CachedImageProps> = ({ source, previewSource, ...remainingProps }) => {
  // console.log('TRIGGERED CachedImage')

  return (
    <ImageBackground source={previewSource|| source} fadeDuration={0} {...remainingProps}>
      <Image source={cachedSource} fadeDuration={0} {...remainingProps} />
    </ImageBackground>
  );
};

export default CachedImage;

How do I get the ImageSourcePropType ?

Answer 1

OK, figured this one out. There are two ways to do it.

1. Access via name.

    type ImageSourcePropType = React.ComponentProps<typeof Image>['source'];

2. Access via import .

    import { ImageSourcePropType } from 'react-native';

   _{(hat tip @kschaer)}