什么是用于此React表单字段挂钩的正确类型?

时间:2019-04-29 20:17:50

标签: reactjs typescript react-hooks

我有一个React钩子(使用打字稿),但是只有当我使用any作为初始值的类型时,我才能使其工作。

我尝试了HTMLInputElementReact.FormEvent(甚至是React.FormEvent<HTMLInputElement>)的组合,以及使用input type="text"来尝试将输入元素限制为type: string.

这是钩子:

import { useCallback, useState } from "react";

export default function useField(initialValue: any) {
  const [value, setValue] = useState(initialValue);

  const handleUpdate = useCallback(
    ({ currentTarget: { type, checked, value } }) => {
      setValue(type === "checkbox" ? checked : value);
    },
    []
  );

  return [value, handleUpdate];
}

这是它的使用位置:

import useField from "./hooks/useField";

const App = () => {
  const [firstName, setFirstName] = useField("");
  const [lastName, setLastName] = useField("");
  const [age, setAge] = useField("");

  return (
    <div className="App">
      <form>
        <input value={firstName} name="firstName" onChange={setFirstName} />
        <input value={lastName} name="lastName" onChange={setLastName} />
        <input value={age} name="age" onChange={setAge} />
      </form>
    </div>
  );
};

export default App;

使用initialValue: any实际上可以正常工作,但是我觉得类型应该比这更具体。如果我确实将其更改为更特定的类型(例如字符串),则会收到以下两个错误。

(JSX attribute) React.InputHTMLAttributes<HTMLInputElement>.onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined
Type 'string | (({ currentTarget: { type, checked, value } }: any) => void)' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) | undefined'.
  Type 'string' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) | undefined'.ts(2322)
index.d.ts(1977, 9): The expected type comes from property 'onChange' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'

第二个是输入onChange事件:

(JSX attribute) React.InputHTMLAttributes<HTMLInputElement>.onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined
Type 'string | (({ currentTarget: { type, checked, value } }: any) => void)' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) | undefined'.
  Type 'string' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) | undefined'.ts(2322)
index.d.ts(1977, 9): The expected type comes from property 'onChange' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'

今天是我使用Typescript的第一天,所以这可能很明显!

1 个答案:

答案 0 :(得分:1)

如果您未指定返回类型,TypeScript将进行推断。我将从一个简单的示例开始:

function strNum() {
  return [1, 'a'];
}

这将返回类型(string | number)[],即可以包含字符串或数字元素的数组。

useField返回string | (event: ChangeEvent<HTMLInputElement>) => void的数组。这意味着数组的任何元素都可以是这些类型中的任何一种,并且它们彼此不兼容。

相反,您可以将返回类型指定为元组。这是一组具有特定元素类型的设置长度的数组。

useField(initialValue: string): [string, (event: React.ChangeEvent<HTMLInputElement>) => void] {