如何在 React with Typescript 中使用和指定通用 Hooks？

Question

我正在尝试创建一个通用挂钩来处理按钮输入元素，它返回输入值数组、绑定对象和重置处理程序。

组件

import React, { useState } from "react";
import { useInput } from "../services/FormInputHooks";

export type AddTransactionProps = {};

export const AddTransaction: React.FC<AddTransactionProps> = () => {
    const [text, bindText, resetText] = useInput<string>("");
    const [amount, bindAmount, resetAmount] = useInput<number>(0.0);

    return (
        <>
            <h3>Add new transaction</h3>
            <form>
                <div className="form-control">
                    <label htmlFor="text">Text</label>
                    <input
                        type="text"
                        {...bindText}
                        placeholder="Enter text.."
                    />
                </div>
                <div className="form-control">
                    <label htmlFor="amount">
                        Amount <br />
                        (negative - expense, positive - income)
                    </label>
                    <input
                        type="number"
                        {...bindAmount}
                        placeholder="Enter amount.."
                    />
                </div>
                <button className="btn"> Add Transaction</button>
            </form>
        </>
    );
};

export default AddTransaction;

挂钩

import { useState } from "react";

export function useInput<T>(
    initialValue: T
): [T, any, React.Dispatch<React.SetStateAction<T>>] {
    const [value, setValue] = useState<T>(initialValue);

    const reset = () => {
        setValue(initialValue);
    };

    const bind = {
        value,
        onChange: e => {
            setValue(e.target.value);
        }
    };

    return [value, bind, reset];
}

我面临的问题

Parameter 'e' implicitly has an 'any' type.  TS7006

    12 |     const bind = {
    13 |         value,
  > 14 |         onChange: e => {
       |                   ^
    15 |             setValue(e.target.value);
    16 |         }
    17 |     };

虽然我已经为绑定对象指定了 any 的类型，但它显示了上述错误。我什至尝试使用以下代码来指定返回类型。

[T, {T: onChange: (e: any) => void}, React.Dispatch<React.SetStateAction<T>>]

Answer 1

import React, { useState } from "react";

export function useInput<T>(
    initialValue: T
): [T, any, React.Dispatch<React.SetStateAction<T>>] {
    const [value, setValue] = useState<T>(initialValue);

    const reset = () => {
        setValue(initialValue);
    };

    const bind = {
        value,
        onChange: (e: React.ChangeEvent<any>) => {
            setValue(e.target?.value);
        }
    };

    return [value, bind, reset];
}

Playground

Answer 2

问题不是你为钩子返回值定义的类型，而是绑定对象没有任何类型注释，所以它的onChange方法的e参数将隐含为any。

修复其类型注释的一种可能解决方案：

import { useState, ChangeEventHandler } from "react";

interface ResetFunction {
    (): void
}

interface Bind<T> {
  value: T,
  onChange: ChangeEventHandler<any>
}

export function useInput<T>(
    initialValue: T
): [T, Bind<T>, ResetFunction] {
    const [value, setValue] = useState<T>(initialValue);

    const reset = () => {
        setValue(initialValue);
    };

    const bind: Bind<T> = {
        value,
        onChange: e => {
            setValue(e.target.value);
        }
    };

    return [value, bind, reset];
}

Typescipt playground