如何为样式组件的组合创建接口?

Question

我正在尝试为样式组件的组合做一个接口:

import styled from "styled-components"
const Title = styled.div``
const TitleNumber = styled.div``
const TitleNumberDigit = styled.div``
const TitleName: React.ComponentType = styled.div``
interface IUiStepTitleNumber extends React.ComponentType {
Digit: React.ComponentType
}
interface IUiStepTitle extends React.ComponentType {
Number: IUiStepTitleNumber
Name: React.ComponentType
}
const UiStepTitle : IUiStepTitle = Object.assign(Title, {
Number: Object.assign(TitleNumber, {
Digit: TitleNumberDigit,
}),
Name: TitleName,
})
export default UiStepTitle

对于这个用例:

<UiStepTitle>
<UiStepTitle.Number>
<UiStepTitle.Number.Digit>
{stepNumber}
</UiStepTitle.Number.Digit>
</UiStepTitle.Number>
<UiStepTitle.Name>{stepTitle}</UiStepTitle.Name>
</UiStepTitle>

但是我有一个错误，从typescript

An interface can only extend an object type or intersection of object types with statically known members

如何正确组成这样的接口?

Answer 1

最简单的解决方案是不使用组件作为命名空间。

export const Title = styled.div``
export const TitleNumber = styled.div``
export const TitleNumberDigit = styled.div``
export const TitleName: React.ComponentType = styled.div``

，像

一样使用

import { Title, TitleNumber, TitleNumberDigit, TitleName } from './Title' 
...

<Title>
<TitleNumber>
<TitleNumberDigit>
{stepNumber}
</TitleNumberDigit>
</TitleNumber>
<TitleName>{stepTitle}</TitleName>
</Title>

如果你真的有一个想通过接口提供组件的用例，你可以这样构建你的接口:

interface Title {
Body: FC<BodyProps>;
Number: FC<NumberProps>;
...
}
const fancyTitle: Title = {
Body: FancyTitle,
Number: FancyNumber,
...
}
// dummy factory
export const createTitle = (): Title => fancyTitle;

使用方式:

import { createTitle } from './Title'
const Title = createTitle();
(
<Title.Body>
<Title.Number>
...
</Title.Number>
...
</Title.Body>
);