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 中的一個問題，所有軟件包都非常舊，我剛剛升級了所有軟件包，並且運行良好。

不要像我一樣傻，時刻留意你的包裹