如何配置WebStorm识别React Monorepo中以.js扩展名编写的TypeScript文件

一、快速配置WebStorm识别.js文件中的TypeScript代码 #

WebStorm提供了灵活的文件类型映射设置，几步就能让IDE把这些.js文件当成TypeScript处理：

1. 打开IDE设置：按下Ctrl+Alt+S（Windows/Linux）或Cmd+,（Mac）
2. 进入Languages & Frameworks > TypeScript选项页
3. 找到「File name patterns」区域，点击右侧的+按钮
4. 输入*.js作为新的文件模式，然后选择对应的类型为TypeScript
5. 保存设置后，重启WebStorm或者点击「Reload All Projects」，IDE就会正确解析.js文件里的TypeScript语法了

如果担心这个设置影响其他项目，WebStorm默认会为每个项目保存独立的配置，所以全局添加也不会干扰其他项目；你也可以手动在React仓库的.idea/misc.xml文件中添加项目级别的映射规则（没有.idea文件夹就手动创建）。

二、为什么React团队用.js扩展名写TypeScript？ #

React团队这么做是为了平衡工具链兼容性和类型检查能力：

• 早期TypeScript生态还不够成熟，很多JavaScript工具（比如旧版Babel、打包工具）对.ts文件的支持不如.js顺畅
• 用.js扩展名可以让仓库代码直接被普通JavaScript工具处理，同时内部通过TypeScript的checkJs特性来做类型检查
• 这种方式也能让贡献者不需要额外配置TS环境就能参与开发，降低了参与门槛

三、React仓库的开发流程是怎样的？ #

你没看到顶层webpack.config是因为React用的是定制化的构建流程：

• 仓库根目录的tsconfig.json里配置了allowJs: true和checkJs: true，这让TypeScript编译器可以检查.js文件中的类型注解
• 他们用Rollup作为主要的打包工具，配合内部脚本处理编译、打包流程
• 你可以运行仓库里的npm run type-check脚本，手动触发类型检查，和IDE的实时提示形成互补

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