WebStorm中MUI v5 TypeScript类型无代码补全提示如何解决

在WebStorm中开发时引入MUI v5组件，组件props无法触发代码补全提示，对应运行环境如下：

运行环境 #

• TypeScript v4.4.4
• WebStorm 2021.2.3
• MUI v5.0.4

相关代码示例 #

function App() {
  const { path, url } = useRouteMatch();
  return (
    <div className="App">
      <header className="App-header"></header>
      <Switch>
        <Route exact path={path}>
          <Button variant="contained">a123</Button>
          <Card>123</Card>
        </Route>
      </Switch>
    </div>
  );
}

问题截图 #

问题原因及解决方案 #

1. WebStorm旧版本对MUI v5批量导出类型识别存在bug #

MUI v5默认使用的import { Button } from '@mui/material'批量导入方式，2021.2版本WebStorm无法正确解析这类深层批量导出的TS类型定义，导致补全失效。

• 临时适配方案：改为单组件路径导入，WebStorm可直接识别单个组件的类型：

import Button from '@mui/material/Button'
import Card from '@mui/material/Card'

• 永久修复方案：升级WebStorm到2021.3及以上版本，官方已在该版本修复MUI v5类型识别的相关问题。

2. TypeScript版本与MUI v5类型定义不兼容 #

MUI v5.0.4的类型定义适配的最低TypeScript版本为4.5，当前使用的4.4.4版本存在部分泛型定义不兼容的情况，会导致类型解析失败。
解决方案：升级项目TypeScript版本到4.5.x：

npm i typescript@4.5.5 -D
# 或使用yarn
yarn add typescript@4.5.5 -D

3. WebStorm缓存索引异常 #

如果上述操作后依然无法触发补全，大概率是WebStorm本地的类型索引缓存损坏，可以重置缓存修复：

• 打开顶部菜单 文件 → 无效缓存/重启
• 弹出窗口中勾选 清除文件系统缓存和本地历史、清除下载的共享索引
• 点击 无效并重启，等待IDE重新索引项目即可。

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