react js中的接口和枚举typescript

Question

I am working on a project and I have a strange problem. i have an enum

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

and I want to use these enum values inside an interface

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

but I got this error: Parsing error: Unexpected token

11 | type: keyof typeof ButtonTypes;

the error is indicating that there is an unexpected token after the keyof

the component code

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

to have an complete picture on the code i have added my styled component code

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

I have fixed it, it is a problem in my package.json, all packages were very old I just have upgraded all packages and it worked fine.

don't be a fool like me, always keep an eye for your packages