如何强制React TS模块中导入组件名与文件名一致？

你遇到的问题根源在于默认导出的特性：默认导出允许导入时自定义任意名称，所以即使你修改了组件文件名或组件名，旧的导入名称也不会触发报错，进而导致代码混淆。

解决这个问题的最佳方式是放弃默认导出，改用命名导出，配合TypeScript的类型检查，就能强制导入名称必须与导出的组件名（也就是你想要和文件名对齐的名称）一致。

具体修改步骤： #

1. 修改组件文件的导出方式
   将MyComponent.tsx中的默认导出改为命名导出，同时确保组件名与文件名完全一致：

export const MyComponent: React.FC<Props> = ({ /* props */ }) => {
  // component logic
};

2. 导入时必须使用对应命名
   在AnotherFile.tsx中，必须使用正确的命名导入：

import { MyComponent } from './MyComponent';

如果此时你写成import { MyComponentX } from './MyComponent';，TypeScript会直接抛出错误，提示找不到名为MyComponentX的导出项，从根源上避免了名称混淆。

可选：用ESLint强化校验 #

如果想进一步确保组件文件名和导出的组件名严格一致，可以添加ESLint规则：

• 安装eslint-plugin-filenames插件
• 在ESLint配置中启用filenames/match-exported规则，这样当组件文件名和导出的组件名不匹配时，ESLint会直接报错，提前发现问题。

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