react js中的接口和枚举typescript

Question

我正在做一个项目，但我遇到了一个奇怪的问题。 我有一个枚举

export enum ButtonTypes {
    Primary = 'primary',
    Secondary = 'secondary',
    Ghost = 'ghost',
}

我想在接口中使用这些枚举值

export interface IButtonProps extends React.HTMLProps<HTMLAnchorElement> {
    children: React.ReactNode;
    type: keyof typeof ButtonTypes;
}

但我收到了这个错误：解析错误：意外的令牌

11 | 类型：按键类型的按键类型；

该错误表明在keyof之后有一个意外的令牌

组件代码

export default function Button(props: IButtonProps) {
    const { children, type } = props;
    return (
        <Styles.ButtonWrapper type={ButtonTypes[type]}>
            {children}
        </Styles.ButtonWrapper>
    );
}

为了对代码有完整的了解，我添加了我的样式化组件代码

import styled from 'styled-components';
import { colors } from '../theme';
import { ButtonTypes } from './Button';

interface IButtonWrapperProps {
    type: ButtonTypes;
}
const BACKGROUND_MAP: any = {
    [ButtonTypes.Primary]: colors.primary,
};

const TEXT_COLOR_MAP: any = {
    [ButtonTypes.Primary]: colors.white,
};
const BORDER_COLOR_MAP: any = {
    [ButtonTypes.Primary]: colors.primary,
};

export const ButtonWrapper = styled.a<IButtonWrapperProps>`
    background-color: ${(props) => BACKGROUND_MAP[props.type]};
    color: ${(props) => TEXT_COLOR_MAP[props.type]}
    border: ${(props) => BORDER_COLOR_MAP[props.type]};
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
`;

Answer 1

我已经修复了它，这是我的 package.json 中的一个问题，所有软件包都非常旧，我刚刚升级了所有软件包，并且运行良好。

不要像我一样傻，时刻留意你的包裹