如何解构打字稿界面并在另一个界面中使用它？

Question

我正在探索打字稿模式，但不确定是否可以完成。

本质上，在我的 React 组件中，我有以下界面：

interface IPaper {
  className?: string;
  children: React.ReactNode;
  elevation?: 'low' | 'medium' | 'high';
}

虽然上面的例子很好，但我想探索一些更智能、更易于维护的东西。具体来说，使用当前在 ThemeParameters 示例中找到的键，如下所示：

  interface ThemeParameters extends StorybookIntegration {
    ...
    
    elevation: {
      low: string;
      medium: string;
      high: string;
    };
  
    ...
  }

在实践中，我的组件看起来类似于下面的示例，组件的 elevation 属性与我的 ThemeParameters 中的任何高程设置相耦合。这样，如果我修改了我的主题，它将被组件上的界面自动捕获。

interface IPaper {
  className?: string;
  children: React.ReactNode;
  elevation?: ThemeParameters['elevation'];
}

const Paper = ({ className, children, ...props }: IPaper): JSX.Element => (
  <Wrapper className={className} elevation="low" {...props}>
    {children}
  </Wrapper>
);

const Wrapper = styled.div<{ elevation: string }>`
  box-shadow: ${({ theme, elevation }) => theme.elevation[elevation]};
`;

不幸的是，这并不完全有效。关于如何使用打字稿进行设置的任何聪明想法？

---

解决方案

使用以下最佳答案中的建议的示例。

Answer 1

ThemeParameters['elevation']

是这种类型：

{
  low: string;
  medium: string;
  high: string;
}

---

所以你想要对象的键。这就是 keyof 的用途：

keyof ThemeParameters['elevation']

这是哪种类型：

'low' | 'medium' | 'high'

Playground