子组件的类型定义答案

【问题标题】：Type Definitions for sub components子组件的类型定义
【发布时间】：2019-11-23 08:17:18
【问题描述】：

我已经为我的样式化组件定义了子组件，并且正在尝试为其提供类型定义 - TSC 抱怨在类型“StyledComponentClass”上不存在“属性”PrimaryText。同样对于“SubText”。

export const Tab = styled(NavLink)`
    border: 1px solid rgba(0, 119, 204, 0.5);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08), 0 2px 15px 0 rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    height: 60px;
    min-width: 125px;
    padding: 10px 15px;
    cursor: pointer;
`;

Tab.PrimaryText = styled(Box)`
    height: 22px;
    color: #3d464d;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
`;

Tab.SubText = styled(Box)`
    height: 15px;
    color: #525d66;
    font-size: 11px;
    line-height: 15px;
`;

如何指定类型？看了很多遍。几乎没有任何参考。

【问题讨论】：

标签： reactjs typescript styled-components

【解决方案1】：

您这样做的目的是什么？您可以使用一些复杂的方法来创建合并类型，但这似乎并不值得。

这样的事情不会是一种选择吗？唯一的区别是 Tab 样式的用法现在改为 Tab.Main （或任何你称之为的）。

export const Tab = {
  Main: styled(NavLink)`
    border: 1px solid rgba(0, 119, 204, 0.5);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08), 0 2px 15px 0 rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    height: 60px;
    min-width: 125px;
    padding: 10px 15px;
    cursor: pointer;
  `,
  PrimaryText: styled(Box)`
    height: 22px;
    color: #3d464d;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
  `,
  SubText: styled(Box)`
    height: 15px;
    color: #525d66;
    font-size: 11px;
    line-height: 15px;
  `,
};

【讨论】：