在React中使用Mantine UI模板遇INTERFACE保留字问题如何解决？

问题根源：interface是TypeScript专属语法，JavaScript并未将其纳入合法语法范畴，因此在纯JS环境中运行含interface的代码会触发保留关键字报错。

两种可行修改方案 #

方案1：切换到TypeScript环境运行 #

若你的项目可支持TypeScript，只需两步即可解决：

1. 将组件文件后缀从.jsx改为.tsx
2. 确保项目已配置TypeScript（安装typescript依赖，添加tsconfig.json配置文件）

原代码无需修改，TypeScript编译时会自动移除interface相关代码，生成可正常运行的JavaScript。

方案2：修改为纯JavaScript兼容版本 #

若必须在纯JS环境中运行，直接移除interface定义，还可可选添加JSDoc类型注释保留类型提示：

import { createStyles, Paper, Text, Title, Button } from '@mantine/core';

const useStyles = createStyles((theme) => ({
  card: {
    height: 440,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  },

  title: {
    fontFamily: `Greycliff CF ${theme.fontFamily}`,
    fontWeight: 900,
    color: theme.white,
    lineHeight: 1.2,
    fontSize: 32,
    marginTop: theme.spacing.xs,
  },

  category: {
    color: theme.white,
    opacity: 0.7,
    fontWeight: 700,
    textTransform: 'uppercase',
  },
}));

/**
 * @param {Object} props
 * @param {string} props.image
 * @param {string} props.title
 * @param {string} props.category
 */
export function ArticleCardImage({ image, title, category }) {
  const { classes } = useStyles();

  return (
    <Paper
      shadow="md"
      p="xl"
      radius="md"
      sx={{ backgroundImage: `url(${image})` }}
      className={classes.card}
    >
      <div>
        <Text className={classes.category} size="xs">
          {category}
        </Text>
        <Title order={3} className={classes.title}>
          {title}
        </Title>
      </div>
      <Button variant="white" color="dark">
        Read article
      </Button>
    </Paper>
  );
}

如果不需要类型提示，也可以直接去掉JSDoc注释，仅保留核心逻辑即可。

内容的提问来源于stack exchange，提问作者Hashim Aliyu Hashim