To HOC, mam następujące błędy:

Wpisz „Pick,„ dzieci ”| Wyklucz> & {...; } 'nie można przypisać do typu' IntrinsicAttributes & P & {children ?: ReactNode; } '

Wpisz „Pick,„ dzieci ”| Wyklucz> & {...; } ”nie można przypisać do typu„ P ”.

„Pick,„ dzieci ”| Wyklucz> & {...; } ”można przypisać do ograniczenia typu„ P ”, ale instancję„ P ”można utworzyć z innym podtypem ograniczenia„ TextInputProps ”.

Jak to naprawić?

import { View, ViewStyle, StyleProp, NativeSyntheticEvent, TextStyle, TextInputProps } from 'react-native';

type Props = {
  styleWrapper?: StyleProp<ViewStyle>;
  style?: StyleProp<TextStyle>;
  title?: string;
  value?: string;
  onFocus?: (e: NativeSyntheticEvent<any>) => void;
  onBlur?: (e: NativeSyntheticEvent<any>) => void;
  onChange?: (text: string) => void;
  onReset?: () => void;
  withReset?: boolean;
};

export const withInputWrapper = <P extends TextInputProps = TextInputProps>(
  InputComponent: React.ComponentType<P>
): React.FC<P & Props> => {
  return ({ styleWrapper, style, title, value, onFocus, onBlur, onChange, onReset, withReset = true, ...props }) => {
    const onFocusHandler = ...
    const onBlurHandler = ...

    const onChangeHandler = ...

    return (
      <View style={styleWrapper}>
        <View style={s.inputWrapper}>
          <InputComponent // <-- here
            {...props}
            onChange={onChangeHandler}
            value={value}
            style={style}
            onBlur={onBlurHandler}
            onFocus={onFocusHandler}
          />
        </View>
      </View>
    );
  };
};
8
Igor Zvyagin 18 marzec 2020, 10:51

2 odpowiedzi

Najlepsza odpowiedź

Muszę zacytować inną odpowiedź stackoverflow wyjaśniającą Twój problem: można utworzyć instancję z innym podtypem ograniczenia „obiekt”

Zasadniczo TS nie może wywnioskować, jakiego podtypu używasz i nie pozwala ci przypisać / przyjąć konkretnego typu bezpośrednio.

Oto stworzona przeze mnie piaskownica, która rozwiązuje podobny problem, nie używając generycznych (nie jest to natywna reakcja, ale nie powinna mieć znaczenia w tym przypadku): https://codesandbox.io/s/serverless-tdd-91zfq

type Props = {
  styleWrapper?: any;
  style?: any;
  title?: string;
  value?: string;
  onFocus?: (e: any) => void;
  onBlur?: (e: any) => void;
  onChange?: (text: string) => void;
  onReset?: () => void;
  withReset?: boolean;
} & React.InputHTMLAttributes<HTMLInputElement>;

export const withInputWrapper = (
  InputComponent: React.ComponentType<Props>
) => ({
...

Jeśli chcesz używać typów ogólnych, musisz rzucić ... rekwizyty na P: {...props as P} wewnątrz powrotu.

1
tudor.gergely 18 marzec 2020, 08:30

Jest to jeden z tych przypadków, w których osiągnięto limit tego, co TS może uzasadnić w odniesieniu do parametrów typu ogólnego z typami warunkowymi i mapowanymi. Chociaż props może wydawać się oczywiste P, nie jest to oczywiste dla kompilatora. Kompilator użyje Omit do wpisania props, który używa mapowanych i warunkowych typów, aby usunąć niektóre klucze z danego typu. Więc rekwizyty zostaną wpisane jako Omit<P & Props, keyof Props>. Może się to wydawać oczywiste P, ale TS nie może nadążać za typami warunkowymi, o ile nadal mają nierozwiązane parametry typu. Oznacza to, że jeśli chodzi o TS Omit<P & Props, keyof Props> i P są różnymi typami.

Jedynym rozwiązaniem tutaj jest użycie asercji typu:

export const withInputWrapper = <P extends TextInputProps = TextInputProps>(
  InputComponent: React.ComponentType<P>
): React.FC<P & Props> => {
  return ({ styleWrapper, style, title, value, onFocus, onBlur, onChange, onReset, withReset = true, ...props }) => {

    const onFocusHandler = () => {}
    const onBlurHandler = () => {}

      const onChangeHandler = () => {}

    return (
      <View style={styleWrapper}>
        <View>
          <InputComponent // <-- here
            {...props as P}
            onChange={onChangeHandler}
            value={value}
            style={style}
            onBlur={onBlurHandler}
            onFocus={onFocusHandler}
          />
        </View>
      </View>
    );
  };
};

Link do placu zabaw

1
Titian Cernicova-Dragomir 18 marzec 2020, 08:28