React Native项目WebStorm中出现") expected" Lint提示的原因及解决办法

你这段代码里用了TypeScript的尖括号类型断言语法：(new Map(): Map<string, boolean>)，但在React Native的JSX环境下，WebStorm的语法检查器会把尖括号<>误判为JSX标签的开始，导致它认为这里缺少闭合的)，所以抛出了") expected"的错误提示。

不过代码能正常运行的原因也很清楚：你的项目应该配置了Babel或者TypeScript编译器，它们能正确识别这是类型断言语法，转译时不会出错——说白了就是IDE的语法检查规则和项目实际的编译规则没对齐。

这里有几种靠谱的方式可以消除这个提示：

1. 改用as语法的类型断言（推荐） #

把尖括号断言换成TypeScript推荐的as语法，这样既符合JSX环境的语法规范，IDE也能正确识别：

state = { selected: new Map() as Map<string, boolean> };

这种方式最稳妥，还能避免JSX和类型断言的语法冲突，也是TypeScript官方更推荐的写法（尤其是在JSX场景下）。

2. 调整WebStorm的语法检查设置 #

如果不想改代码，可以通过IDE设置来消除这个错误提示：

• 打开WebStorm的设置（快捷键Ctrl+Alt+S/Cmd+,）
• 找到Editor > Inspections > JavaScript and TypeScript，展开后定位到Syntax errors相关选项
• 找到针对“Unexpected token”或者“Missing )”的检查项，暂时禁用它；或者精准找到和类型断言相关的检查规则，调整为允许尖括号断言
• 另外，如果项目用了ESLint，确保.eslintrc里的@typescript-eslint/no-angle-bracket-type-assertion规则是关闭的，或者把它的级别设为warn而非error

3. 对齐IDE和项目的TypeScript版本 #

有时候WebStorm默认用的TypeScript版本和项目本地安装的版本不一致，也会导致语法识别错误：

• 打开设置Languages & Frameworks > TypeScript
• 把TypeScript version设置为Node_modules里的本地版本，而非IDE自带的版本
• 点击Apply保存后，IDE会重新加载项目的TypeScript配置，大概率能解决语法识别问题

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