Reactjs 嵌套对象->；元素隐式地具有一个'；任何'；类型，因为表达式的类型为'；字符串'；can'；不能用于索引类型

我有一个react表单组件，我正试图将其重写为typescript。我试图在for循环中的另一个对象中检索一个对象，但我一直得到以下错误

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 

我尝试了以下问题中提出的解决方案，但仍然无法找到有效的解决方案，我不希望在

tsconfig.json

中将

noImplicitAny

设置为

false

：

有问题的代码是-在底部附近可以找到问题区域：

import React from 'react';

import Button from '../../UI/Button/Button';
import Input from '../../UI/Input/Input';


type Config = {
    elementType: string;
    elementConfig: {
        type: string;
        placeholder: string;
        options: {
            value: string;
            displayValue: string;
        };
    };
    value: string;
    validation: {
        required: boolean;
        isEmail?: boolean;
        minLength?: number;
    };
    valid: boolean;
    touched: boolean;
    fieldActive: boolean;
    // [key: string]: string | Object;
}

interface SignInFormProps {
    isSignIn: boolean;
}

interface SignInFormState {
    controls: {
        email: Config;
        password: Config;
    };
    isSignUp: boolean;
    [key: string]: boolean | Object | Config;
}


class SignInForm extends React.Component<SignInFormProps, SignInFormState> {
    state = {
        controls: {
            email: {
                elementType: 'input',
                elementConfig: {
                    type: 'email',
                    placeholder: 'Your Email',
                    options: {
                        value: '',
                        displayValue: ''
                    },
                },
                value: '',
                validation: {
                    required: true,
                    isEmail: true
                },
                valid: false,
                touched: false,
                fieldActive: false
            },
            password: {
                elementType: 'input',
                elementConfig: {
                    type: 'password',
                    placeholder: 'Password',
                    options: {
                        value: '',
                        displayValue: ''
                    },
                },
                value: '',
                validation: {
                    required: true,
                    minLength: 6
                },
                valid: false,
                touched: false,
                fieldActive: false
            }
        },
        isSignUp: true
    }

    private activateField = ( controlName: keyof SignInFormState['controls'] ) => {
        do stuff...
    }

    ...

    render() {
        const formElementsArray: {id: string, config: Config}[] = [];

        // ################ The config value is causing the error ################
        for ( let key in this.state.controls ) {
            formElementsArray.push({
                id: key,
                config: this.state.controls[key] as Config
            });
        }

        let form = formElementsArray.map( formElement => (
            <Input
                blur={ ( event ) => this.disableFocus(event, formElement.id) }
                changed={ ( event ) => this.inputChangedHandler(event, formElement.id) }
                elementConfig={formElement.config.elementConfig}
                elementType={formElement.config.elementType}
                fieldActive={formElement.config.fieldActive}
                focus={ () => this.activateField(formElement.id) }
                invalid={!formElement.config.valid}
                key={formElement.id}
                shouldValidate={formElement.config.validation.required}
                touched={formElement.config.touched}
                value={formElement.config.value} />
        ));

从“React”导入React；
从“../UI/Button/Button”导入按钮；
从“../UI/Input/Input”导入输入；
类型配置={
元素类型：字符串；
元素配置：{
类型：字符串；
占位符：字符串；
选项：{
值：字符串；
显示值：字符串；
};
};
值：字符串；
验证：{
必需：布尔值；
isEmail？：布尔值；
minLength？：数字；
};
有效值：布尔值；
触摸：布尔；
fieldActive：布尔型；
//[键：字符串]：字符串|对象；
}
接口符号formprops{
isSignIn：布尔型；
}
接口符号格式状态{
控制：{
电邮:Config ;；
密码：Config；
};
isSignUp：布尔型；
[键：字符串]：布尔|对象|配置；
}
类SignInfo扩展了React.Component{
状态={
控制：{
电邮：{
elementType:'输入'，
元素配置：{
键入：“电子邮件”，
占位符：“您的电子邮件”，
选项：{
值：“”，
显示值：“”
},
},
值：“”，
验证：{
要求：正确，
isEmail：是的
},
有效：假，
感动:错,，
fieldActive:错误
},
密码：{
elementType:'输入'，
元素配置：{
键入：“密码”，
占位符：“密码”，
选项：{
值：“”，
显示值：“”
},
},
值：“”，
验证：{
要求：正确，
最小长度：6
},
有效：假，
感动:错,，
fieldActive:错误
}
},
是的
}
私有activateField=（controlName:keyof SignInfo状态['controls']）=>{
做些事情。。。
}
...
render（）{
常量formElementsArray:{id:string，config:config}[]=[]；
//配置值导致错误################
for（让输入this.state.controls）{
formElementsArray.push({
id:钥匙，
config:this.state.controls[key]为config
});
}
让form=formElementsArray.map（formElement=>(
this.disableFocus（事件，formElement.id）}
changed={（事件）=>this.inputChangedHandler（事件，formElement.id）}
elementConfig={formElement.config.elementConfig}
elementType={formElement.config.elementType}
fieldActive={formElement.config.fieldActive}
focus={（）=>this.activateField（formElement.id）}
无效={！formElement.config.valid}
key={formElement.id}
shouldValidate={formElement.config.validation.required}
toucted={formElement.config.toucted}
value={formElement.config.value}/>
));

---

如果有人对如何解决这一问题有任何想法，同时有明确定义的类型，而不使用任何类型，那么这将很有帮助。

首先，没有一种很好的方法可以做到这一点，它仍在讨论中：

下面是解决您的问题的两种可能的方法

在循环外部声明密钥：

const formElementsArray:{id:string；config:config}[]=[]；
let key:this.state.controls类型的键；
for（在此.state.controls中输入）{
formElementsArray.push({
id:钥匙，
config:this.state.controls[key]，
});
}

使用Object.keys并将键强制转换为所需类型：

const formElementsArray:{id:string；config:config}[]=（Object.keys）(
这是国家控制
)as（key of typeof this.state.controls）[]）.map（（key）=>({
id:钥匙，
config:this.state.controls[key]，
}));

您还可以通过使用控制键的枚举使其更清晰

enum控制键{
email=“email”，
password=“password”，
}
接口符号格式状态{
控制：{
[输入控制键]：配置；
};
isSignUp：布尔型；
[键：字符串]：布尔|对象|配置；
}

然后

1b

const formElementsArray:{id:string；config:config}[]=[]；
let键：ControlKey；
for（在此.state.controls中输入）{
formElementsArray.push({
id:钥匙，
config:this.state.controls[key]，
});
}

或

2b

const formElementsArray:{id:string；config:config}[]=（Object.keys）(
这是国家控制
)作为控制键[]）。映射（（键）=>({
id:钥匙，
config:this.state.controls[key]，
}));

希望这有帮助