मैं टाइपप्रति में एक पाठ घटक जोड़ रहा हूँ, जो कुछ भिन्न प्रकार का हो सकता है: <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",
    fontWeight: 300,
  },
  h3: {
    fontSize: "28px",
    lineHeight: "40px",
    fontWeight: 400,
  },
  h4: {
    fontSize: "23px",
    lineHeight: "32px",
    fontWeight: 400,
  },
  h5: {
    fontSize: "16px",
    lineHeight: "32px",
    fontWeight: 600,
  },
  h6: {
    fontSize: "13px",
    lineHeight: "24px",
    fontWeight: 600,
  },
  h7: {
    fontSize: "11px",
    lineHeight: "16px",
    fontWeight: 600,
  },
  subtitle1: {
    fontSize: "16px",
    lineHeight: "24px",
    fontWeight: 600,
  },
  subtitle2: {
    fontSize: "12px",
    lineHeight: "16px",
    fontWeight: 600,
  },
  body1: {
    fontSize: "16px",
    lineHeight: "24px",
    fontWeight: 400,
  },
  body2: {
    fontSize: "13px",
    lineHeight: "24px",
    fontWeight: 400,
  },
  button: {
    fontSize: "13px",
    lineHeight: "24px",
    fontWeight: 600,
  },
  caption: {
    fontSize: "11px",
    lineHeight: "16px",
    fontWeight: 400,
  }
}

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 प्रकार की घोषणा में

यह बेमानी लगता है, लेकिन मैं यह जानने के लिए टाइपस्क्रिप्ट पर बहुत अधिक हूं कि मैं बेहतर कैसे कर सकता हूं।

क्या यह अधिक संक्षिप्त/बेहतर तरीके से किया जा सकता है, और यदि हां, तो कैसे?

1
Sventies 7 अक्टूबर 2020, 13:23

1 उत्तर

सबसे बढ़िया उत्तर

आप अनुमानित प्रकार के styles स्थिरांक के संबंध में Styles और type को परिभाषित कर सकते हैं। स्थिरांक का प्रकार प्राप्त करने के लिए हम typeof और प्रकार की कुंजी प्राप्त करने के लिए हम keyof. तब हम Record का उपयोग कर सकते हैं। Styles प्रकार (रिकॉर्ड एक प्रकार है जिसमें सभी एक ही प्रकार की चाबियों का सेट होता है)


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

खेल का मैदान लिंक

1
Titian Cernicova-Dragomir 7 अक्टूबर 2020, 13:30