🔎 搜索词

typescript, intellisense, interface, extends, react, create-react-app, svg

🕗 版本与回归信息

• 该问题存在于4.9.5和5.4.5两个版本中
• 自项目开始以来就存在这个问题，因为有问题的接口是首先被引入的

⏯ 活动链接

• 无响应*

💻 代码

export interface SvgIcon {
  icon: React.FunctionComponent<
    React.SVGProps<SVGSVGElement> & {
      title?: string | undefined;
    }
  >;
}

export interface TileOption extends SvgIcon {
  readonly value: string;
  readonly label: string;
  readonly description: string;
}

🙁 实际行为

IntelliSense无限加载。

该问题也由所有团队成员共享。
在VSC和Webstorm上都发生了同样的事情。

🙂 预期行为

IntelliSense正常工作。

关于问题的附加信息：
不导出接口可以解决问题：

在settings.json中启用“on-save”时导出接口而不使用extends SvgIcon可以解决问题。

SvgIcon表示create-react-app设置生成的SvgReactComponents类型。

在VSC的settings.json中启用“on-save”时，此类型还使VSC陷入组织导入操作。然而，将导入组织切换到prettier-plugin-organize-imports解决了这个问题。
设置前：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit",
  "source.organizeImports": "explicit"
},

设置后：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit",
},

值得一提的是，在单独文件中导出接口扩展SvgIcon时没有问题。