Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

TypeScript & React Native: Using Pick to avoid bloating my code

$
0
0

I have the following interface defined for use in a React Native component:

export interface ValidatedInputProps {    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters',    contentType: Pick<TextInputIOSProps, 'textContentType'>,    isSecure?: boolean,    keyboard?: KeyboardTypeOptions,    label: string,}

And here's how I'm using it:

export const ValidatedInput = ({    autoCapitalize = 'none',    contentType,    isSecure = false,    keyboard = 'default',    label,}: ValidatedInputProps) => {    return (<TextInput            textContentType={contentType} <-- Error is flagged here            ...other props        />    );};

This gives me the following error popup in VSCode:

Type 'Pick<TextInputIOSProps, "textContentType">' is not assignable to type '"none" | "name" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | ... 17 more ... | undefined'.  Type 'Pick<TextInputIOSProps, "textContentType">' is not assignable to type '"oneTimeCode"'.ts(2322)index.d.ts(1250, 5): The expected type comes from property 'textContentType' which is declared here on type 'IntrinsicAttributes & Pick<TextInputProps, "textContentType" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | ... 114 more ... | "dense"> & { ...; } & { ...; }'(JSX attribute) textContentType?: "none" | "name" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | ... 17 more ... | undefined

I'm obviously completely misunderstanding the point of the Pick<T, K> type, but everything that I've read on the subject over the past two hours seems to imply that my usage is correct. So what am I missing?

I guess I could define my contentType prop with the correct union (as I've done with autoCapitalize), but who would want to bloat their code with that excessively-long string of characters, when it's already been defined elsewhere?! Can't I just import that property/type and be done with it??


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>