拒绝在 prop 中具有特定类型的函数中的参数

如何解决拒绝在 prop 中具有特定类型的函数中的参数

我有一个组件，它准备好接收一个名为 type 的参数，它可以是电子邮件、手机号码、cep、密码四个选项之一。如果属性类型值 是密码，则不应解析属性图标和 onPressIcon。我已经输入了这个道具如下：

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

如果 textinput 的类型是密码，如何使 icon 和 onPressIcon 道具无效？

我已经试过了

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;

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

EDIT1：我的 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;

解决方法

TS 更安全的选择是在检查 onPressIcon 属性之前禁止使用 type。

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

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

export type Union = TextInput | CustomTextInput;

const comp=(prop:Union)=>{
    if(prop.type==='password'){
        const x = prop.onPressIcon // error
    }
    if(prop.type==='email'){
        const x = prop.onPressIcon // ok
    }
}

为了更好地理解它，请看下一个例子：

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

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

export type Union = TextInput | CustomTextInput;

type Keys = keyof Union // "type" | "name" | "label" < ------ only properties which are common for both type

想象一下，TS 允许您在不检查 onPressIcon 属性的情况下获取 type 属性。

这将打破工会的整个想法。