typescript - Varför kan jag inte använda StyleProp<ViewStyle> på min egen komponent

Jag använder TypeScript/Vscode för att koda min React Native-app. Jag vill ha kodkomplettering på mina egna komponenter för stil precis som React Natives egen View-komponent gör.

style-egenskapen på View definieras så här:

style?: StyleProp<ViewStyle>;

När jag provar det på min egen komponents egenskaper:

type MyViewProps = { style?:StyleProp<ViewStyle> }
class MyView extends Component<MyViewProps>{ ... }

Och försök att använda det på samma sätt som jag använder style på en vanlig vy:

<MyView style={{top:-20}}/>

Jag får följande fel:

Type '{ style: { top: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<MyViewProps, never>, any, any>> & Readonly<Pick<MyViewProps, never>> & Readonly<...>'.
  Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<MyViewProps, never>, any, any>> & Readonly<Pick<MyViewProps, never>> & Readonly<...>'.ts(2322)

Vad gör jag för fel?

(Bara för tydlighetens skull: stilen funkar perfekt vid körning, det är bara kodkomplettering/IntelliSense som jag inte kan få att fungera)

Svar #1

Om du inte bryr dig om animerade vyer.

type MyViewProps = { style?: ViewStyle };

Och om du bryr dig om Animated.View.

type MaybeAnimated<T> = T | Animated.Value;
type AnimatedScalar = string | number;

type AnimatedStyle<T> = {
  [Key in keyof T]: T[Key] extends AnimatedScalar
    ? MaybeAnimated<T[Key]>
    : T[Key] extends Array<infer U>
    ? Array<AnimatedStyle<U>>
    : AnimatedStyle<T[Key]>;
};

Använd det så här.

type MyViewProps = { style?: AnimatedStyle<ViewStyle> };

Gå och rösta upp här också eftersom det är här jag hittade 99% av det här svaret. 🤠

Relaterade artiklar