इस पर दस्तावेज़ स्पष्ट नहीं हो सकता है, लेकिन आपको संपत्ति को अपने Props इंटरफ़ेस में वैकल्पिक के रूप में चिह्नित करना होगा:

interface Props {
    name: string;
    optional?: string;
}

यह प्रतीत नहीं होता कि रिलीज नोट क्या कहते हैं:

export interface Props {
    name: string;
}

// ...

function Greet({ name = "world" }: Props) {
    return <div>Hello {name.toUpperCase()}!</div>;
}

प्रोप को वैकल्पिक बनाने का अर्थ यह भी है कि जब आप घटक के बाहर प्रॉप्स (एक परीक्षण में) तक पहुंचते हैं, तो टाइप सिस्टम यह गारंटी नहीं देता है कि प्रोप मौजूद है भले ही वह हमेशा मौजूद हो।

उदाहरण:

const wrapper = shallow(<Test/>);

// optional is string | undefined instead of string
const optional = wrapper
        .find(Component)
        .props()
        .optional;

यदि optional एक फ़ंक्शन था, तो आपको इसे निष्पादित करने से पहले यह जांचना होगा कि यह मौजूद है। एक उदाहरण यह है कि यदि आप एक डिफ़ॉल्ट onClick प्रोप प्रदान करते हैं जो सिर्फ preventDefault कॉल करता है।

टाइपस्क्रिप्ट 3.1 या उससे अधिक के साथ आपको लिखना चाहिए:

export interface Props {
    name: string;
}

function Greet(props: Props) {
    return <div>Hello {props.name.toUpperCase()}!</div>;
}
Greet.defaultProps = {
  name: "world",
} as Partial<Props>; // Good practice, without it you could use a number as default prop and TypeScript wouldn't complain…

const component = <Greet />; // no errors

क्या यह बग है कि डिफ़ॉल्ट प्रथमाक्षर सुविधा का उपयोग करना डिफ़ॉल्ट प्रॉप्स के लिए काम नहीं करता है? ऐसा लगता है कि दिया गया एक प्रतिगमन है कि जारी नोटों में दिया गया उदाहरण नवीनतम टाइपस्क्रिप्ट संस्करण पर काम नहीं करता है।

@tbassetto इसके साथ समस्या यह है कि TS आपको वास्तव में डिफ़ॉल्ट मान प्रदान करने के लिए बाध्य नहीं करता है:

import React from 'react';

interface Props {
  myProp: string;
}

const Comp = (props: Props) => {
  return (
    <div>
      {props.myProp.toUpperCase()}
    </div>
  );
};

Comp.defaultProps = {

} as Pick<Props, 'myProp'>;

const comp = <Comp />;

दूसरी कष्टप्रद बात यह है कि आपको यह पहली बार करना है: यदि मैं Comp React.FC<Props> टाइप करता हूं, तो defaultProps अच्छी तरह से टाइप किया जाता है, लेकिन अन्य समस्याएं उत्पन्न होती हैं ।

सब सब में, टाइपस्क्रिप्शंस JSX / React का समर्थन अभी एक अजीब नहीं-बिल्कुल सही स्थिति में है, लेकिन ऐसा लगता है जैसे सब कुछ ठीक है (कम से कम मेरी आँखों में - मुख्य रूप से, मुझे कोई ठोस नहीं मिल सकता है वर्तमान में 3.4.5 के लिए एक सुरक्षित तरीके से स्टेटलेस रिएक्ट घटकों को करने के लिए "आधिकारिक" तरीका क्या है, इस पर नोट्स)।

हालाँकि मैं हर किसी को चारों ओर काम करते हुए देख रहा हूँ, फिर भी मैं उनमें से किसी को भी काम में लेने में असमर्थ हूँ।

मैं ३.३.३ संस्करण पर हूँ

export interface Props {
  shouldTruncateContent: boolean;
}

const Alert: React.FunctionComponent<Props> = ({
  children,
  shouldTruncateContent = false
}) => {
  return (
        <S.Content shouldTruncateContent={shouldTruncateContent} size="fill">
          {children}
        </S.Content>
  );
};

Alert.defaultProps = {
  shouldTruncateContent: false
} as Pick<Props, 'shouldTruncateContent'>;

export default Alert;

किसी को भी क्यों यह अभी भी त्रुटि फेंकता में कोई अंतर्दृष्टि है

TS2741: Property 'shouldTruncateContent' is missing in type '{ children: string; }' but required in type 'Props'.

मैंने # 27425 और # 519 में भी प्रस्तावित सभी सुधारों की कोशिश की है।

@tomspeak या तो मेरा वर्कअराउंड या @Hotell का वर्जन है (हालाँकि यह सभी को

हालाँकि मैं हर किसी को चारों ओर काम करते हुए देख रहा हूँ, फिर भी मैं उनमें से किसी को भी काम में लेने में असमर्थ हूँ।

मैं ३.३.३ संस्करण पर हूँ

export interface Props {
  shouldTruncateContent: boolean;
}

const Alert: React.FunctionComponent<Props> = ({
  children,
  shouldTruncateContent = false
}) => {
  return (
        <S.Content shouldTruncateContent={shouldTruncateContent} size="fill">
          {children}
        </S.Content>
  );
};

Alert.defaultProps = {
  shouldTruncateContent: false
} as Pick<Props, 'shouldTruncateContent'>;

export default Alert;

किसी को भी क्यों यह अभी भी त्रुटि फेंकता में कोई अंतर्दृष्टि है

TS2741: Property 'shouldTruncateContent' is missing in type '{ children: string; }' but required in type 'Props'.

मैंने # 27425 और # 519 में भी प्रस्तावित सभी सुधारों की कोशिश की है।

आपको बस बनाने की जरूरत है TruncateContent: बूलियन; वैकल्पिक shouldTruncateContent?: boolean;

इस पर दस्तावेज़ स्पष्ट नहीं हो सकता है, लेकिन आपको संपत्ति को अपने Props इंटरफ़ेस में वैकल्पिक के रूप में चिह्नित करना होगा:

interface Props {
    name: string;
    optional?: string;
}

मैं हर जगह इस वैकल्पिक प्रकार का उपयोग कर रहा हूं। क्यों गिरा वोट? कोई समझा सकता है?

@ralexhassle , मैं नीचे के वोटों की व्याख्या नहीं कर सकता, लेकिन मैं समझा सकता हूं कि निश्चित रूप से एक घटक की वैकल्पिक संपत्ति टाइप करने का एक सही तरीका है।
आप defaultProps का उपयोग करना पसंद कर सकते हैं, जो प्रश्न का उदाहरण उपयोग नहीं कर रहा है, लेकिन जहाँ तक मेरा सवाल है, वैकल्पिक गुणों को वैकल्पिक रूप से चिह्नित करना संभवतः पूरी तरह से ठीक है ...

इस मुद्दे का उद्देश्य यह है कि सहारा वैकल्पिक नहीं हैं, लेकिन एक डिफ़ॉल्ट मूल्य है (इसलिए घटक का उपयोग करते समय इसे हटा दिया जा सकता है)। यदि आप ? साथ प्रोप को वैकल्पिक चिह्नित करते हैं तो TS मान लेता है कि यह अपरिभाषित हो सकता है और आपको उस मामले को संभालने के लिए मजबूर करता है। हालांकि, यह कभी भी अपरिभाषित नहीं होगा क्योंकि डिफ़ॉल्ट मान है। डाउनवोट्स इसलिए हैं क्योंकि टिप्पणीकार ने इस मुद्दे को समझा नहीं था और 3.0 रिलीज नोटों के विपरीत कुछ प्रस्तावित किया था।

@RyanCavanaugh ने इस मुद्दे को बंद क्यों किया है?

शायद मैं इसे याद कर रहा हूं, लेकिन बहुत सारे वर्कअराउंड के बावजूद मुझे वास्तविक जवाब नहीं दिख रहा है?

PS: टाइपस्क्रिप्ट v4 का उपयोग करना

आप इसे इस तरह से कर सकते हैं, यहां प्रॉप्स में गुण वैकल्पिक पैरामीटर हैं और आगे घटक में उपयोग किए जाते हैं।

interface Props {
  children: ReactNode;
  properties?: Record<string, unknown>;
}

const defaultProps: Props = {
  children: '',
  properties: {
    marginTop: 32,
    marginLeft: 0,
    marginBottom: 8,
    marginRight: 0,
  },
};

const RadioListLabel: React.FC<Props> = ({
  children,
  properties = defaultProps.properties,
}) => (
  <View
    margin={[
properties ? properties.marginTop : 0
        properties ? properties.marginLeft : 0
        properties ? properties.marginBottom : 0
        properties ? properties.marginRight : 0
      ]}
  >
    <Text size="m" variant="heading2" lineHeight="body">
      {children}
    </Text>
  </View>
  )

@lakhmeranikita इस मुद्दे का उद्देश्य एक प्रोप प्रकार को वैकल्पिक के रूप में चिह्नित करने से बचना है।

मैं फ़ंक्शन डिफ़ॉल्ट तर्क या अन्य प्रस्तावों को ठीक से जांचने के लिए टाइप करने में असमर्थ था। एकमात्र व्यावहारिक समाधान जो मैं पा रहा था वह यह है:

import React from "react";

type DefaultProps = { optionalProp: number };
type Props = {
  requiredProp: "some_string" | "other_string";
} & DefaultProps;

export const BaseComponent = (props: Props) => {
  const { requiredProp, optionalProp } = props;
  return (
    <div>
      {requiredProp} {optionalProp}
    </div>
  );
};

BaseComponent.defaultProps = {
  optionalProp: 0,
} as Partial<DefaultProps>;

const comp = <BaseComponent requiredProp="some_string" />;