Definitelytyped: प्रतिक्रिया ES6 आयात मुद्दा

export default react = React; बस काम कर सकता है

मुझे लगता है कि आप जो चाहते हैं वह import * as React, {Component} from 'react'; है (लेकिन मैं गलत हो सकता हूं, फिर भी इसमें से कुछ सीख रहा हूं: स्माइली :)

इसलिए मैंने हाल ही में ES6 के साथ काफी समय बिताया है और मेरा मानना ​​​​है कि वर्तमान में import React from 'react'; तकनीकी रूप से _not_ मान्य व्यवहार है क्योंकि रिएक्ट ES6 क्लास मॉड्यूल का उपयोग नहीं करता है और इसलिए डिफ़ॉल्ट निर्यात निर्दिष्ट नहीं कर सकता है।

बैबेल का उपयोग करते समय यह सिंटैक्स काम करता है लेकिन ऐसा इसलिए है क्योंकि बैबेल ने मूल रूप से कहा है कि "यदि कॉमनजेएस मॉड्यूल प्राप्त करने के लिए ईएस 6 आयात का उपयोग कर रहे हैं, तो डिफ़ॉल्ट निर्यात modules.export जैसा ही है। हालांकि, यह पूरी तरह से एक बैबेल चीज है और कोई विशेष बात नहीं। कल्पना के दृष्टिकोण से मैं कहूंगा कि import * as React from 'react'; वास्तव में आत्मा के बहुत करीब है (और यह टाइपस्क्रिप्ट आउट-ऑफ-द-बॉक्स के साथ काम करता है)।

हालाँकि, यह पूरी तरह से एक बैबेल चीज़ है और कोई विशिष्ट चीज़ नहीं है

माना। लेकिन बेबेल में कर्षण का एक _lot_ है और लोगों का मानना ​​है कि यह सही तरीका है कि ES6 मॉड्यूल _ should_ व्यवहार करता है।

@vvakame ने बेबेल प्रकार के आयात के साथ इंटरऑप को आसान बनाने के लिए कुछ काम किया है: https://github.com/Microsoft/TypeScript/pull/3586

हां, सिवाय इसके कि पीआर मुख्य रूप से टाइपस्क्रिप्ट से निर्यात करने के बारे में है, जबकि यह मुद्दा टाइपस्क्रिप्ट में आयात करने के बारे में अधिक है। दूसरे शब्दों में, पीआर इस मुद्दे में मदद नहीं करता है (लेकिन टाइपस्क्रिप्ट के साथ पुस्तकालयों के निर्माण के लिए यह निश्चित रूप से अच्छा है!)

मुझे संदेह है कि यह मुद्दा जल्द ही दूर हो जाएगा क्योंकि फेसबुक द्वारा बैबेल को काम पर रखा गया था और अगर रिएक्ट को ES6 मॉड्यूल के रूप में फिर से लिखा गया तो मुझे बिल्कुल आश्चर्य नहीं होगा।

या, यदि आप _really_ उस सिंटैक्स का उपयोग करना चाहते हैं, तो आप घोषणा फ़ाइल को export default React में बदल सकते हैं, लेकिन आपको ES6 को लक्षित करना होगा और फिर कॉमनजेएस को ट्रांसपाइल करने के लिए बैबेल का उपयोग करना होगा, अन्यथा यह रनटाइम पर सही काम नहीं करेगा (टाइपस्क्रिप्ट होगा ES6 आयात का उपयोग करते समय हमेशा moduleName.default तक ट्रांसपाइल करें)।

स्पष्टीकरण देने के लिए धन्यवाद। संक्षेप में हमारे पास ts export -> babel import काम कर रहा है। अब हमें module.exports aliased to default -> ts import काम करने की जरूरत है।

मुझे पार्टी के लिए थोड़ी देर हो गई है, लेकिन मैं जो जानता हूं, यह टाइपस्क्रिप्ट टीम का एक अभ्यस्त है।

टीएल; डॉ: आप export default को module.exports = में अनुवाद नहीं कर सकते। इसके बजाय import ... = require(...) लीगेसी सिंटैक्स का उपयोग करें :(

चूंकि ES-6 डिफ़ॉल्ट निर्यात मूल रूप से 'डिफ़ॉल्ट' नाम के साथ सिर्फ एक नियमित निर्यात है, CJS में समतुल्य एक exports.default = होगा। और आयात सीजेएस var something = require('something').default में इस तरह दिखेगा। module.exports = सिंटैक्स पर्याप्त नहीं है क्योंकि यह मॉड्यूल को निर्यात किए गए प्रतीक के बराबर बनाता है, जिससे परिपत्र निर्भरता को हल करना असंभव हो जाता है। यह ES6 मॉड्यूल के डिजाइन के खिलाफ जाता है। आईएमएचओ बैबेल टीम इसके साथ थोड़ा आगे निकल गई :(

@dreampulse मैं इस सिंडैक्स का उपयोग कर रहा हूं:

import {default as React,Component} from 'react';

@ कटारस जो दुर्भाग्य से मेरे लिए काम नहीं करता है:

Error:(2, 9) TS2305: Module '"react"' has no exported member 'default'.

कोड

import {default as React, Component, PropTypes} from 'react';

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "jsx": "react"
  }
}

जो काम कर रहा है, उसके दो आयात हो रहे हैं। पसंद:

import * as React from "react";
import { Component } from "react";

आप allowSyntheticDefaultImports कंपाइलर विकल्प का उपयोग कर सकते हैं जो इस प्रकार के आयात की अनुमति देगा:

import React, {Component} from 'react';

धन्यवाद @jbrantly। सटीक!!

@ligaz thanks!

केवल संदर्भ के लिए, @ligaz द्वारा मेरे लिए काम करने से पहले मुझे "module": "es2015", को tsconfig.json में जोड़ना पड़ा।

मैं import React, {Component, PropTypes} from 'react'; का उपयोग कर रहा हूं और त्रुटि Cannot resolve symbol PropTypes प्राप्त कर रहा हूं। इस मुद्दे को हल करने के तरीके पर कोई संकेतक?

@kkarmalkar यदि आप React>=15.5.0 का उपयोग कर रहे हैं, तो आप React.PropTypes से नए prop-types पैकेज और परिभाषाओं में माइग्रेट करना चाहेंगे।

बहुत बढ़िया, धन्यवाद @corydeppen

भले ही मेरे पास सिंथेटिक डिफॉल्ट आयात की अनुमति है, मुझे नहीं मिल सकता है

import React, {Component} from 'react';

काम करने के लिए, लेकिन उपयोग करना

import React from 'react';
import {Component} from 'react';

ठीक काम करता है। मेरे पास मेरा मॉड्यूल es5 पर सेट है। ब्राउज़र के लिए कोड संकलित करते समय es6 का उपयोग करने का सुझाव दिया जाता है? मैंने tsconfig.json में अपनी libs संपत्ति में es2015 जोड़ा।

@richtera संभवतः संबंधित ?: https://github.com/Microsoft/TypeScript/issues/21621

यह संबंधित है, हाँ। उत्सुक हालांकि यह धागा के अनुसार यह आपके लिए काम कर रहा है।

बस एक tsconfig विकल्प esModuleInterop: true जोड़ें और फिर आप डिफ़ॉल्ट आयात यानी import React from 'react' का उपयोग कर सकते हैं

यदि आप वेबपैक का उपयोग कर रहे हैं, तो आप इस सेटअप के साथ बेबेल को भी छोड़ सकते हैं।

यह अब काम करता है। मुझे लगता है कि यह उस समय मेरे द्वारा उपयोग किए जा रहे वेबपैक और टाइपस्क्रिप्ट के विशिष्ट संस्करणों से संबंधित था। बेबेल के गैर-जावास्क्रिप्ट उपयोगों के लिए दुर्भाग्य से अभी भी बैबल सेटअप की आवश्यकता है।

"अनुमति दें सिंथेटिक डिफॉल्ट आयात": सच

"module": "es2015
“allowSyntheticDefaultImports”：true

काम कर रहे ....

"module": "es2015
“allowSyntheticDefaultImports”：true

काम कर रहे ....

क्या यह ट्रोल है? :) अंतिम पंक्ति पर दिशात्मक उद्धरण, और यह true से पहले एक कोलन नहीं है। निम्नलिखित के रूप में होना चाहिए:

  "module": "es2015",
  "allowSyntheticDefaultImports": true

'./ProjectInfoProfile' से {ProjectInfoProfile के रूप में डिफ़ॉल्ट} आयात करें;
या
'./ProjectInfoProfile' से ProjectInfoProfile आयात करें;

इस मामले में, यह काम कर सकता है।

"मॉड्यूल": "कॉमनज",
"लक्ष्य": "es6",
"esModuleInterop": सच,
"जेएसएक्स": "प्रतिक्रिया",
"अनुमति दें सिंथेटिक डिफॉल्ट आयात": सच