I have created one reusable button by using Styled component and Typescript. I am using Accessibility. In my project there are multiple buttons where I am using Accessibility. I made one global Accessibility component. I Accessibility logic works fine on my app. but I am having Typescript issue on my button component:No overload matches this call. I don't know did I make any mistake on my Accessibility component. This is issue looks like. Here is detail Typescript error:
No overload matches this call. Overload 1 of 2, '(props:Omit<Omit<TouchableOpacityProps & RefAttributes,never> & Partial<Pick<TouchableOpacityProps & RefAttributes<...>,never>>, "theme"> & { ...; } & { ...; } & { ...; }):ReactElement<...>', gave the following error.Type '{ children: Element; accessibilityLabel: string | undefined; accessibilityHint: string | undefined; accessibilityRole:AccessibilityRole | undefined; accessibilityState: AccessibilityState| undefined; testID: string | undefined; onPress: () => void; }' isnot assignable to type 'Omit<Omit<TouchableOpacityProps &RefAttributes, never> &Partial<Pick<TouchableOpacityProps & RefAttributes<...>, never>>,"theme">'.Types of property 'testID' are incompatible.Type 'string | undefined' is not assignable to type 'string'.Type 'undefined' is not assignable to type 'string'. Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeofTouchableOpacity, DefaultTheme, {}, never, typeof TouchableOpacity>):ReactElement<...>', gave the following error.Type '{ children: Element; accessibilityLabel: string | undefined; accessibilityHint: string | undefined; accessibilityRole:AccessibilityRole | undefined; accessibilityState: AccessibilityState| undefined; testID: string | undefined; onPress: () => void; }' isnot assignable to type 'Omit<Omit<TouchableOpacityProps &RefAttributes, never> &Partial<Pick<TouchableOpacityProps & RefAttributes<...>, never>>,"theme">'.Types of property 'testID' are incompatible.Type 'string | undefined' is not assignable to type 'string'.Type 'undefined' is not assignable to type 'string'.ts(2769)
My Accessibility component
import { Platform, AccessibilityRole, AccessibilityState } from 'react-native';type A11y = { label?: string; role?: AccessibilityRole; hint?: string; state?: AccessibilityState; testID?: string;};const a11y = ({ role, hint, state, testID }: A11y) => { const accessibilityLabel = testID; const accessibilityHint = Platform.select<string | undefined>({ ios: hint }); return { accessibilityLabel, accessibilityHint, accessibilityRole: role, accessibilityState: state, testID, };};export default a11y;This My button where I am getting typescript's overload error
import React from 'react';import styled from 'styled-components/native';import a11y from './a11y';type Props = { onPress: () => void;};const Button = styled.TouchableOpacity` padding-vertical: 16px; padding-horizontal: 24px;`;const MainButton = ({ onPress }: Props) => { return (<Button // here it throws the Typescript error. onPress={onPress} {...a11y({ role: 'button', label: 'choose', hint: 'choose the dress', })} /> );};export default MainButton;