TS7053：元素隐式具有“any”类型，因为“string”类型的表达式不能用于索引类型“{ username: string;” 电子邮件：字符串；

Question

尝试将打字稿添加到自定义反应表单组件中，但无法消除我不知道如何修复的错误。TS7053：元素隐式具有“any”类型，因为“string”类型的表达式不能用于索引类型“{ username: string;” 电子邮件：字符串；密码：字符串；确认密码：字符串；}'。在类型“{ username: string;”上找不到带有“string”类型参数的索引签名 电子邮件：字符串；密码：字符串；确认密码：字符串；}'。

我确信某个地方有答案，但我无法将其调整为我的代码，也无法理解错误的基本原理。请帮助我理解

应用程序组件

import React, {useState} from 'react';
import s from './App.module.scss'
import Input from "./components/Input/Input";

function App() {
    const [values, setValues] = useState({
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
    });

    const inputs = [
        {
        id: "username",
        name: "UserName",
        type: "text",
        placeholder: "Username",
        },
        {
            id: "email",
            name: "Email",
            type: "text",
            placeholder: "@gmail.com",
        },
    ]

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setValues({...values, [e.target.name]: e.target.value});
    }

    return (
        <div className={s.app}>
            <form action="">
                {inputs.map((input) => (
                    <Input
                        key={input.id}
                        id={input.id}
                        name={input.name}
                        placeholder={input.placeholder}
                        type={input.type}
                        value={values[input.name]}
                        onChange={handleChange}
                    />
                ))}
            </form>
        </div>
    );
}

export default App;

输入组件

import React, {FC} from 'react';
import s from './Input.module.scss';

interface InputProps {
    id: string,
    name: string,
    placeholder: string,
    type: string,
    value: string,
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
}

const Input: FC<InputProps> = ({id, name, placeholder, type, value, onChange}) => {
    return (
        <div className={s.input}>
            <label htmlFor={id}>
                {name}
            </label>
            <input
                id={id}
                type={type}
                placeholder={placeholder}
                value={value}
                onChange={onChange}
            />
        </div>
    );
};

export default Input;

源代码： https: //github.com/Endo-Resu/react-custom-form

感谢您的时间、建议和帮助

Answer 1

你的变量values的类型是{ username: string; email: string; password: string; confirmPassword: string; }. 可以通过调用values.username或来访问其内容values['username']。

Typescript 甚至可以推断出如下内容：

let key = 'username'
let username = values[key]

这是因为在此实例中key不具有一般类型string，但已知其类型为'username'，并且已知该类型能够索引values。

您的代码包含行value={values[input.name]}. 该变量input.name的类型为string。但是，values不能通过任何字符串进行索引，只能通过特定字符串进行索引。Typescript 只知道这input.name是一个string. 如果你确定你的字符串可以索引类型，你可以使用类型转换字符串index.name as keyof typeof values，打字稿应该停止抱怨。

但请注意，您尝试使用 的input.name键values，但名称是"UserName"和"Email"。您应该使用它input.id，因为 id 与实际的键匹配。大写字母很重要。

现在的结果values[index.name as keyof typeof values]可能仍然是any类型，因为 typescript 不知道实际返回哪个值。因为其中的所有values内容都是字符串，所以您可以将其类型转换为字符串。总共你得到values[index.name as keyof typeof values] as string.