Material-ui: withStyles द्वारा लौटाए गए घटक में टाइपप्रति प्रकार त्रुटि ()

को निर्मित 28 सित॰ 2017 · 55टिप्पणियाँ · स्रोत: mui-org/material-ui

टाइपस्क्रिप्ट में withStyles() हॉक का उपयोग करते समय, लौटाए गए घटक का उपयोग करने का प्रयास करते समय मुझे निम्न त्रुटि मिल रही है:

Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<App> & Readonly<{ children?: ReactNode; }> & Reado...'.
  Type '{}' is not assignable to type 'Readonly<WithStyles<"main">>'.
    Property 'classes' is missing in type '{}'.

[x] मैंने इस भंडार के मुद्दों की खोज की है और मुझे विश्वास है कि यह डुप्लिकेट नहीं है।

ऐसा प्रतीत होता है कि प्रकार की परिभाषा में यह परिवर्तन इस समस्या से संबंधित हो सकता है।

अपेक्षित् व्यवहार

नीचे दिए गए App घटक कोड को देखते हुए, मुझे 1.0.0-बीटा.10 में किए गए प्रकार की त्रुटि के बिना घटक <App /> का उपयोग करने में सक्षम होना चाहिए।

वर्तमान व्यवहार

नीचे दिए गए App घटक कोड को देखते हुए, उपरोक्त त्रुटि में <App /> परिणामों का उपयोग करने का प्रयास किया जा रहा है।

कोड

import * as React from 'react';
import { withStyles } from 'material-ui/styles';

const styles = {
    main: {
        marginTop: 48,
        padding: 10,
    },
    foo: {
        margin: 0,
    },
};

interface Props {
    message: string;
};

type ClassNames = { classes: { [className in keyof typeof styles]: string } };

class App extends React.Component<Props & ClassNames> {
    render() {
        const { classes, message } = this.props;
        return (
            <div className={classes.main}>
                <div className={classes.foo} >
                    Hello World! {message}
                </div>
            </div>
        );
    }
}

export default withStyles(styles)(App);

संदर्भ

1.0.0-बीटा.10 में कोड ने ठीक काम किया, जब मैंने 1.0.0-बीटा.12 में अपग्रेड किया तो मुझे टाइप त्रुटि मिली।

प्रदान किए गए कोड स्निपेट में मैंने keyof typeof styles चाल का उपयोग किया ताकि मुझे दो बार वर्ग नामों की सूची को परिभाषित करने की आवश्यकता न हो (मैं दोहराव को दृढ़ता से नापसंद करता हूं)। मैंने अन्य विविधताओं की भी कोशिश की है:

type ClassNames = WithStyles<keyof typeof styles>;

और इसे और अधिक सामान्य तरीके से करना (जैसा कि style.spec.tsx में देखा गया है):

type ComponentClassNames = 'main' | 'foo';
type ClassNames = WithStyles<ComponentClassNames>;

मुझे अब भी वही त्रुटि मिलती है।

ऐसा लगता है कि पिछली प्रकार की परिभाषा एक घटक लौटाएगी जिसका प्रोप प्रकार StyledComponentProps जिसमें वैकल्पिक classes संपत्ति होगी। नई परिभाषा...

<P, C extends React.ComponentClass<P & StyledComponentProps<Names>>>(
    component: C
  ): C;

...उसी प्रकार C को घटक के रूप में लौटाता है, इसका मतलब है कि ClassNames जो कि वैकल्पिक रूप से चिह्नित नहीं है, लौटा घटक के लिए प्रचारित करता है। मैंने यहां Partial<> के उपयोग का उल्लेख किया है जो मुझे लगता है कि यह एक भद्दा हैक है।

आपका पर्यावरण

| टेक | संस्करण |
|--------------|------------|
| सामग्री-यूआई | 1.0.0-बीटा.12 |
| प्रतिक्रिया | १५.६.१ |
| ब्राउज़र | क्रोम ६१.०.३१६३.१०० |

discussion typescript

स्रोत

cfilipov

👍12

सबसे उपयोगी टिप्पणी

मैंने recompose . का उपयोग करके हल किया

उदाहरण

import { StyleRules, Theme, withStyles } from "material-ui/styles";
import * as React from "react";
import { compose } from "recompose";

interface IProps {
    classes?: any; // <-- add question mark
    text: string;
}

const styles = (theme: Theme): StyleRules => ({
    root: {

    },
});

@compose(
    withStyles(styles),
)
export class MyComponent extends React.Component<IProps> {
    render() {
        const { classes, text } = this.props;
        return (
            <div className={classes.root}>
                {text}
            </div>
        );
    }
}

isman-usoh 23 अक्तू॰ 2017

👍7 ❤1

सभी 55 टिप्पणियाँ

@cfilipov एक घटक वर्ग को StyledComponentProps बजाय WithStyles उपयोग करना चाहिए, और यदि सख्त प्रकार की जांच मोड में आपको निकालने के लिए गैर-शून्य दावा ऑपरेटर ! का उपयोग करने की आवश्यकता है classes । क्लास डेकोरेटर के रूप में withStyles के उपयोग की अनुमति देने के लिए यह एक समझौता है। टाइपस्क्रिप्ट में क्लास डेकोरेटर इस सीमा से ग्रस्त

क्लास डेकोरेटर के रूप में withStyles का उपयोग करने का समर्थन न करें
आवश्यक है कि आप सजाए गए घटक प्रकार के तत्व का निर्माण करते समय एक डमी classes प्रोप पास करें (पिछला समझौता, जो यकीनन अधिक कष्टप्रद था )
इसके लिए आवश्यक है कि classes को घटक के अंदर अशक्त माना जाए, जिससे आपको ! ऑपरेटर का उपयोग करने के लिए मजबूर किया जाए जब आप इसके क्षेत्रों ( वर्तमान समझौता ) तक

मैं अत्यधिक अनुशंसा करता हूं कि यदि आपके घटक में कोई राज्य नहीं है तो आप एक स्टेटलेस कार्यात्मक घटक का उपयोग करें, जिसके लिए कम प्रकार के एनोटेशन की आवश्यकता होगी और अधिक प्रकार सुरक्षित होगा:

export default withStyles(styles)<Props>(({ classes, message }) => (
  <div className={classes.main}>
    <div className={classes.foo}>
      Hello World! {message}
    </div>
  </div>
));

pelotom 28 सित॰ 2017

❤4 👍4

मैंने यहां आंशिक <> के उपयोग का उल्लेख किया

यदि आप उस टिप्पणी के लिए मेरे फॉलोअप को पढ़ते हैं तो आप देखेंगे कि Partial<> की आवश्यकता नहीं है।

pelotom 29 सित॰ 2017

यदि आप उस टिप्पणी के लिए मेरे फॉलोअप को पढ़ते हैं तो आप देखेंगे कि आंशिक<> की आवश्यकता नहीं है।

मैंने Partial<> संबंध में आपकी टिप्पणी देखी। StyledComponentProps अनिवार्य रूप से एक ही चीज़ के बराबर होता है (यह उस परिभाषा में Partial<> का उपयोग कर रहा है)। इसके साथ मेरी पकड़ अब वर्ग के नाम ! (जैसा कि आपने उल्लेख किया है) के साथ एक्सेस किया जाना चाहिए। मुझे लगता है कि एक डमी classes प्रोप पास करना या ! के उपयोग की आवश्यकता दोनों खराब समझौता हैं।

स्पष्ट करने के लिए, मुझे लगता है कि मेरे पास जो मूल मुद्दा है वह टाइपस्क्रिप्ट की एक प्रयोगात्मक सुविधा की सीमा के आसपास काम करने के प्रयास में हॉक के लिए एक प्रतिगमन शुरू करने का विकल्प है। मैं कुछ पूर्वाग्रहों को स्वीकार करता हूं क्योंकि मुझे सज्जाकारों की परवाह नहीं है, जबकि अन्य स्पष्ट रूप से करते हैं, लेकिन यहां ट्रेडऑफ़ मुझे समझ में नहीं आता है।

cfilipov 29 सित॰ 2017

@cfilipov withStyles टाइपिंग का मेरा पहला रिफैक्टर विकल्प (1) चुनना था, यानी क्लास डेकोरेटर के रूप में withStyles का उपयोग करने की कीमत पर टाइपिंग को क्लास और फंक्शन दोनों घटकों के लिए पूरी तरह से सही बनाना था। . मुझे तब फीडबैक मिला कि डेकोरेटर सिंटैक्स का उपयोग करना एक लोकप्रिय अनुरोध था, इसलिए मैंने विकल्प (3) पर स्विच किया। मुझे उस निर्णय पर फिर से विचार करने में प्रसन्नता हो रही है; मैं भी सज्जाकारों को उनकी वर्तमान अर्ध-कार्यात्मक स्थिति में समर्थन करने के लिए टाइप सुरक्षा पसंद करूंगा।

pelotom 29 सित॰ 2017

👍2

हाँ, मैं इस तरह के एक लोकप्रिय अनुरोध का समर्थन करने की इच्छा को समझता हूँ। मैं सज्जाकारों का भी उपयोग करना चाहता हूं, लेकिन मैं हर बार (मुई के बाहर) उनके साथ कई मुद्दों में भागता रहता हूं, इसलिए मैंने व्यक्तिगत रूप से उनका उपयोग तब तक नहीं करने का फैसला किया जब तक कि वे तैयार न हों।

ऐसा लगता है कि आप मेरी चिंता साझा करते हैं और मेरे पास जोड़ने के लिए और कुछ नहीं है इसलिए उम्मीद है कि अन्य लोग इस दिशा में प्रतिक्रिया दे सकते हैं ताकि इसे प्रभावित करने में मदद मिल सके।

cfilipov 29 सित॰ 2017

👍3

मैंने यह देखने के लिए बीटा.13 से बीटा.13 पर स्विच किया कि क्या कुछ बदल गया है और हाँ यह एक वास्तविक मुद्दा है। मेरे 2 सेंट यहां फेंकने के लिए, मेरे लिए, सज्जाकार प्रयोगात्मक हैं। वे स्पष्ट रूप से भविष्य में बदले जा सकते हैं। और तब तक मैं 100% सटीक तरीके का पूरा समर्थन करूंगा। चीजों को काम करने के लिए मेरे प्रकार को हैक करने के लिए मेरे पास सुसंगत प्रकार की सुरक्षा होगी।

marcusjwhelan 2 अक्तू॰ 2017

👍2

8550 आगे के सबूत की तरह दिखता है कि लोग इससे भ्रमित हैं, और हमें `@withStyles()` को डेकोरेटर (टाइपस्क्रिप्ट में) के रूप में समर्थन नहीं करने पर विचार करना चाहिए।

pelotom 5 अक्तू॰ 2017

यदि हम टाइपिंग को सही करते हैं तो यह एक वर्ग को "सजाने" जैसा दिखेगा:

type NonStyleProps = {
  text: string
};

const styles = {
  root: {
    backgroundColor: 'red'
  }
};

const DecoratedComponent = withStyles(styles)(
  class extends React.Component<NonStyleProps & WithStyles<'root'>> {
    render() {
      return (
        <div className={this.props.classes.root}>
          {this.props.text}
        </div>
      );
    }
  }
);

pelotom 5 अक्तू॰ 2017

👍5 🎉1

@pelotom मुझे अभी इस मुद्दे के कारण बीटा.10 से आगे बढ़ना है। मैंने पहले Redux की कनेक्ट विधि के साथ एक वर्ग की स्टाइलिंग के बारे में टिप्पणी की थी। मुझे लगता है कि यह अपेक्षाकृत आसान और मजबूत है। #8059 में तीसरी टिप्पणी स्वयं प्रकार के साथ है।

marcusjwhelan 5 अक्तू॰ 2017

@pelotom इस मुद्दे पर हमें शिक्षित करने के लिए बहुत बहुत धन्यवाद। मैं TS डेकोरेटर्स का एक बड़ा उपयोगकर्ता हूं, लेकिन उस उदाहरण में, मुझे बेहतर प्रकार की सुरक्षा के लिए withStyles लिए इसके डेकोरेटिंग सपोर्ट को छोड़ने में खुशी होगी।

wcandillon 5 अक्तू॰ 2017

👍2

हमें एक डेकोरेटर (टाइपस्क्रिप्ट में) के रूप में @withStyles() का समर्थन नहीं करने पर विचार करना चाहिए।

@pelotom मैं व्यक्तिगत रूप से इस बदलाव के पक्ष में हूं। @sebald आप यहाँ क्या करना चाहते हैं?

oliviertassinari 5 अक्तू॰ 2017

👍1

यह एक साधारण परिवर्तन है; यदि आप इसके साथ जाना चाहते हैं तो मैंने आगे बढ़कर एक पीआर खोला

pelotom 5 अक्तू॰ 2017

🎉1

@pelotom typings अभी भी काम करता है, तो मैं उन्हें इस तरह इस्तेमाल किया होगा?

interface IStyles {
    // styles interface
}
interface IHeaderInfoStyles {
    classes: any;
}
interface IHeaderInfoProps {
    // properties resulting from dispatches
}
interface IHeaderInfoInjectedProps {
   // props injected from parent if any
}
interface IHeaderInfoDispatchProps {
    // dispatches
}
interface IHeaderInfoState {
    // your state for the class
}

type HeaderInfoProps = IHeaderInfoProps & IHeaderInfoInjectedProps & IHeaderInfoDispatchProps & IHeaderInfoStyles;

class HeaderInfo extends Component<HeaderInfoProps, IHeaderInfoState> {

export const HeaderInfo_container = withStyles<IHeaderInfoInjectedProps, IStyles>(styles)(
    connect<IHeaderInfoProps, IHeaderInfoDispatchProps, (IHeaderInfoInjectedProps & IHeaderInfoStyles)>(mapStateToProps, mapDispatchToProps)(HeaderInfo),
);

marcusjwhelan 6 अक्तू॰ 2017

@marcusjwhelan withStyles अब 2 प्रकार के पैरामीटर नहीं लेता है, और आपको शैलियों के लिए एक प्रकार पैरामीटर प्रदान नहीं करना चाहिए (इसे styles से अनुमान लगाया जा सकता है)। इसके बजाय आपको लिखने में सक्षम होना चाहिए

withStyles(styles)<NonStyleProps>(...);

यदि आप mapStateToProps और mapDispatchToProps मैं आपको यह दिखाने में सक्षम हो सकता हूं कि यह आपके उदाहरण के लिए कैसा दिखेगा।

pelotom 6 अक्तू॰ 2017

टीएल; डॉ; चलो परिवर्तन करते हैं और देखते हैं कि प्रतिक्रिया क्या है, मुझे लगता है

@oliviertassinari @pelotom _(ツ)_/¯ मैं सज्जाकारों का उपयोग नहीं करता, इसलिए व्यक्तिगत रूप से, मैं वास्तव में इस बदलाव की परवाह नहीं करता, क्योंकि मैं प्रभावित नहीं हूं। लेकिन ऐसा लगता है कि बहुत से लोग इस "फीचर" की परवाह करते हैं। इसलिए हमने इसे पहले स्थान पर जोड़ा। यही IMHO है जिसकी यहाँ प्राथमिकता है।

मैं withStyles के परिवर्तनों से बहुत खुश हूं, लेकिन जब आप अन्य अधिक कार्यात्मक पुस्तकालयों पर एक नज़र डालते हैं, जैसे ramda या recompose , तो टाइपिंग उतनी सख्त नहीं है, न ही वे सुपर टाइप-सुरक्षित हैं। अक्सर बार आपको एक सामान्य में गुजरना पड़ता है, जो किसी फ़ंक्शन के वापसी मूल्य का प्रतिनिधित्व करता है। सुंदर नहीं है लेकिन यह 99.9% उपयोगकर्ताओं के लिए काम करेगा।

हम डेकोरेटर का उपयोग करने वाले लोगों के लिए काम करने वाली पुरानी टाइपिंग को वापस क्यों नहीं ला सकते हैं? क्योंकि इसमें दो जेनरिक थे, हम दोनों टाइपिंग को साथ-साथ करने में सक्षम हो सकते हैं।

साथ ही, मैं थोड़ा उलझन में हूं कि सजावटी लोगों के साथ लोगों के मुद्दे क्या हैं ("काम नहीं कर रहे" के संबंध में)। एंगुलर और https://nestjs.com/ जैसे लिब्स आखिरकार उनका भारी उपयोग करते हैं। हमारे मामले में, लोग केवल सहारा में WithStyles जोड़ सकते हैं और ठीक हैं।

sebald 6 अक्तू॰ 2017

@सेबाल्ड

हम डेकोरेटर का उपयोग करने वाले लोगों के लिए काम करने वाली पुरानी टाइपिंग को वापस क्यों नहीं ला सकते हैं? क्योंकि इसमें दो जेनरिक थे, हम दोनों टाइपिंग को साथ-साथ करने में सक्षम हो सकते हैं।

मुझे नहीं पता तुम्हारा क्या मतलब है। ऐसा कोई टाइपिंग कभी नहीं था जो लोगों को सज्जाकार का दर्द रहित उपयोग करने की अनुमति देता हो। पहला कार्यान्वयन #8267 से हुआ, जो यह था कि आप एक डमी classes प्रोप पारित किए बिना सजाए गए घटक के तत्व का निर्माण नहीं कर सके, उदाहरण के लिए <StyledComp classes={{} as any} /> । दूसरा (वर्तमान) कार्यान्वयन विपरीत समस्या से ग्रस्त है, कि घटक वर्ग के भीतर classes संभावित रूप से undefined के रूप में देखा जाता है। यदि आप टाइपस्क्रिप्ट डेकोरेटर्स को उनके वर्तमान स्वरूप में उपयोग करना चाहते हैं, तो वे आपके लिए केवल 2 विकल्प हैं; अपना ज़हर उठाएं।

तीसरा तरीका सही प्रकार का उपयोग कर रहा है, ताकि classes को कक्षा के भीतर परिभाषित किया जा सके लेकिन एक प्रोप के रूप में पारित करने की आवश्यकता नहीं है। उन दोनों शर्तों को पूरा करने के लिए, आपको सज्जाकारों को छोड़ना होगा।

pelotom 6 अक्तू॰ 2017

@pelotom हाँ, क्षमा करें। आप सही हे। सच में मेरा दिन नहीं है... तो चलो विलीन हो जाते हैं!

sebald 6 अक्तू॰ 2017

@सेबाल्ड

साथ ही, मैं थोड़ा उलझन में हूं कि सजावटी लोगों के साथ लोगों के मुद्दे क्या हैं ("काम नहीं कर रहे" के संबंध में)। एंगुलर और https://nestjs.com/ जैसे लिब्स आखिरकार उनका भारी उपयोग करते हैं।

मुझे यकीन नहीं है कि वे कोणीय में कैसे उपयोग किए जाते हैं, लेकिन निश्चित रूप से ऐसे मामलों का उपयोग किया जाता है जहां सजावटी का दर्द रहित उपयोग किया जा सकता है; मूल रूप से यदि डेकोरेटर को उस वर्ग के प्रकार को बदलने की आवश्यकता नहीं है जिसे वह सजा रहा है, तो वे ठीक काम करते हैं। हमारे यहां ऐसी स्थिति नहीं है; withStyles को उस घटक के प्रकार को बदलने की जरूरत है जिसे वह सजाता है।

pelotom 6 अक्तू॰ 2017

@pelotom हाँ, बिल्कुल। यह सिर्फ उत्परिवर्तन है जो खराब है। वास्तव में, जिस तरह से TS वर्तमान में डेकोरेटर लागू करता है वह कोणीय उपयोगकर्ताओं के लिए भी अच्छा हो सकता है, क्योंकि डेकोरेटर AFAIK ने ढांचे के साथ अनुबंध स्थापित किया है, जैसे "इस वर्ग को एक घटक के रूप में पंजीकृत करें" या "मेटा डेटा जोड़ें ताकि मैं इसे DI में उपयोग कर सकूं "... भगवान भी इस बारे में लिखने से मुझे लगता है

sebald 6 अक्तू॰ 2017

@pelotom जिस तरह से मेरे पास प्रकार हैं, वह मेरे घटकों के लिए टाइप सुरक्षा प्रदान करता है। जब घटकों की बात आती है तो वर्तमान में प्रकारों में कोई प्रकार की सुरक्षा नहीं होती है। मेरे उदाहरण में इंजेक्शनप्रॉप्स वे प्रकार हैं जो घटक द्वारा काम करने के लिए आवश्यक हैं। कनेक्ट के प्रकार react-redux से प्रॉप्स के होने चाहिए जो कि mapStateToProps और DispatchProps से आते हैं जो mapDispatchToProps से आते हैं।

अंत में इंजेक्शनप्रॉप होने की आवश्यकता है ताकि मेरे मूल घटक को पता चले कि मुझे उन्हें इंजेक्ट करने की आवश्यकता है या मेरी परियोजना संकलित नहीं होगी। (इसी सब की मेरी इच्छा थी)। क्या यह परिवर्तन इस प्रकार की सुरक्षा में वापस माइग्रेट होने जा रहा है?

marcusjwhelan 6 अक्तू॰ 2017

@marcusjwhelan फिर से, यदि आप एक पूर्ण (लेकिन न्यूनतम) उदाहरण प्रदान कर सकते हैं जो बीटा 10 में संकलित था, तो मैं आपको दिखा सकता हूं कि माइग्रेट कैसे करें। AFAIK नया संस्करण हर तरह से अभिव्यंजक और पहले की तुलना में अधिक सुरक्षित होना चाहिए।

pelotom 7 अक्तू॰ 2017

@pelotom मूर्खतापूर्ण प्रश्न, क्या कोई ऐसा तरीका है जिससे मुझे नई रिलीज़ होने के बाद सूचित किया जा सकता है?

wcandillon 8 अक्तू॰ 2017

@wcandillon हमें ट्विटर पर

oliviertassinari 8 अक्तू॰ 2017

🎉1

@pelotom मैंने ऊपर एक उदाहरण पोस्ट किया है ... आपको इससे अधिक देखने की आवश्यकता क्यों होगी? आप मान सकते हैं कि गुण ए, बी, सी, डी, ई हैं। केवल एक चीज यह है कि इंजेक्शन वाले प्रॉप्स को आवश्यकता के रूप में उत्सर्जित करने की आवश्यकता होती है।

संपादित करें

मैं यह समझ गया।

marcusjwhelan 9 अक्तू॰ 2017

मैं इस चर्चा में थोड़ी देर कर रहा हूं, लेकिन मुझे एक समान त्रुटि दिखाई दे रही है जैसा कि यहां बताया गया है, और मैंने अभी तक यह निर्धारित नहीं किया है कि मैं इसे कैसे ठीक कर सकता हूं। मैं [email protected] और [email protected] का उपयोग कर रहा हूं।

const LoginForm = withStyles(styles)(
    class extends React.Component<WithStyles<'root' | 'button'>, ILoginFormState> {
    // ...
    }
);

render(
  <MuiThemeProvider theme={theme}>
    <LoginForm />
  </MuiThemeProvider>,
  document.getElementById('login-form')
);

इस विशेष मामले में मुझे जो त्रुटि संदेश मिल रहा है वह है:

Type '{}' is not assignable to type 'IntrinsicAttributes & WithStyles<"root" | "button"> & StyledComponentP...'.
  Type '{}' is not assignable to type 'WithStyles<"root" | "button" | "progress" | "textField">'.
    Property 'classes' is missing in type '{}'.
 not assignable to type 'WithStyles<"root" | "button" | "progress" | "textField">'.
    Property 'classes' is missing in type '{}'.

iamjem 10 अक्तू॰ 2017

👍6

घटक वर्ग को सजाते समय आपको स्टाइल के बजाय स्टाइल कॉम्पोनेंटप्रॉप्स का उपयोग करना चाहिए

@pelotom - क्या इसका कहीं कोई उदाहरण है? मुझे टाइपस्क्रिप्ट में एक स्टेटफुल कंपोनेंट क्लास को स्टाइल करने का तरीका निर्धारित करने में बहुत परेशानी हो रही है।

doppio 10 अक्तू॰ 2017

@iamjem यह बताना थोड़ा कठिन है क्योंकि आपने styles प्रदान नहीं किया है, लेकिन ऐसा लगता है कि पहला मुद्दा यह है कि आपके पास styles में उल्लेखित अधिक वर्ग कुंजियाँ हैं जो आप WithStyles<...> में उल्लेख कर रहे हैं

const LoginForm = withStyles(styles)(
    class extends React.Component<WithStyles<keyof typeof styles>, ILoginFormState> {
    // ...
    }
);

इसे पहले मुद्दे का ध्यान रखना चाहिए। तब ऐसा लगता है कि कोई दूसरा मुद्दा है, जो यह है कि परिणामी प्रकार का LoginForm is

React.ComponentType<WithStyles<"root" | "button"> & StyledComponentProps<"root" | "button">>

जो स्पष्ट रूप से सही नहीं है; ऐसा लगता है कि गैर-शैली वाले प्रॉप्स की अनुपस्थिति टाइप सिस्टम को भ्रमित कर रही है। आप {} को एक प्रकार के तर्क के रूप में पास करके, गैर-शैली के प्रोप क्या हैं, इसके बारे में स्पष्ट होने में मदद कर सकते हैं:

const LoginForm = withStyles(styles)<{}>( // <-- note the type argument
    class extends React.Component<WithStyles<keyof typeof styles>, ILoginFormState> {
    // ...
    }
);

क्षमा करें, यह बहुत जटिल है, काश मुझे इस सामान को काम करने का एक आसान तरीका पता होता!

pelotom 10 अक्तू॰ 2017

👍6

यही चाल चली! त्वरित सहायता @pelotom के लिए धन्यवाद। मैं लंबे समय से रिएक्ट का उपयोग कर रहा हूं, लेकिन अभी हाल ही में मटेरियल-यूआई में कूद गया, और सोचा कि जब मैं इसमें हूं तो मैं टाइपस्क्रिप्ट का प्रयास करूंगा। कहने की जरूरत नहीं है, मुझे कुछ किनारे के मामले मिल रहे हैं जहां यह बताना मुश्किल है कि टाइपस्क्रिप्ट को कैसे खुश किया जाए।

iamjem 10 अक्तू॰ 2017

मैंने recompose . का उपयोग करके हल किया

उदाहरण

import { StyleRules, Theme, withStyles } from "material-ui/styles";
import * as React from "react";
import { compose } from "recompose";

interface IProps {
    classes?: any; // <-- add question mark
    text: string;
}

const styles = (theme: Theme): StyleRules => ({
    root: {

    },
});

@compose(
    withStyles(styles),
)
export class MyComponent extends React.Component<IProps> {
    render() {
        const { classes, text } = this.props;
        return (
            <div className={classes.root}>
                {text}
            </div>
        );
    }
}

isman-usoh 23 अक्तू॰ 2017

👍7 ❤1

मैं इस मुद्दे (और #8704) से लड़ रहा था, पिछले कुछ दिनों में कोई स्पष्ट परिणाम नहीं मिला। तब मैंने @pelotom से सलाह ली:

आप का उपयोग करना चाहिए StyledComponentProps के बजाय WithStyles

और इसे हल करने के समान तरीकों के लिए GitHub पर खोजा। और मुझे एक कामकाजी उदाहरण 😂 मिला। यह एक अच्छा है, हालांकि, और इसने मेरी समस्या का समाधान किया - टाइपस्क्रिप्ट के साथ अलग कंटेनर और घटक एक खुश कुकी है: यहां उदाहरण का उल्लेख किया गया है ( नोट: मेरे मामले में, घटक मैपिंग एक अलग कंटेनर फ़ाइल में है, लेकिन विचार है वैसा ही।)।

अगर किसी को लगता है कि यह एक बुरा समाधान है, तो मैं किसी भी बदलाव और विचारों के लिए तैयार हूं। अभी, मुझे खुशी है कि मेरे कोड ने शिकायत करना बंद कर दिया।

svachmic 9 नव॰ 2017

👍3

type Styles = 'foo';
const styles: StyleRulesCallback<Styles> = (theme: Theme) => ({
    foo: {
        position: 'relative',
    }
});

interface Props {
  something: string;
}

class Sidebar extends React.Component<Props & WithStyles<Styles>> {
    render() {
        const { classes, something } = this.props;

        return (
                    <div className={classes.foo}>{something}</div>
        );
    }
}

export default withStyles(styles)<Props>(Sidebar);

lookfirst 22 अप्रैल 2018

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

यहाँ मेरा घटक है:

import React from 'react';
import AppBar from 'material-ui/AppBar';
import { withStyles, WithStyles, StyleRulesCallback } from 'material-ui/styles';

const styles: StyleRulesCallback<'positionFixed'> = () => ({
  positionFixed: {
    top: 'auto',
    bottom: 0,
  },
});

const decorate = withStyles(styles);

interface Props {
   someProp: string;
};

export const BottomNav = decorate<Props>(
  class extends React.Component<Props & WithStyles<'positionFixed'>, {}> {
    render() {
      return (
        <AppBar />
      );
    }
  }
);

export default BottomNav;

और त्रुटि है:

TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & Props & StyledComponentProps<"positionFixed"> & { children?: ReactNode; }'.
  Type '{}' is not assignable to type 'Props'.
    Property 'someProp' is missing in type '{}'.

मैं टीएस के साथ काफी शुरुआत कर रहा हूं, लेकिन मुझे प्रलेखन पृष्ठ मिल गया है, और उदाहरण काफी भ्रमित और/या पूर्ण नहीं है।

अगर आप लोगों के पास कोई विचार है, तो धन्यवाद ;-)

otroboe 24 अप्रैल 2018

@otroboe क्या आप उस कोड को छोड़ रहे हैं जो वास्तव में त्रुटि के साथ ध्वजांकित हो गया है? क्या इसका दिखना ऐसा है?

<BottomNav />

यदि ऐसा है, तो समस्या यह है कि आपको someProp प्रोप प्रदान करने की आवश्यकता है (जो आपकी Props परिभाषा के अनुसार आवश्यक है):

<BottomNav someProp="foo" />

pelotom 24 अप्रैल 2018

मुझ पर शर्म करो... ओह, मुझ पर शर्म करो।
मैं टीएस एकीकरण पर इतना ध्यान केंद्रित कर रहा था, मैं चारों ओर देखना और कुछ कदम पीछे हटना भूल गया।

बहुत बहुत धन्यवाद @pelotom : मुस्कान:

otroboe 24 अप्रैल 2018

👍2

@otroboe स्ट्रिंग डुप्लिकेशन को भी हटा दें ...

type Styles = 'positionFixed';

काश कि एक आसान होता हालांकि ...

lookfirst 24 अप्रैल 2018

👍1

हाँ मैंने वह भी किया, धन्यवाद: +1:

otroboe 24 अप्रैल 2018

मुझे बस इसी समस्या का सामना करना पड़ा, लेकिन यह पता चला कि यह तभी होता है जब मैंने स्टाइल ऑब्जेक्ट को उसी फ़ाइल में मेरी कक्षा या फ़ंक्शन के रूप में प्रारंभ किया हो। वैकल्पिक रूप से, यदि मैं किसी अन्य फ़ाइल से शैलियाँ आयात कर रहा हूँ, तो मुझे यह त्रुटि नहीं मिलती है।

ऐसा क्यों होता है कोई सुराग?

nishmeht7 24 अग॰ 2018

@ nishmeht7 क्या आप एक स्व-निहित स्निपेट पोस्ट कर सकते हैं?

pelotom 24 अग॰ 2018

@pelotom मैंने अभी एक बनाने पर काम किया है, और यह मेरे सैंडबॉक्स वातावरण में ठीक काम करता है। मैं वर्तमान में एक बड़े ऐप पर काम कर रहा हूं और अभी भी एमयूआई संस्करण 1.2.2 पर हूं, जबकि मेरा सैंडबॉक्स एनवी संस्करण नवीनतम है। इसलिए मैं अनुमान लगा रहा हूं कि एक बार जब मैं संस्करणों को अपग्रेड कर लेता हूं तो मैं अपनी त्रुटि को पुन: उत्पन्न नहीं कर पाऊंगा।

nishmeht7 24 अग॰ 2018

मैंने https://material-ui.com/demos/selects/ से एक मूल फॉर्म के उदाहरण का अनुसरण किया, लेकिन शिकायत मिली कि theme में root (नवीनतम टाइपस्क्रिप्ट और सामग्री का उपयोग करके- ui), और form तत्व पर कोई वर्ग लागू नहीं किया जा रहा था। मैंने ऊपर की चर्चा का पालन करने की कोशिश की, लेकिन यह अनिर्णायक लगता है। और वास्तव में विरासत में मिली कक्षाओं की सूची में form लिए उत्पन्न वर्ग का नाम गायब था। अगर मैंने मैन्युअल रूप से जेनरेट किया गया क्लासनाम जोड़ा (देव टूल्स में console.log(theme) साथ स्टाइल में पाया गया, सब ठीक है, तो स्पष्ट रूप से कक्षा सही ढंग से जेनरेट की जा रही थी। withStyles माध्यम से पारित नहीं हो रहा था हालांकि form तत्व। काफी भ्रमित करने वाला।

इसलिए जब तक इसे हल नहीं किया जाता है, तब तक मैं वापस शैलियों में वापस आ गया हूं:

<form style = {{display:'flex',flexWrap:'wrap'}} autoComplete="off">

HenrikBechmann 10 सित॰ 2018

@HenrikBechmann क्या आपने टाइपस्क्रिप्ट के लिए स्टाइल डॉक्यूमेंटेशन का पालन करने की कोशिश की है? अतीत में, यह मेरे लिए काफी मददगार रहा है। https://material-ui.com/guides/typescript/

lookfirst 10 सित॰ 2018

धन्यवाद @ लुकफर्स्ट! मैंने देखा (हालांकि पहले नहीं :-)) उस डॉक्टर पर, और इस्तेमाल किया

export default withStyles({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
})(BaseForm)

(फ़ंक्शन के बजाय ऑब्जेक्ट पास करना)

... जो दोनों टाइपस्क्रिप्ट त्रुटियों से बचते हैं, और उत्पन्न वर्ग के इंजेक्शन को सक्षम करते हैं।

उम्मीद है कि वहां अन्य युक्तियां अधिक जटिल निर्माणों में मदद करेंगी।

HenrikBechmann 11 सित॰ 2018

❤1

मैंने यह भी पुष्टि की है कि styles फ़ंक्शन के लिए अधिक जटिल संरचना काम करती है (एक उत्पन्न className को form इंजेक्ट करता है):

import React from 'react'

import { withStyles, createStyles, Theme } from '@material-ui/core/styles'

/*
    patterned after first demo https://material-ui.com/demos/selects/ for 3.03
    use Typsecript fixes from here: https://material-ui.com/guides/typescript/
*/

const styles = (theme:Theme) => createStyles({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
})

class BaseForm extends React.Component<any,any> {

    render() {
        const { classes } = this.props

        return (
            <form className = {classes.root} autoComplete="off">
                {this.props.children}
            </form>
        )
    }
}

export default withStyles(styles)(BaseForm)

HenrikBechmann 11 सित॰ 2018

❤3 👍1

संपादित करें: @ eps1lon ने बताया है कि यह WithStyles के उपयोग के साथ अनावश्यक है!

मेरे लिए ClassKey उत्पन्न करने के लिए मुझे ReturnType<T> का उपयोग करके कुछ सफलता मिली है:

import * as React from 'react';

import withStyles, {
  StyledComponentProps, 
  StyleRulesCallback,
} from '@material-ui/core/styles/withStyles';

import { Theme } from '@material-ui/core/styles/createMuiTheme';

const overrideStyles = (theme: Theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
  },
});

type Props = StyledComponentProps<keyof ReturnType<typeof overrideStyles>>;

class MyComponent extends React.PureComponent<Props> {
  render() {
    return <div className={this.props.classes.root}></div>;
  }
}

export default withStyles(overrideStyles as StyleRulesCallback, {withTheme: true})(MyComponent);

keyof ReturnType<typeof styleOverrides> का उपयोग StyledComponentProps ClassKey में करने से आपको overrideStyles द्वारा लौटाई गई वस्तु से चाबियां मिल जाएंगी और आपको उन चाबियों की सूची मैन्युअल रूप से रखने से बचाएगी . अगर मैंने withStyles कॉल में overrideStyles as StyleRulesCallback नहीं डाला तो केवल एक ही गड़बड़ी मैंने देखी है वह है टाइप एरर। मुझे 100% यकीन नहीं है कि क्यों। मुझे लगता है कि यह withStyles समझ में नहीं आ रहा है कि किसी कारण से overrideStyles है।

उस विस्तृत प्रकार को स्पष्ट करने के लिए, typeof styleOverrides उस फ़ंक्शन को हल करता है जो स्टाइल ऑब्जेक्ट देता है। ReturnType<T> आपको स्टाइल ऑब्जेक्ट ही मिलेगा। keyof आपको स्टाइल ऑब्जेक्ट से कुंजी प्राप्त करेगा।

chrislambe 24 सित॰ 2018

@chrislambe आपको टाइपस्क्रिप्ट गाइड चेकआउट करना चाहिए। आपको ReturnType आदि का उपयोग करने की आवश्यकता नहीं है। createStyles और WithStyles सहायकों के रूप में पर्याप्त होना चाहिए।

eps1lon 24 सित॰ 2018

@ eps1lon ओह अरे, बहुत

chrislambe 24 सित॰ 2018

fwiw मैं createStyles/withStyles जोड़ी को अधिक से अधिक पसंद कर रहा हूं क्योंकि मैं उनका उपयोग करता हूं। साफ कोड को बढ़ावा देता है, मेरे सभी स्टाइल/टाइपस्क्रिप्ट मुद्दों से संबंधित है, और यदि मुझे स्थानीय सशर्त सीएसएस चाहिए तो मैं केवल स्थानीय शैली विशेषताओं को बना देता हूं, जो निश्चित रूप से कक्षाओं पर प्राथमिकता लेते हैं।

अच्छा!!

HenrikBechmann 24 सित॰ 2018

🎉1 👍1

@material-ui/ [email protected] के साथ टाइपस्क्रिप्ट गाइड के बाद मुझे Test does not have required attribute classes है:

import React from 'react'
import { Theme, WithStyles, withStyles, createStyles } from '@material-ui/core/styles'

const styles = (theme: Theme) => createStyles({
  root: {
    color: theme.palette.action.active
  },
})

interface Props extends WithStyles<typeof styles> {
  asd: boolean
}

class TestComponent extends React.Component<Props> {

  render() {
    const { classes } = this.props

    return (
      <div className={classes.root}>
      </div>
    )
  }
}

const Test = withStyles(styles)(TestComponent)

const a = () => <Test asd={true}/>

valoricDe 22 अक्तू॰ 2018

👍1

@ हारूनलिफ्टन2
कृपया WithStyles . का उपयोग करके अपने प्रॉप्स को बढ़ाने का पालन करें

eps1lon 26 अक्तू॰ 2018

🎉4

@valoricDe क्या आपने अपनी समस्या हल कर ली है?

TrejGun 20 फ़र॰ 2019

@TrejGun मैंने अभी चेक किया है। एक कार्यात्मक घटक के साथ और @material-ui/ core @

valoricDe 21 फ़र॰ 2019

मैं वास्तव में नहीं समझता।
यहाँ डॉक्स के बाद: https://material-ui.com/guides/typescript/#augmenting -your-props-using-withstyles
ऐसा लगता है कि इस मूल मुद्दे की समस्या का परिणाम है। जब आप कहीं भी घटक का उपयोग करते हैं, तो टाइपस्क्रिप्ट आपको _pass_ क्लास प्रॉपर्टी को प्रोप के रूप में समझने के बजाय इसे स्टाइल के साथ _injected_ होने जा रहा है।

मैं इन मुद्दों को कुछ घंटों से पढ़ रहा हूं और मैं वास्तव में इसे प्राप्त नहीं कर रहा हूं। इस बिंदु पर कोई मदद बहुत अच्छी होगी।

उपरोक्त इस सुझाव के संबंध में

@cfilipov एक घटक वर्ग को StyledComponentProps बजाय WithStyles उपयोग करना चाहिए, और यदि सख्त प्रकार की जांच मोड में आपको निकालने के लिए गैर-शून्य दावा ऑपरेटर ! का उपयोग करने की आवश्यकता है classes । क्लास डेकोरेटर के रूप में withStyles के उपयोग की अनुमति देने के लिए यह एक समझौता है। टाइपस्क्रिप्ट में क्लास डेकोरेटर इस सीमा से ग्रस्त
क्लास डेकोरेटर के रूप में withStyles का उपयोग करने का समर्थन न करें
आवश्यक है कि आप सजाए गए घटक प्रकार के तत्व का निर्माण करते समय एक डमी classes प्रोप पास करें (पिछला समझौता, जो यकीनन अधिक कष्टप्रद था )
इसके लिए आवश्यक है कि classes को घटक के अंदर अशक्त माना जाए, जिससे आपको ! ऑपरेटर का उपयोग करने के लिए मजबूर किया जाए जब आप इसके क्षेत्रों ( वर्तमान समझौता ) तक
मैं अत्यधिक अनुशंसा करता हूं कि यदि आपके घटक में कोई राज्य नहीं है तो आप एक स्टेटलेस कार्यात्मक घटक का उपयोग करें, जिसके लिए कम प्रकार के एनोटेशन की आवश्यकता होगी और अधिक प्रकार सुरक्षित होगा:
export default withStyles(styles)<Props>(({ classes, message }) => (
  <div className={classes.main}>
    <div className={classes.foo}>
      Hello World! {message}
    </div>
  </div>
));

मुझे कैसे पता चलेगा कि StyledComponentProps का उपयोग कैसे किया जाता है? ऐसा लगता है कि मैं सिर्फ स्टाइल ऑब्जेक्ट में परिभाषित चाबियों के तार पास करता हूं।

लेकिन डॉक्स हमें कुछ ऐसा करने के लिए कहते हैं जो काम नहीं करेगा? मुझे किसकी याद आ रही है? मैं https://material-ui.com/guides/typescript/#augmenting -your-props-using-withstyles का उपयोग करना चाहूंगा...

क्या यह संभव है?

@valoricDe , आपने उस कार्यात्मक घटक को कैसे किया जिसमें वह समस्या नहीं थी

@TrejGun मैंने अभी चेक किया है। एक कार्यात्मक घटक के साथ और @material-ui/ core @

मैं कुछ इस तरह की कोशिश कर रहा हूँ:

```आयात प्रतिक्रिया, {बदलाव, घटक, प्रेषण} "प्रतिक्रिया" से;
"प्रोप-प्रकार" से प्रोपटाइप आयात करें;
"रिएक्ट-रेडक्स" से आयात {कनेक्ट};
"@material-ui/core" से {ग्रिड, फॉर्मकंट्रोल लेबल, थीम, createStyles, withStyles, Radio, WithStyles} आयात करें;
"./ राशि" से आयात राशि;
आयात { onPastDueFormFieldChange } "../../store/actions/selectPaymentAmountActions" से;

कास्ट स्टाइल = (थीम: थीम) =>
क्रिएट स्टाइल्स({
रकम: {
संरेखित करें: "केंद्र",
},
});

इंटरफ़ेस ओनप्रॉप्स विथ स्टाइल्स का विस्तार करता है{}

इंटरफ़ेस स्टेटप्रॉप्स {
पिछले ड्यू ?: संख्या;
pastDueOrTotalOrOther: स्ट्रिंग;
}

इंटरफ़ेस डिस्पैचप्रॉप्स {
onPastDueFormFieldChange: OnPastDueFormFieldChange;
}

टाइप प्रॉप्स = स्टेटप्रॉप्स और डिस्पैचप्रॉप्स और ओनप्रॉप्स;

कॉन्स्ट पास्टड्यूफॉर्मफिल्ड = स्टाइल्स (शैलियों) के साथ (
({classes, pastDue, pastDueOrTotalOrOther, onPastDueFormFieldChange}: प्रॉप्स) => (
मूल्य = "पास्टड्यू"
चेक किया गया = {pastDueOrTotalOrOther === "पास्टड्यू"}
onChange={onPastDueFormFieldChange}
लेबल = "पिछले देय:"
नियंत्रण = { }
/>

),
);

const mapStateToProps = (राज्य: रूटस्टेट): StateProps => ({
पास्टड्यू: स्टेट.कस्टमरडेटा.बैलेंसड्यू.पास्टड्यू,
pastDueOrTotalOrOther: State.customerPaymentsForm.pastDueTotalOrOther,
});

निर्यात डिफ़ॉल्ट कनेक्ट(
मैपस्टेटटॉपप्रॉप्स,
{onPastDueFormFieldChange},
)(PastDueFormField);

When I use this component I have this error:
```import PastDueFormField
Property 'classes' is missing in type '{}' but required in type 'Readonly<PropsWithChildren<Pick<Pick<Props, "pastDue" | "pastDueOrTotalOrOther" | "onPastDueFormFieldChange"> & StyledComponentProps<"amount">, "classes" | "innerRef"> & OwnProps>>'

yehudamakarov 11 मार्च 2019

@yehudamakarov पहले react-redux के बिना कोड आज़माएं और जब सब कुछ अपेक्षित रूप से काम करे तो connect जोड़ें। जब प्रोप इंजेक्ट किया जाता है तो एक अच्छा अवलोकन प्राप्त करना अविश्वसनीय रूप से कठिन होता है।

इन मुद्दों का सामना करते समय मैं

पहले मेरा कंपोनेंट प्रॉप्स टाइप करें
जांचें कि क्या सब कुछ अपेक्षित है यानी missing props
हॉक लागू करें
देखें कि क्या टाइपस्क्रिप्ट ने प्रत्येक इंजेक्शन वाले प्रोप को पहचाना है
सभी हॉक्स लागू होने तक 3 दोहराएं।

यह क्लीनर कोड को बढ़ावा देता है। विशेष रूप से संचालन के आदेश के संबंध में। आप वर्तमान में withStyles और connect बिना चिंताओं को अलग किए मिलाते हैं।

eps1lon 11 मार्च 2019

बहुत बहुत धन्यवाद सेबस्टियन।
मैंने कनेक्ट करने के लिए सामान्य तर्क पारित न करके अपनी समस्या हल की। मैंने <StateProps ...> खंड निकाला।

मुझे लगता है कि वे सामान्य तर्क मेरे ओनप्रॉप्स इंटरफ़ेस के साथ खिलवाड़ कर रहे थे जो कि स्टाइल्स <> को बढ़ाता है।

चूंकि मैं घटक को सब कुछ पास कर रहा हूं, वैसे भी मेरे प्रॉप्स से मुझे जो प्रकार की जांच मिलती है वह पर्याप्त है। सुनिश्चित नहीं है कि आईडी को कनेक्ट <> जेनरिक की आवश्यकता क्यों है।

धन्यवाद!

yehudamakarov 11 मार्च 2019

यदि हम टाइपिंग को सही करते हैं तो यह एक वर्ग को "सजाने" जैसा दिखेगा:
type NonStyleProps = {
  text: string
};

const styles = {
  root: {
    backgroundColor: 'red'
  }
};

const DecoratedComponent = withStyles(styles)(
  class extends React.Component<NonStyleProps & WithStyles<'root'>> {
    render() {
      return (
        <div className={this.props.classes.root}>
          {this.props.text}
        </div>
      );
    }
  }
);

और थीम कैसे जोड़ें (useTheme ()) अंदर की तरह:

const decorate = withStyles((theme: Theme) => ({
  root: {
    display: "flex"
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    })
  }
})

pchodak 9 अग॰ 2019

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Material-ui: withStyles द्वारा लौटाए गए घटक में टाइपप्रति प्रकार त्रुटि ()

अपेक्षित् व्यवहार

वर्तमान व्यवहार

कोड

संदर्भ

आपका पर्यावरण

सबसे उपयोगी टिप्पणी

सभी 55 टिप्पणियाँ

संपादित करें

संबंधित मुद्दों