fix: [breadcrumb] 修复typescript类型报错 fix #950

components/breadcrumb/breadcrumb.tsx

@@ -8,6 +8,8 @@ import Icon from '../icon'
 import Tooltip from '../tooltip'
 import { cloneDeep } from 'lodash'
 
+export type { IBreadcrumbProps } from './interface'
+
 const Breadcrumb = (props: IBreadcrumbProps): FunctionComponentElement<IBreadcrumbProps> => {
   const { getPrefixCls, prefixCls, compDefaultProps: userDefaultProps } = useContext(ConfigContext)
   const breadcrumbProps = getCompProps('Breadcrumb', userDefaultProps, props)
@@ -23,8 +25,8 @@ const Breadcrumb = (props: IBreadcrumbProps): FunctionComponentElement<IBreadcru
   const breadcrumbRef = useRef<HTMLDivElement>(null)
   const breadcrumbHideIconRef = useRef<HTMLDivElement>(null)
   const [itemsConfig, setItemsConfig] = React.useState<IBreadcrumbItem[]>(items)
-  const [itemsArray, setItemsArray] = React.useState<any>()
-  const [breadcrumbWidth, setBreadcrumbWidth] = React.useState<number>()
+  const [itemsArray, setItemsArray] = React.useState<IItemsWidth[]>([])
+  const [breadcrumbWidth, setBreadcrumbWidth] = React.useState<number>(0)
   const [openEllipsis, setOpenEllipsis] = React.useState<boolean>(false)
 
   const breadcrumbPrefixCls = getPrefixCls!(prefixCls, 'breadcrumb', customPrefixcls)
@@ -125,15 +127,18 @@ const Breadcrumb = (props: IBreadcrumbProps): FunctionComponentElement<IBreadcru
   }
 
   useEffect(() => {
-    const isMore = itemsConfig?.some((item: any) => {
-      return item?.title?.props?.children?.type?.displayName === 'Tooltip'
+    const isMore = itemsConfig?.some((item: IBreadcrumbItem) => {
+      if (React.isValidElement(item?.title)) {
+        return item?.title?.props?.children?.type?.displayName === 'Tooltip'
+      }
+      return false
     })
     setOpenEllipsis(isMore && itemsConfig.length === MIN_ITEM)
   }, [itemsConfig])
 
   useEffect(() => {
     if (breadcrumbRef?.current) {
-      const itemsArray = Array.from(breadcrumbRef.current.children, (item: any, index: number) => {
+      const itemsArray = Array.from(breadcrumbRef.current.children, (item: HTMLElement, index: number) => {
         return {
           width: item.offsetWidth,
           index: index,
@@ -157,7 +162,7 @@ const Breadcrumb = (props: IBreadcrumbProps): FunctionComponentElement<IBreadcru
 
     return () =>
       window.removeEventListener('resize', () => {
-        getItemsConfig(itemsArray, breadcrumbWidth as any)
+        getItemsConfig(itemsArray, breadcrumbWidth)
       })
   }, [itemsArray, breadcrumbWidth])
 

components/breadcrumb/demo/basic.md

@@ -9,10 +9,11 @@ order: 0
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Breadcrumb } from '@kdcloudjs/kdesign'
+import type { IBreadcrumbProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
   // 改下面的代码
-  const config = [
+  const config: IBreadcrumbProps['items'] = [
     {
       title: 'KDesign',
       href: '#',

components/breadcrumb/demo/breadcrumb-adaptive.md

@@ -9,10 +9,11 @@ order: 6
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Breadcrumb } from '@kdcloudjs/kdesign'
+import type { IBreadcrumbProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
   // 改下面的代码
-  const config = [
+  const config: IBreadcrumbProps['items'] = [
     {
       title: 'KDesign',
       href: 'https://kingdee.design/',

components/breadcrumb/demo/breadcrumb-color-model.md

@@ -9,10 +9,11 @@ order: 1
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Breadcrumb } from '@kdcloudjs/kdesign'
+import type { IBreadcrumbProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
   // 改下面的代码
-  const config = [
+  const config: IBreadcrumbProps['items'] = [
     {
       title: 'KDesign',
       href: '#',

components/breadcrumb/demo/breadcrumb-icon.md

@@ -9,10 +9,11 @@ order: 2
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Breadcrumb, Icon } from '@kdcloudjs/kdesign'
+import type { IBreadcrumbProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
   // 改下面的代码
-  const config = [
+  const config: IBreadcrumbProps['items'] = [
     {
       title: 'KDesign',
       icon: <Icon type="workbench" />,

components/breadcrumb/demo/breadcrumb-item-dropdown.md

@@ -9,10 +9,11 @@ order: 4
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Breadcrumb } from '@kdcloudjs/kdesign'
+import type { IBreadcrumbProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
   // 改下面的代码
-  const config = [
+  const config: IBreadcrumbProps['items'] = [
     {
       title: 'KDesign',
       href: '#',

components/breadcrumb/demo/breadcrumb-path-href.md

@@ -8,11 +8,12 @@ order: 5
 ```jsx
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Breadcrumb, Icon } from '@kdcloudjs/kdesign'
+import { Breadcrumb } from '@kdcloudjs/kdesign'
+import type { IBreadcrumbProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
   // 改下面的代码
-  const config1 = [
+  const config1: IBreadcrumbProps['items'] = [
     {
       title: 'KDesign',
       href: 'https://kingdee.design/',
@@ -25,7 +26,7 @@ const Demo: React.FC = () => {
       title: 'Breadcrumb',
     },
   ]
-  const config2 = [
+  const config2: IBreadcrumbProps['items'] = [
     {
       title: 'KDesign',
       path: '/KUI',

components/breadcrumb/demo/breadcrumb-separator.md

@@ -9,10 +9,11 @@ order: 3
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Breadcrumb, Icon } from '@kdcloudjs/kdesign'
+import type { IBreadcrumbProps } from '@kdcloudjs/kdesign'
 
 const Demo: React.FC = () => {
   // 改下面的代码
-  const config = [
+  const config: IBreadcrumbProps['items'] = [
     {
       title: 'KDesign',
       href: '#',

components/breadcrumb/interface.ts

@@ -10,7 +10,7 @@ export interface IBreadcrumbProps {
   className?: string // 类名
   colorModel?: ColorModelType // 颜色模式，默认是 'emphasize'
   prefixCls?: string // 样式前缀
-  items: Array<IBreadcrumbItem> // 面包屑导航的各项，支持传入 ReactNode 类型
+  items?: Array<IBreadcrumbItem> // 面包屑导航的各项，支持传入 ReactNode 类型
   separator?: ReactNode // 分隔符，默认是 '/'
   children?: ReactNode // 子元素
   onItemClick?: (item: IBreadcrumbItem, index: number) => void // 点击面包屑导航的回调函数

components/index.tsx

@@ -19,6 +19,8 @@ export type { IAlertProps } from './alert'
 
 export { default as Breadcrumb } from './breadcrumb'
 
+export type { IBreadcrumbProps } from './breadcrumb'
+
 export { default as Button } from './button'
 
 export { default as Card } from './card'