Definitelytyped: Реагировать на проблему с импортом ES6

export default react = React; может просто сработать

Я думаю, что вы хотите import * as React, {Component} from 'react'; (но я могу ошибаться, я все еще изучаю это :smiley:)

Итак, недавно я провел довольно много времени с ES6 и считаю, что в настоящее время import React from 'react'; является технически _не_ допустимым поведением, поскольку React не использует модули классов ES6 и, следовательно, не может указать экспорт по умолчанию.

Этот синтаксис работает при использовании Babel, но это потому, что Babel в основном сказал, что «при использовании импорта ES6 для получения модуля CommonJS экспорт по умолчанию такой же, как modules.export . Однако это полностью дело Babel и не спецификация С точки зрения спецификации я бы сказал, что import * as React from 'react'; на самом деле намного ближе по духу (и он работает с TypeScript из коробки).

Тем не менее, это полностью вавилонская вещь, а не спецификация.

Согласованный. Но у Babel есть _много_ тяги, и люди считают, что это правильный способ, которым модули ES6 _должны_ вести себя.

@vvakame проделал некоторую работу, чтобы сделать взаимодействие с импортом типа babel более плавным: https://github.com/Microsoft/TypeScript/pull/3586

Да, за исключением того, что PR в основном касается экспорта из TypeScript, тогда как этот вопрос больше касается импорта в TypeScript. Другими словами, этот PR не помогает в этом вопросе (но он определенно хорош для создания библиотек с помощью TypeScript!).

Я подозреваю, что эта проблема скоро исчезнет, ​​так как Facebook наняла Babel, и я совсем не удивлюсь, если React будет переписан в виде модулей ES6.

Или, если вы _действительно_ хотите использовать этот синтаксис, вы можете изменить файл объявления на export default React , но вы должны ориентироваться на ES6, а затем использовать Babel для транспиляции в CommonJS, иначе он не будет работать правильно во время выполнения (TypeScript будет всегда транспилировать в moduleName.default при использовании импорта ES6).

Спасибо за разъяснения. Короче у нас работает ts export -> babel import . Теперь нам нужно, чтобы module.exports aliased to default -> ts import работал.

Я немного опоздал на вечеринку, но, насколько я знаю, это исправление от команды TypeScript.

Вкратце: вы не можете перевести export default в module.exports = . Вместо этого используйте устаревший синтаксис import ... = require(...) :(

Поскольку экспорт по умолчанию ES-6 — это, по сути, обычный экспорт с именем default, эквивалентом в CJS будет exports.default = . и импорт будет выглядеть так в CJS var something = require('something').default . Синтаксиса module.exports = недостаточно, поскольку он делает модуль равным самому экспортируемому символу, что делает невозможным разрешение циклических зависимостей. Это противоречит дизайну модулей ES6. ИМХО, команда 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 на новый пакет и определения prop-types.

Круто, спасибо @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'

Если вы используете webpack, вы также можете отказаться от Babel с этой настройкой.

Это работает сейчас. Я думаю, это было связано с конкретными версиями веб-пакета и машинописного текста, которые я использовал в то время. Настройки Babel, к сожалению, по-прежнему требуются для использования Babel без использования JavaScript.

"allowSyntheticDefaultImports": правда

"module": "es2015
“allowSyntheticDefaultImports”：true

Работающий ....

"module": "es2015
“allowSyntheticDefaultImports”：true

Работающий ....

Это тролль? :) Направленные кавычки в последней строке, и это не двоеточие перед true . Должно быть следующим:

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

импортировать {по умолчанию как ProjectInfoProfile} из './ProjectInfoProfile';
или
импортировать ProjectInfoProfile из './ProjectInfoProfile';

в этом случае это может сработать.

"модуль": "commonjs",
"цель": "es6",
"esModuleInterop": правда,
"jsx": "реагировать",
"allowSyntheticDefaultImports": правда