Javascript 类型不满足约束。类型中缺少索引签名

我正在为一个用typescript编写并使用React钩子的项目进行重构。虽然我不是一个真正的专家，更像是初学者，但我对打字稿有一些知识

我试图为这个项目开发一些代码重用（这就是为什么使用钩子进行重构），我遇到了一个简单的错误，我当然可以找到一个技巧，但我想知道为什么它不起作用

我有一个简单的登录表单，有两个输入（电子邮件和密码）：

从“React”导入React；
从“@/components”导入{SmartInput，RoundButton}；
从“@/hooks”导入{useMultipleInputs}；
接口ILoginFormProps{
onLogin：（电子邮件：string，密码：string）=>承诺；
errorMsg？：字符串；
}
接口ILoginFormInputs{
密码：字符串；
电子邮件：字符串；
}
导出常量登录信息=({
昂洛金，
errorMsg，
}：ILoginFormProps）：JSX.Element=>{
const[inputs，setInputs]=useMultipleInputs（）；//发生错误的行
const onSubmit=async（e:React.FormEvent）=>{
const{email，password}=输入；
e、 预防默认值（）；
等待登录（电子邮件、密码）；
};
const displayErrorMsg=（）=>{
如果（错误消息）{
返回(

{errorMsg}

);
}
返回null；
};
返回(
登录到

电子港口孵化器
{displayErrorMsg（）}
null}/>
);
};

我想延迟自定义钩子的输入状态，这样它就可以重用

import React，{useState}来自“React”；
接口输入{
[键：字符串]：字符串；
}
导出常量useMultipleInputs=（）：[
T
变更类型
] => {
const[inputs，setInputs]=useState（{}）；
const onChange=（e:React.ChangeEvent）=>{
设置输入({
…输入，
[e.target.name]：e.target.value，
});
};
返回[输入为T，onChange]；
};

遗憾的是，正如您在第一个屏幕截图上看到的，我得到了一个错误：

类型“ILoginFormInputs”不满足约束“IInputs”。

“ILoginFormInputs”类型中缺少索引签名。

typescript是否将

{email:string，password:string}

视为

[key:string]：string]

---

非常感谢您阅读我的文章：）

我相信这是故意的。可以有多个同名的接口声明，它们将合并，但不能对类型进行合并。（

T

是一种类型，而不是接口）。所以TS只是想在这里非常安全

您可以尝试将

ILoginFormInputs

定义更改为更严格的

类型

类型ILoginFormInputs={
密码：字符串；
电子邮件：字符串；
}
<代码>请考虑提供指南中描述的内容。具体来说，相关代码应该包含在问题本身中（而不仅仅是作为外部链接），并且应该以文本形式呈现（适合复制/粘贴到IDE中），而不是以图像形式呈现。祝你好运好的，我现在正在编辑！美好的它正在工作。我不知道t被解释为一个类型，我认为它也是一个接口。非常感谢，我将尝试进一步阅读关于类型和接口的typescript文档。：）
import React from 'react';
import { SmartInput, RoundButton } from '@/components';
import { useMultipleInputs } from '@/hooks';

interface ILoginFormProps {
    onLogin: (email: string, password: string) => Promise<void>;
    errorMsg?: string;
}

interface ILoginFormInputs {
    password: string;
    email: string;
}

export const LoginForm = ({
    onLogin,
    errorMsg,
}: ILoginFormProps): JSX.Element => {
    const [inputs, setInputs] = useMultipleInputs<ILoginFormInputs>(); // line where the error occur

    const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        const { email, password } = inputs;
        e.preventDefault();
        await onLogin(email, password);
    };

    const displayErrorMsg = () => {
        if (errorMsg) {
            return (
                <p className='body-text body-text--medium body-text--error auth-form__form__error-msg'>
                    {errorMsg}
                </p>
            );
        }
        return null;
    };

    return (
        <div className='auth-form'>
            <div className='auth-form__container'>
                <div className='auth-form__container__title title title--big'>
                    Sign in to <br />
                    Esport-Hatcher
                </div>
                <form className='auth-form__basic' onSubmit={onSubmit}>
                    <SmartInput
                        type='email'
                        placeholder='Email'
                        name='email'
                        icon='mail'
                        value={inputs.email}
                        onChange={setInputs}
                    />
                    <SmartInput
                        type='password'
                        placeholder='Password'
                        name='password'
                        icon='lock'
                        value={inputs.password}
                        onChange={setInputs}
                    />
                    {displayErrorMsg()}
                    <RoundButton onClick={() => null} />
                </form>
            </div>
        </div>
    );
};

import React, { useState } from 'react';

interface IInputs {
    [key: string]: string;
}

export const useMultipleInputs = <T extends IInputs>(): [
    T,
    typeof onChange
] => {
    const [inputs, setInputs] = useState<T | {}>({});

    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputs({
            ...inputs,
            [e.target.name]: e.target.value,
        });
    };
    return [inputs as T, onChange];
};