How to use and specify Generic Hooks in React with Typescript?

user_10901575 0
Viewed 7850

I'm trying to create a generic hooks to handle the button input elements, which return array of input value, bind object and reset handler.

Component

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;

Hook

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];
}

Problem I'm Facing

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

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

Though i've specified the type of any for the bind object, it shows the above error. I've even tried with following code to specify the return type.

[T, {T: onChange: (e: any) => void}, React.Dispatch<React.SetStateAction<T>>]
typescript-generics react-hooks typescript reactjs
2 Answers

The problem is not the type you define for the hooks return value, it is that the bind object does not have any type annotation so its onChange method's e param will be implicitly any.

One possible sulution to fix its type annotation:

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

user_59130390 
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

user_54582000
Related