活字体は、正しいタイプを読んでいません

g3mini：

私は、これはフックに反応があります。

import { ChangeEvent, RefObject, useEffect, useState } from "react";

type OriginalOnchange = (e: ChangeEvent<HTMLInputElement>) => void;
type OnchangeEvent = ChangeEvent<HTMLInputElement>;
export type OnChangeWrapper = (originalOnchange?: OriginalOnchange) => (onchangeEvent: OnchangeEvent) => void;

export const useTrackValidity = (
  inputRef: RefObject<HTMLInputElement | undefined>,
  value: string,
  invalidInputMessage?: string
) => {
  const [isValid, setIsValid] = useState<boolean>();

  const onChangeWrapper: OnChangeWrapper = (originalOnchange?: OriginalOnchange) => (onChangeEvent: OnchangeEvent) => {
    setIsValid(!(!!invalidInputMessage || !onChangeEvent.currentTarget.validity.valid));
    if (!!originalOnchange) {
      originalOnchange(onChangeEvent);
    }
  };

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.setCustomValidity(invalidInputMessage || "");
      setIsValid(!(!!invalidInputMessage || !inputRef.current.validity.valid));
    }
  }, [inputRef, invalidInputMessage, value]);

  return [isValid, onChangeWrapper];
};

私はこのようにそれを呼び出すとき：

 const [isValid, onChangeWrapper] = useTrackValidity(inputRef, value?.toString() ?? "", invalidInputMessage);

  return (
    <StyledInput
      ref={inputRef}
      type={inputType || type}
      name={inputName || name}
      required={isRequired || required}
      onChange={onChangeWrapper(onChange)}
      onBlur={onChangeWrapper()}
      isValid={isValid}
      value={value}
      {...props}
    />
  );

私はこのエラーを取得します：

TS2349: This expression is not callable.
  Not all constituents of type 'boolean | OnChangeWrapper' are callable.
    Type 'false' has no call signatures. TS2722: Cannot invoke an object which is possibly 'undefined'.

いつでも私は呼んでonChangeWrapper。

とき、私はこれまで以上に変更します。

const [isValid, onChangeWrapper] = useTrackValidity(inputRef, value?.toString() ?? "", invalidInputMessage) as [
    boolean | undefined,
    OnChangeWrapper
  ];

それは私が基本的には戻り値の型を繰り返したため、奇数として私を打つ仕事を行います。

TJクラウダー：

返された配列がなることを活字体推論Array<boolean|yourfunctiontype> -ということであり、すべての要素がこれらのタイプの交差点になります。booleanあなたはガードのいくつかの種類なしの要素のいずれかを呼び出すことはできませんので、呼び出すことはできません。

それを解決するために、あなたのフック関数が戻ることを活字体に伝える[boolean, yourFunctionType]具体的には、：

type onChangeWrapperType = /*...the function type here...*/;

// ...

export const useTrackValidity = (
  // ...
): [boolean, onChangeWrapperType] => {
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^−−−−−−−−−−−−−−−−−−−−−−−−−− here
    // ...
    const onChangeWrapper: onChangeWrapperType = /*...*/;
    // ...
    return [isVaild, onChangeWrapper];
};

活字体は、正しいタイプを読んでいません

おすすめ