Javascript reactjs中的泛型类型

我为我的应用程序中的句柄输入编写了一个自定义挂钩。我使用泛型类型来定义自定义挂钩的返回类型。这是我的密码

interface IUseInput<T, U> {
    (): [T, (e: ChangeEvent<HTMLInputElement>) => void, U];
}

function useInput<T, U>(): IUseInput<T, U> {
    const [input, setInput] = useState({});
    const [isDirty, setDirty] = useState({});

    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
        setInput({
            ...input,
            [e.target.name]: e.target.value
        });
        setDirty({
            ...isDirty,
            [e.target.name]: true
        });
    };

    return [input, handleInputChange, isDirty] //this line get error
}


const Component: React.FC = () => {
    const [input, handleChangeInput, isDirty] = useInput<{username: string, password: string}, {username: boolean, password: boolean}>();

  return (
      ....
  )

}

接口IUseInput{
（）：[T，（e:ChangeEvent）=>void，U]；
}
函数useInput（）：IUseInput{
const[input，setInput]=useState（{}）；
const[isDirty，setDirty]=useState（{}）；
常量handleInputChange=（e:ChangeEvent）=>{
设置输入({
…输入，
[e.target.name]：e.target.value
});
肮脏的({
…是的，
[e.target.name]：true
});
};
return[input，handleInputChange，isDirty]//此行获取错误
}
常量组件：React.FC=（）=>{
const[input，handleChangeInput，isDirty]=useInput（）；
返回(
....
)
}

但是我发现这个错误

类型“{}[]”不能分配给类型“IUseInput”

我的错在哪里？请帮助我

IUseInput

是函数的类型，而不是返回类型的类型。无法指定函数声明的类型，只能指定变量的类型（可以为其分配函数）。但是这并不是必需的，我只是将返回类型从

IUseInput

移动到函数declartion

可以进行改进，因为

U

应该具有与

T

相同的键，您可以使用预定义的映射类型

Record

从

T

派生

U

。因此，您可以将

U

替换为

Record

：

函数useInput（）：[T，（e:ChangeEvent）=>void，Record]{
const[input，setInput]=useState（{}作为T）；
const[isDirty，setDirty]=useState（{}作为记录）；
常量handleInputChange=（e:ChangeEvent）=>{
设置输入({
…输入，
[e.target.name]：e.target.value
});
肮脏的({
…是的，
[e.target.name]：true
});
};
返回[input，handleInputChange，isDirty]
}

function useInput<T>(): [T, (e: ChangeEvent<HTMLInputElement>) => void, Record<keyof T, boolean>] {
    const [input, setInput] = useState({} as T);
    const [isDirty, setDirty] = useState({} as Record<keyof T, boolean>);

    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
        setInput({
            ...input,
            [e.target.name]: e.target.value
        });
        setDirty({
            ...isDirty,
            [e.target.name]: true
        });
    };

    return [input, handleInputChange, isDirty] 
}