Definitelytyped: رد فعل مشكلة استيراد ES6

قد يعمل export default react = React; فقط

أعتقد أن ما تريده هو import * as React, {Component} from 'react'; (لكن قد أكون مخطئًا ، ما زلت أتعلم بعضًا من هذا أيضًا: مبتسم :)

لذلك قضيت وقتًا طويلاً مع ES6 مؤخرًا وأعتقد أن import React from 'react'; حاليًا هو سلوك غير صالح من الناحية الفنية لأن React لا تستخدم وحدات فئات ES6 وبالتالي لا يمكنها تحديد تصدير افتراضي.

تعمل هذه الصيغة عند استخدام Babel ولكن هذا لأن Babel قال أساسًا أنه "في حالة استخدام استيراد ES6 للحصول على وحدة CommonJS ، يكون التصدير الافتراضي هو نفسه modules.export . ومع ذلك ، هذا شيء بابل بالكامل و ليس شيئًا محددًا. من منظور المواصفات ، أود أن أقول إن import * as React from 'react'; هو في الواقع أقرب إلى الروح كثيرًا (وهو يعمل مع TypeScript خارج الصندوق).

ومع ذلك ، هذا شيء بابل بالكامل وليس شيئًا محددًا

متفق. لكن لدى Babel الكثير من الجذب ويعتقد الناس أن هذه هي الطريقة الصحيحة التي يجب أن تتصرف بها وحدات ES6.

قام vvakame ببعض الأعمال لجعل عملية التشغيل المتداخل مع استيراد نوع babel أكثر سلاسة: https://github.com/Microsoft/TypeScript/pull/3586

نعم ، فيما عدا أن العلاقات العامة تتعلق بشكل أساسي بالتصدير من TypeScript ، في حين أن هذه المشكلة تتعلق أكثر بالاستيراد إلى TypeScript. بعبارة أخرى ، لا تساعد العلاقات العامة في حل هذه المشكلة (لكنها بالتأكيد جيدة لبناء مكتبات باستخدام TypeScript!).

أظن أن هذه المشكلة ستختفي قريبًا حيث تم الاستحواذ على Babel بواسطة Facebook ولن أتفاجأ على الإطلاق إذا تمت إعادة كتابة React كوحدات ES6.

أو ، إذا كنت تريد _ حقًا_ استخدام هذه الصيغة ، فيمكنك تغيير ملف الإعلان إلى export default React ولكن يجب عليك استهداف ES6 ثم استخدام Babel للانتقال إلى CommonJS ، وإلا فلن يعمل بشكل صحيح في وقت التشغيل (سوف TypeScript سوف التحويل دائمًا إلى moduleName.default عند استخدام استيراد ES6).

شكرا للتوضيح. باختصار لدينا ts export -> babel import يعمل. نحتاج الآن إلى عمل module.exports aliased to default -> ts import .

لقد تأخرت قليلاً عن الحفلة ، لكن مما أعرفه ، هذا إصلاح من فريق TypeScript.

tl ؛ dr: لا يمكنك ترجمة export default إلى module.exports = . استخدم بناء الجملة القديم import ... = require(...) بدلاً من ذلك :(

نظرًا لأن التصدير الافتراضي ES-6 هو في الأساس مجرد تصدير عادي باسم "افتراضي" ، فإن المكافئ في CJS سيكون exports.default = . وسيبدو الاستيراد بهذا الشكل في CJS var something = require('something').default . بناء الجملة module.exports = غير كافٍ لأنه يجعل الوحدة النمطية تساوي الرمز المصدر نفسه ، مما يجعل من المستحيل حل التبعيات الدائرية. هذا يتعارض مع تصميم وحدات ES6. IMHO ذهب فريق Babel إلى الخارج قليلاً مع هذا :(

dreampulse أفعل ذلك باستخدام هذا التناقض:

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

kataras هذا لا يعمل معي للأسف:

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 شكرا!

للإشارة فقط ، اضطررت إلى إضافة "module": "es2015", إلى tsconfig.json قبل الإصلاح الذي ذكره ligaz يعمل معي.

أستخدم import React, {Component, PropTypes} from 'react'; ويظهر الخطأ Cannot resolve symbol PropTypes . أي مؤشر على كيفية حل هذه المشكلة؟

kkarmalkar إذا كنت تستخدم React> = 15.5.0 ، سترغب في الانتقال من React.PropTypes إلى حزمة وتعريفات من نوع الخاصية الجديدة.

رائع ، شكرًا لك corydeppen

على الرغم من أن لدي allowSyntheticDefaultImports لا يمكنني الحصول عليها

import React, {Component} from 'react';

للعمل ، ولكن باستخدام

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

يعمل بشكل جيد. لدي الوحدة النمطية الخاصة بي مضبوطة على es5. عند تجميع الكود للمتصفح ، هل يُقترح استخدام es6؟ لقد أضفت es2015 إلى عقار libs الخاص بي في tsconfig.json.

richtera يحتمل أن يكون مرتبطًا بـ ؟: https://github.com/Microsoft/TypeScript/issues/21621

إنها مرتبطة ، نعم. من الغريب أنه وفقًا لهذا الموضوع ، فإنه يعمل من أجلك.

فقط أضف خيار tsconfig esModuleInterop: true وبعد ذلك يمكنك استخدام الواردات الافتراضية مثل import React from 'react'

إذا كنت تستخدم حزمة الويب ، فيمكنك أيضًا التخلص من برنامج babel بهذا الإعداد.

هذا يعمل الآن. أعتقد أنه كان مرتبطًا بإصدارات محددة من حزمة الويب والنص المكتوب على الحروف التي كنت أستخدمها في ذلك الوقت. للأسف ، لا تزال إعدادات Babel مطلوبة للاستخدامات بخلاف جافا سكريبت لـ babel.

"allowSyntheticDefaultImports": صحيح

"module": "es2015
“allowSyntheticDefaultImports”：true

عمل ....

"module": "es2015
“allowSyntheticDefaultImports”：true

عمل ....

هل هذا قزم؟ :) اقتباسات اتجاهية في السطر الأخير ، وهي ليست نقطتين قبل true . يجب أن يكون على النحو التالي:

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

استيراد {افتراضي كـ ProjectInfoProfile} من './ProjectInfoProfile' ؛
أو
استيراد ProjectInfoProfile من "./ProjectInfoProfile" ؛

في هذه الحالة ، قد يعمل.

"الوحدة النمطية": "commonjs" ،
"الهدف": "es6"،
"esModuleInterop": صحيح ،
"jsx": "رد فعل"،
"allowSyntheticDefaultImports": صحيح