Typescript中的枚举的多个键声明

如何解决Typescript中的枚举的多个键声明

我要在Typescript中添加一个Text组件，该组件可以是某些不同类型的类型：<Text type='h2'>Hello World</Text>。

我正在使用具有这些类型作为键的样式对象，以便可以从它们派生适当的样式。这种类型应该只是几种可能性中的一种。

import React from 'react'
import { colors } from '../../config'

const getKeyValue = <U extends keyof T,T extends object>(key: U) => (obj: T) => obj[key]

const styles = {
  h1: {
    fontSize: "46px",lineHeight: "64px",fontWeight: 300,},h2: {
    fontSize: "34px",lineHeight: "48px",h3: {
    fontSize: "28px",lineHeight: "40px",fontWeight: 400,h4: {
    fontSize: "23px",lineHeight: "32px",h5: {
    fontSize: "16px",fontWeight: 600,h6: {
    fontSize: "13px",lineHeight: "24px",h7: {
    fontSize: "11px",lineHeight: "16px",subtitle1: {
    fontSize: "16px",subtitle2: {
    fontSize: "12px",body1: {
    fontSize: "16px",body2: {
    fontSize: "13px",button: {
    fontSize: "13px",caption: {
    fontSize: "11px",}
}

interface Style {
  fontSize: string;
  lineHeight: string;
  fontWeight: number;
}

interface Styles {
  h1: Style; h2: Style; h3: Style; h4: Style; h5: Style; h6: Style; h7: Style;
  subtitle1: Style; subtitle2: Style; body1: Style; body2: Style; button: Style; caption: Style;
}

interface Props {
  children: string;
  type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'button' | 'caption';
  color?: string;
  ellipsis?: boolean;
  fontWeight?: any;
  onChange?: any;
}

const Text = ({ children,type,color = colors.darkGrey,ellipsis = false,fontWeight }: Props) => {

  const style = {
    ...getKeyValue<keyof Styles,Styles>(type)(styles),color,minHeight: 25,// TODO: remove this arbitrary height
    textOverflow: ellipsis ? 'ellipsis' : 'none',overflow: ellipsis ? 'hidden' : 'none',whiteSpace: ellipsis ? 'nowrap' : 'none',} as React.CSSProperties

  if (typeof fontWeight !== 'undefined') {
    style.fontWeight = fontWeight
  }

  return <div style={style} >{children}</div>
}

export default Text

这一切都很好，但是我要声明样式对象的键三次：

• 在样式对象本身中
• 在样式界面中
• 在类型为type的声明中

这感觉很多余，但是我对Typescript实在是个菜鸟，不知道该如何做得更好。

能否以更简洁/更好的方式完成此操作？如果可以，怎么办？

解决方法

您可以根据Styles常数的推断类型来定义type和styles。要获取常量的类型，我们可以使用typeof并获取类型的键，我们可以使用keyof。然后，我们可以使用Record来创建Styles类型（记录是具有给定键集合的所有类型都相同的类型）

type StyleType = keyof typeof styles
type Styles = Record<StyleType,Style>

Playground Link