Definitelytyped: React ES6 导入问题

export default react = React;可能只是工作

我认为你想要的是import * as React, {Component} from 'react'; （但我可能是错的，仍然在学习其中的一些：笑脸:)

所以我最近花了很多时间在 ES6 上，我相信目前import React from 'react';在技术上是_not_有效的行为，因为 React 不使用 ES6类模块，因此不能指定默认导出。

这种语法在使用 Babel 时确实有效，但那是因为 Babel 基本上说过“如果使用 ES6 导入来获取 CommonJS 模块，则默认导出与modules.export相同。但是，这完全是 Babel 的事情，并且不是规范的东西。从规范的角度来看，我会说import * as React from 'react';实际上在精神上更接近（并且它确实适用于开箱即用的 TypeScript）。

但是，这完全是 Babel 的事情，而不是规范的事情

同意。 但是 babel 有很大的吸引力，人们认为这是 ES6 模块应该_行为的正确方式。

@vvakame做了一些工作以使与 babel 类型导入的互操作更顺畅： https ://github.com/Microsoft/TypeScript/pull/3586

是的，除了 PR 主要是关于从 TypeScript 导出，而这个问题更多是关于导入到 TypeScript。 换句话说，那个 PR 对解决这个问题没有帮助（但它绝对有利于使用 TypeScript 构建库！）。

我怀疑这个问题很快就会消失，因为 Babel 被 Facebook 收购了，如果 React 被重写为 ES6 模块，我一点也不感到惊讶。

或者，如果您_真的_想要使用该语法，您可以将声明文件更改为export default React ，但您必须以 ES6 为目标，然后使用 Babel 转译为 CommonJS，否则它在运行时无法正常工作（TypeScript 将使用 ES6 导入时总是转换为moduleName.default ）。

感谢您的澄清。 简而言之，我们有ts export -> babel import工作。 现在我们需要module.exports aliased to default -> ts import工作。

我参加聚会有点晚了，但据我所知，这是 TypeScript 团队的错误修复。

tl; dr：您不能将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谢谢！

仅供参考，在@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

即使我有 allowSyntheticDefaultImports 我也无法获得

import React, {Component} from 'react';

工作，但使用

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

工作正常。 我的模块设置为 es5。 为浏览器编译代码时是否建议使用 es6？ 我在 tsconfig.json 中将 es2015 添加到我的 libs 属性中。

@richtera可能与？： https ://github.com/Microsoft/TypeScript/issues/21621

这是相关的，是的。 奇怪的是，根据这个线程它对你有用。

只需添加一个 tsconfig 选项esModuleInterop: true然后您就可以使用默认导入，即import React from 'react'

如果您使用的是 webpack，那么您也可以使用此设置放弃 babel。

这现在有效。 我认为这与我当时使用的特定版本的 webpack 和 typescript 有关。 不幸的是，babel 的非 JavaScript 使用仍然需要 Babel 设置。

“allowSyntheticDefaultImports”：真

"module": "es2015
“allowSyntheticDefaultImports”：true

在职的 ....

"module": "es2015
“allowSyntheticDefaultImports”：true

在职的 ....

这是一个巨魔吗？ :) 最后一行的方向引号，它不是true之前的冒号。 应该如下：

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

从'./ProjectInfoProfile'导入{默认为ProjectInfoProfile}；
要么
从'./ProjectInfoProfile'导入ProjectInfoProfile；

在这种情况下，它可能会起作用。

“模块”：“commonjs”，
“目标”：“es6”，
“esModuleInterop”：是的，
“jsx”：“反应”，
“allowSyntheticDefaultImports”：真