Typescript 拒绝函数中在属性中具有特定类型的参数

我有一个预先准备好的组件，用于接收名为type的参数，该参数可以是四个选项之一：email、mobileNumber、cep、password”。如果属性类型值为密码则不应分析属性图标和onpress图标。我已按如下方式键入此道具：

type TextInputT = {
  type: 'email' | 'mobileNumber' | 'cep' | 'password';
  name: string;
  label: string;
  onPressIcon: () => void;
  icon: string;
};

如果文本输入类型为密码，如何使道具图标和图标无效

我已经试过了

type TextInput = {
  type: 'password';
  name: string;
  label: string;
};

type CustomTextInput = {
  type: 'email' | 'mobileNumber' | 'cep';
  name: string;
  label: string;
  onPressIcon: () => void;
  icon: string;
};

export type TextInputT = TextInput | CustomTextInput;

但是在组件道具中，类型asignment抛出如下错误

EDIT1:My TextInput.tsx

const TextInput: React.FC<TextInputT> = ({
  type,
  name,
  label,
  onPressIcon,
  icon,
}) => {
  const inputValueRef = React.useRef(null);

  const [isFocused, setIsFocused] = React.useState<boolean>(false);
  const [valueShown, setValueShown] = React.useState<boolean>(false);

  const [field, meta, helpers] = useField(name);

  const hasError: boolean = meta.touched && typeof meta.error !== 'undefined';
  const error: string = meta.touched && meta.error;

  return (
    <Container>
      <Content
        active={isFocused}
        error={hasError}
        disabled={false}
        onPress={() => inputValueRef?.current?.focus()}
        activeOpacity={1}>
        {(isFocused || meta.touched) && (
          <Label active={isFocused} error={hasError} disabled={false}>
            {label}
          </Label>
        )}
        <InputBox>
          <InputValue
            ref={inputValueRef}
            secureTextEntry={type === 'password' && !valueShown}
            onFocus={() => setIsFocused(true)}
            placeholder={!isFocused ? label : ''}
            value={getFormattedValue({
              value: field.value,
              mask: type,
            })}
            onChangeText={field.onChange(name)}
            onBlur={() => [setIsFocused(false), helpers.setTouched(true)]}
          />
          {type === 'password' && (
            <IconBox onPress={() => setValueShown(!valueShown)}>
              <IconDynamic
                name={`${valueShown ? 'EyeClosed' : 'Eye'}`}
                width={24}
                height={24}
                fill={colors.C.default}
              />
            </IconBox>
          )}
          {icon && onPressIcon && (
            <IconBox onPress={onPressIcon}>
              <IconDynamic
                name={icon}
                width={24}
                height={24}
                fill={colors.C.default}
              />
            </IconBox>
          )}
        </InputBox>
      </Content>
      {hasError && (
        <ErrorBox>
          <TextError>{error}</TextError>
        </ErrorBox>
      )}
    </Container>
  );
};

export default TextInput;

const TextInput:React.FC=({
类型，
名称
标签，
onPressIcon，
偶像
}) => {
const inputValueRef=React.useRef（null）；
const[isFocused，setIsFocused]=React.useState（false）；
常量[ValueShowed，SetValueShowed]=React.useState（false）；
const[field，meta，helpers]=useField（名称）；
const hasrerror:boolean=meta.toucted&&typeof meta.error！=“未定义”；
常量错误：string=meta.toucted&&meta.error；
返回(
inputValueRef？.current？.focus（）}
activeOpacity={1}>
{（聚焦| |元触摸）&(
{label}
)}
setIsFocused（真）}
占位符={！isFocused？标签：“”
value={getFormattedValue({
value:field.value，
掩码：类型，
})}
onChangeText={field.onChange（名称）}
onBlur={（）=>[setIsFocused（false），helpers.settouch（true）]]
/>
{type==='password'&&(
SetValueShowed（！ValueShowed）}>
)}
{icon&&on按icon&&(
)}
{hasrerror&&(
{错误}
)}
);
};
导出默认文本输入；

TS更安全的选择是，在您检查

类型

属性之前，不允许使用

onPressIcon

type TextInput={
键入：“密码”；
名称：字符串；
标签：字符串；
};
类型CustomTextInput={
键入：“email”|“mobileNumber”|“cep”；
名称：字符串；
标签：字符串；
按图标：（）=>无效；
图标：字符串；
};
导出类型Union=TextInput | CustomTextInput；
常量组件=（属性：联合）=>{
如果（属性类型=='password'）{
const x=prop.onpress图标//错误
}
如果（属性类型==='email'）{
const x=prop.on按图标//确定
}
}

要更好地理解它，请参见下一个示例：

type TextInput={
键入：“密码”；
名称：字符串；
标签：字符串；
};
类型CustomTextInput={
键入：“email”|“mobileNumber”|“cep”；
名称：字符串；
标签：字符串；
按图标：（）=>无效；
图标：字符串；
};
导出类型Union=TextInput | CustomTextInput；
type Keys=keyof Union/“type”|“name”|“label”<----仅限两种类型通用的属性

假设TS允许您在不检查

type

属性的情况下获取

onPressIcon

属性

---

它会打破整个联盟的概念。

也请考虑提供一个在独立IDE中使用时演示错误的方法。我的建议看起来是这样的，但如果没有用例示例，很难判断这是否有效，或者您是否会遇到其他问题。重复的例子可以帮助你更快地得到一个好的答案。祝你好运真棒，在这种情况下，现在是明确的联合概念，但我仍然不知道如果类型是密码，如何使icon和onPressIcon无效：（@MuriloMedeiros我不知道你的意思

无效
。你能提供一个例子吗？