html - 绑定元素“一些测试文本”隐式具有“任何”类型

Question

我遇到了 TS 编译器的问题，它向我抛出了这个错误：绑定元素“”隐含地具有“任何”类型。

错误发生在地图函数和属性（id、title、action、backgroundColor、color）上。

下面是我的代码：

export type MessageWindowComponentProps = PropsWithChildren<{
    readonly buttonsType: ButtonsType,
    readonly saveText: string,
    readonly closeText: string,
    readonly yesText: string,
    readonly noText: string,
    readonly onSaveClick?: () => void;
    readonly onCloseClick?: () => void;
    readonly onYesClick?: () => void;
    readonly onNoClick?: () => void;
}>

const classNames = bemClassNames("message-window");
const messageWindowContent = classNames("content");
const messageWindowButtons = classNames("buttons");

export const MessageWindowComponent: FunctionComponent<MessageWindowComponentProps> = ({
    children, 
    buttonsType, 
    saveText, 
    closeText, 
    yesText, 
    noText, 
    onSaveClick, 
    onCloseClick, 
    onYesClick, 
    onNoClick,
}) => {

    const typeOfButtons = {
        [ButtonsType.yesNo]: [
            {id: 1, title: {noText}, action: onYesClick, backgroundColor: ButtonBackgroundColor.whitePrimaryFixed, color: TextColor.textPrimary},
            {id: 2, title: {yesText}, action: onNoClick, backgroundColor: ButtonBackgroundColor.colorPrimary, color: TextColor.whiteBlack},
        ],
        [ButtonsType.saveClose]: [
            {id: 3, title: {closeText}, action: onCloseClick, backgroundColor: ButtonBackgroundColor.whitePrimaryFixed, color: TextColor.textPrimary},
            {id: 4, title: {saveText}, action: onSaveClick, backgroundColor: ButtonBackgroundColor.colorPrimary, color: TextColor.whiteBlack},
        ],
        [ButtonsType.close]: [
            {id: 5, title: {closeText}, action: onCloseClick, backgroundColor: ButtonBackgroundColor.colorPrimary, color: TextColor.whiteBlack},
        ],
    };

    return (
        <div className={classNames()}>
            <div className={messageWindowContent}>
                {children}
            </div>
            <div className={messageWindowButtons}>
                <Layout justifyContent={JustifyContent.flexEnd}>
                    {typeOfButtons[buttonsType].map(({id, title, action, backgroundColor, color}) => (
                        <Layout key={id} spacingSizeLeft={SpacingSize.s}>
                            <TextButton backgroundColor={backgroundColor} color={color} shadow={false} onClick={action ?? doNothing} text={title} title={title} />
                        </Layout>
                    ))}
                </Layout>
            </div>
        </div>
    );
};

谢谢您的帮助。

Answer 1

编译器建议typeOfButtons没有指定类型。只需向这个变量添加一个类型，它应该没问题。还要检查ButtonsType是什么类型，以便您可以将该类型放入typeOfButtons类型定义中。