React + Typescript导出组件类型问题

Question

组件部分

interface IShowCardProps {}
interface IShowCardTextItemProps {}
// 组件
export const ShowCard = (props: Readonly<IShowCardProps>) => {...}
export const ShowCardTextItem = (props: Readonly<IShowCardTextItemProps>) => {...} 
ShowCard.TextItem = ShowCardTextItem;
export default connect<undefined, undefined, IShowCardProps>()(ShowCard);

使用组件页面

import ShowCard from '...'
const {TextItem} = ShowCard

问题是：为什么const {TextItem} = ShowCard获取不到类型，求大佬就解释一下？就算我加了类型也不行

interface IShowCardProps {
TextItem: typeof ShowCardTextItem;
}

Answer 1

因为你的ShowCard是 export const ShowCard = (props: Readonly<IShowCardProps>) => {...} 。所以 import ShowCard 时，其类型是 (props: Readonly<IShowCardProps>)=> ...，另外你的 IShowCardProps 也只是 ShowCard 的参数 props 类型，说以你这里增加TextItem，是往参数里加。
可以这么改动:

const InternalShowCard = (props: Readonly<IShowCardProps>) => {...}

type InternalShowCardType = typeof InternalShowCard

interface IShowCard extends InternalShowCardType {
    TextItem: typeof ShowCardTextItem;
}

const ShowCard = InternalShowCard as IShowCard

ShowCard.TextItem = ShowCardTextItem;

export {
   ShowCard
}

可以参考下 ant-design 中 Form 的类型 https://github.com/ant-design...