क्रिएट रिएक्ट ऐप और टाइपस्क्रिप्ट के साथ वैकल्पिक चेनिंग को कैसे सक्षम करें

Question

वर्तमान में प्रयोगात्मक वाक्य रचना 'वैकल्पिक' के लिए समर्थन सक्षम नहीं है

मुझे उपरोक्त त्रुटि मिल रही थी। मैंने इसका अनुसरण किया पोस्ट का और "@babel/plugin-proposal-optional-chaining": "^7.7.4"अपने में जोड़ा devDependencies।

तब मुझे यह त्रुटि हो रही है,

@ Babel / plugin- प्रस्ताव-वैकल्पिक- chaining जोड़ें (परिवर्तन को सक्षम करने के लिए अपने बैबल कॉन्फिगरेशन के 'प्लगइन्स' सेक्शन में https://git.io/vb4Sk ) जोड़ें।

इसलिए मैंने इस पोस्ट को फॉलो किया और .babelrcअपने प्रोजेक्ट के रूट में फ़ाइल जोड़ी

{
    "presets": ["react", "es2015","stage-1"],
    "plugins": ["transform-runtime", "transform-optional-chaining"]
}

यह कुछ भी नहीं लगता था। मैंने भी किसी का जिक्र सुना हैCreate React App आपको बेबल के कॉन्फ़िगरेशन को संशोधित करने की अनुमति नहीं देता है। तो मेरा सवाल यह है कि मैं पूरी तरह से फिर से वायरिंग के बिना वैकल्पिक चेनिंग को कैसे सक्षम कर सकता हूं CRA?

PS मैं उपयोग कर रहा हूं "typescript": "^3.7.2", या कम से कम जो मेरा package.jsonकहना है। मैंने कोशिश कीnpm install यह सुनिश्चित करने की कि यह अपडेट हो। यकीन नहीं अगर CRAकुछ अजीब हो रहा है और TypeScriptकिसी भी तरह के पुराने संस्करण का उपयोग कर रहा है ।

---

संपादित करें: जब मैंने प्रोजेक्ट शुरू किया CRA, तो मुझे विश्वास है कि हम उपयोग कर रहे थे TypeScript: 3.6.x। मैं उपयोग करना चाहता था Optional Chaining, इसलिए मैंने अपनी package.jsonफ़ाइल को "typescript": "^3.7.2"तब बदल दिया npm install। मुझे लगता है कि समस्या यह है, TypeScriptजानता है कि मैं उपयोग कर रहा हूं 3.7.2, लेकिन CRAअभी भी पुराना कॉन्फ़िगरेशन है और मुझे यकीन नहीं है कि मैं इसे कैसे अपडेट कर सकता हूं।

Comments

आप टाइपस्क्रिप्ट 3.7 का उपयोग कर सकते हैं । वैकल्पिक चेनिंग अब एक मूल समर्थित फ़ंक्शन है।

— निकोलस

मैं टाइपस्क्रिप्ट का उपयोग कर रहा हूं ^3.7.2। या कम से कम मेरा क्या package.jsonकहना है। मैंने भी कोशिश की npm installहै।

— हाफिज तेमुरी

Answer 1

Create-React-App, टाइपस्क्रिप्ट को ट्रांसपाइल करने के लिए बैबल का उपयोग करता है इसलिए यह टाइपस्क्रिप्ट के आपके npm इंस्टॉल किए गए संस्करण का उपयोग नहीं कर रहा है। संस्करण 3.3.0 प्रतिक्रिया-स्क्रिप्ट टाइपस्क्रिप्ट 3.7 का समर्थन करता है। आप इसे स्थापित कर सकते हैं और इसके साथ उपयोग कर सकते हैं:

• yarn add react-scripts@3.3.0

  -या-

• npm install -s react-scripts@3.3.0

Comments

धन्यवाद, सही समाधान यहाँ।

— रमन गोंजालेज

क्या आप react-scripts 3.3.0टीएस का उपयोग किए बिना वैकल्पिक चेनिंग का उपयोग कर सकते हैं ?

— बद्रीश

नहीं - वैकल्पिक श्रृंखलन एक टाइपस्क्रिप्ट सुविधा है जिसे ब्राउज़रों या NodeJS में काम करने के लिए जावास्क्रिप्ट में बदलने की आवश्यकता होती है।

— लूका

@ ब्रेडरश ऑप्शनल चेनिंग टीएस फीचर है, आप टीएस के बिना इसका उपयोग कैसे कर सकते हैं? यह मेरे जैसा कह रहा है, क्या मैं सिर्फ अंडे को तोड़े बिना जर्दी खा सकता हूं। सीधा - सा जवाब है 'नहीं! लेकिन आशा है कि वे इसे जल्द ही वेनिला जेएस से जोड़ देंगे।

— हाफिज तेमुरी

Answer 2

प्रतिक्रिया स्क्रिप्ट 3.3.0 और इसके बाद के संस्करण का समर्थन करता है। अगले प्रतिक्रिया-स्क्रिप्ट स्थापित करने की कोई आवश्यकता नहीं है।

सिर्फ पैकेज में रखें। json "react-scripts": "^3.3.0"और यह काम करेगा।

Comments

खैर, मैं अब उस कंपनी के साथ काम नहीं करता, जिसके लिए मैं ऐप कॉन्फ़िगरेशन कर रहा था। तो मैं वास्तव में यह आसानी से परीक्षण नहीं कर सकते। लेकिन जानकर अच्छा लगा। यह भविष्य के पाठकों के लिए मददगार हो सकता है।

— हाफिज तेमुरी

अब जब मैंने पीछे मुड़कर देखा, तो इसका @LukeP ने सुझाव दिया था

— Hafiz Temuri

@HafizTemuri luke ने अपना उत्तर अपडेट किया। उनका जवाब शुरुआत में प्रतिक्रिया-लिपियों @ अगले

— एलीशा स्टर्नगॉल्ड

Answer 3

package.json

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "customize-cra": "^0.4.1",
    "react-app-rewired": "^2.1.3"
  }
  ...other
}

---

config-overrides.js

const { useBabelRc, override } = require('customize-cra');
module.exports = override(useBabelRc());

---

.babelrc

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

विस्तृत ब्लॉगपोस्ट

Comments

मैंने कहा कि ओपी में, मैं पूरी बात को फिर से तार नहीं करना चाहता। "So my question is how can I enable optional chaining without re-wiring the whole CRA?"

— हाफिज तेमुरी

customize-craयदि मैं पहले से ही इसका उपयोग कर रहा हूँ तो विन्यास को ओवरराइड करने के लिए मैं कैसे उपयोग करूं ? जैसे:module.exports = function override(config) { config.resolve.modules = [path.resolve(__dirname, 'src'), 'node_modules']; return config; };

— सुभेंदु कुंडू