TypeScript 和 React Native：使用 Pick<T, K> 避免我的代码臃肿

Question

我有以下接口和使用它的 React Native 组件：

import { KeyboardTypeOptions, TextInputProps } from 'react-native';
import { TextInput } from 'react-native-paper';

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

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

这让我在 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

我显然完全误解了Pick<T, K> 类型的观点，但我在过去两个小时内阅读的关于该主题的所有内容似乎都暗示我的用法是正确的。那我错过了什么？

我想我可以用正确的 union 定义我的 contentType 属性（就像我对 autoCapitalize 所做的那样），但是谁愿意用过长的字符串来膨胀他们的代码，当它已经存在时在别处定义？！我不能只导入该属性/类型并完成它吗？？

Answer 1

Pick<Type, Keys>

通过从Type 中选择属性集Keys（字符串文字或字符串文字的并集）来构造一个Object 类型。

所以它不是给你allowed values for textContentType的联合，而是一个带有textContentType的单个键的Object类型。

相反，您可以使用您需要的属性扩展 TextInputProps 的 Picked 版本，然后将您自己的属性添加到接口中。

import { KeyboardTypeOptions, TextInputProps } from 'react-native';

interface ValidatedInputProps extends Pick<TextInputProps, 'textContentType' | 'autoCapitalize'>  {
  isSecure?: boolean,
  keyboard?: KeyboardTypeOptions,
  label: string,
}

---

或者，您可以通过访问导入的 Object 类型的每个已知属性来创建本地类型。

import { KeyboardTypeOptions, TextInputProps } from 'react-native';

type myTextContentType = TextInputProps['textContentType']
type myAutoCapitalize = TextInputProps['autoCapitalize']

interface ValidatedInputProps {
  textContentType?: myTextContentType,
  autoCapitalize?: myAutoCapitalize,
  isSecure?: boolean,
  keyboard?: KeyboardTypeOptions,
  label: string,
}