How do I merge the types
type TheseTypes = typeof TouchableNativeFeedback & typeof TouchableWithoutFeedback & typeof TouchableHighlight & typeof TouchableOpacity;const Button: React.FC<CustomProps> = (props) => { const ButtonInstance: TheseTypes = props.highlight ? TouchableHighlight : props.nativeFeedback ? TouchableNativeFeedback : props.withoutFeedback ? TouchableWithoutFeedback : TouchableOpacity; return (<ButtonInstance {...props} activeOpacity={props.opacity}> {props.children}</ButtonInstance> );};
I already tried using both union, intersection, Partial<T>
, a custom type Subtract<T, K> = Pick<T, Exclude<keyof T, keyof K>>
Case 0 - Props incomplete.
activeOpacity
from Touchable Highlight/Opacity is not recognized.
Result on type inference (without assigning a type to RenderButton)
(JSX attribute) activeOpacity: numberNo overload matches this call. Overload 1 of 2, '(props: Readonly<TouchableNativeFeedbackProps>): TouchableWithoutFeedback | TouchableNativeFeedback', gave the following error. Type '{ children: ReactNode; disabled: any; activeOpacity: number; style: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableWithoutFeedback | TouchableNativeFeedback> & Readonly<...> & Readonly<...> & Readonly<...> & Readonly<...>'. Property 'activeOpacity' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableWithoutFeedback | TouchableNativeFeedback> & Readonly<...> & Readonly<...> & Readonly<...> & Readonly<...>'. Overload 2 of 2, '(props: TouchableNativeFeedbackProps, context?: any): TouchableWithoutFeedback | TouchableNativeFeedback', gave the following error. Type '{ children: ReactNode; disabled: any; activeOpacity: number; style: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableWithoutFeedback | TouchableNativeFeedback> & Readonly<...> & Readonly<...> & Readonly<...> & Readonly<...>'. Property 'activeOpacity' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableWithoutFeedback | TouchableNativeFeedback> & Readonly<...> & Readonly<...> & Readonly<...> & Readonly<...>'.ts(2769)
Result on |
Same as above.
Case 1 - Props OK, Error line 5
On declaring const RenderButton
, I receive these errors below, but VSCode Intellisense recommends the right props.
Result on &
Type 'TouchableWithoutFeedback' is missing the following properties from type 'TouchableHighlight': measure, measureInWindow, measureLayout, setNativeProps, and 2 more.ts(2322)
Result on Partial<>&
Types of property 'prototype' are incompatible. Type 'TouchableWithoutFeedback' is missing the following properties from type 'TouchableHighlight': measure, measureInWindow, measureLayout, setNativeProps, and 2 more.ts(2322)
Result on Partial<>|
Type 'typeof TouchableNativeFeedback' is not assignable to type 'Partial<typeof TouchableWithoutFeedback> | Partial<typeof TouchableHighlight> | Partial<TouchableNativeFeedback> | Partial<...>'. Type 'typeof TouchableNativeFeedback' is not assignable to type 'Partial<typeof TouchableOpacity>'. Types of property 'prototype' are incompatible. Type 'TouchableNativeFeedback' is missing the following properties from type 'TouchableOpacity': setOpacityTo, setTimeout, clearTimeout, setInterval, and 11 more.ts(2322)