如何让TypeScript识别Fluent UI的fluent-divider元素？

解决步骤 #

• 添加全局类型声明文件
  在项目src目录下创建global.d.ts文件，写入以下代码扩展React的JSX类型定义，让TypeScript识别fluent-divider：

import type { FluentDivider } from "@fluentui/web-components";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "fluent-divider": React.DetailedHTMLProps<
        React.HTMLAttributes<FluentDivider>,
        FluentDivider
      >;
    }
  }
}

• 卸载无关依赖
  你安装的@types/fluent属于旧版Fluent库的类型，与@fluentui/web-components无关，会引发类型冲突，执行以下命令卸载：

npm uninstall @types/fluent
# 若使用yarn则执行：
yarn remove @types/fluent

• 重启TypeScript服务
  如果修改后错误仍未消失，在VSCode中按Ctrl+Shift+P，选择「TypeScript: Restart TS Server」重启语言服务，让类型定义生效。

扩展说明 #

如果后续需要使用更多Fluent UI Web Components元素（如fluent-button），可在同一个global.d.ts文件中继续扩展IntrinsicElements接口：

import type { FluentDivider, FluentButton } from "@fluentui/web-components";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "fluent-divider": React.DetailedHTMLProps<React.HTMLAttributes<FluentDivider>, FluentDivider>;
      "fluent-button": React.DetailedHTMLProps<React.HTMLAttributes<FluentButton>, FluentButton>;
    }
  }
}

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