Definitelytyped: Reagieren Sie auf das ES6-Importproblem

export default react = React; könnte einfach funktionieren

Ich denke, was Sie wollen, ist import * as React, {Component} from 'react'; (aber ich könnte mich irren, ich lerne auch noch etwas davon :smiley:)

Ich habe also in letzter Zeit ziemlich viel Zeit mit ES6 verbracht und glaube, dass derzeit import React from 'react'; technisch _nicht_ gültiges Verhalten ist, da React keine ES6-Klassenmodule verwendet und daher keinen Standardexport angeben kann.

Diese Syntax funktioniert bei der Verwendung von Babel, aber das liegt daran, dass Babel im Grunde gesagt hat, dass „wenn ein ES6-Import verwendet wird, um ein CommonJS-Modul zu erhalten, der Standardexport derselbe ist wie modules.export . Dies ist jedoch eine Sache von Babel und keine Spezifikationssache Aus der Perspektive der Spezifikation würde ich sagen, dass import * as React from 'react'; tatsächlich viel näher im Geiste ist (und es funktioniert mit TypeScript out-of-the-box).

Dies ist jedoch ausschließlich eine Babel-Sache und keine Spezifikationssache

Einverstanden. Aber babel hat _viel_ Zugkraft und die Leute glauben, dass dies die richtige Art und Weise ist, wie sich ES6-Module verhalten _sollten_.

@vvakame hat einige Arbeit geleistet, um die Interoperabilität mit Importen von babel-Typen reibungsloser zu gestalten: https://github.com/Microsoft/TypeScript/pull/3586

Ja, außer dass es bei PR hauptsächlich um den Export aus TypeScript geht, während es bei diesem Thema mehr um den Import in TypeScript geht. Mit anderen Worten, diese PR hilft bei diesem Problem nicht (aber sie ist definitiv gut zum Erstellen von Bibliotheken mit TypeScript!).

Ich vermute, dass dieses Problem bald verschwinden wird, da Babel von Facebook erworben wurde, und ich wäre überhaupt nicht überrascht, wenn React als ES6-Module umgeschrieben würde.

Oder, wenn Sie diese Syntax _wirklich_ verwenden möchten, können Sie die Deklarationsdatei in export default React ändern, aber Sie müssen ES6 als Ziel haben und dann Babel verwenden, um in CommonJS zu transpilieren, sonst wird es nicht direkt zur Laufzeit funktionieren (TypeScript wird immer in moduleName.default transpilieren, wenn ES6-Importe verwendet werden).

Danke fürs klarstellen. Kurz gesagt, wir haben ts export -> babel import Laufen. Jetzt müssen wir module.exports aliased to default -> ts import arbeiten.

Ich bin ein bisschen spät dran für die Party, aber soweit ich weiß, ist dies ein Wonntfix des TypeScript-Teams.

tl;dr: Sie können ein export default nicht in ein module.exports = übersetzen. Verwenden Sie stattdessen die alte import ... = require(...) -Syntax :(

Da der ES-6-Standardexport im Grunde nur ein normaler Export mit dem Namen 'default' ist, wäre das Äquivalent in CJS ein exports.default = . und der Import würde in CJS so aussehen var something = require('something').default . Die module.exports = -Syntax ist nicht ausreichend, da sie das Modul gleich dem exportierten Symbol selbst macht, wodurch es unmöglich wird, zirkuläre Abhängigkeiten aufzulösen. Dies widerspricht dem Design der ES6-Module. IMHO hat das Babel-Team damit etwas übertrieben :(

@dreampulse Ich verwende diesen Syndax:

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

@kataras das funktioniert bei mir leider nicht:

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

Code

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

tsconfig.json

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

Was funktioniert, sind zwei Importe. Wie:

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

Sie können die Compileroption allowSyntheticDefaultImports verwenden, die diese Art des Imports ermöglicht:

import React, {Component} from 'react';

danke @jbrantly. Genau richtig!!

@ligaz danke!

Nur als Referenz musste ich "module": "es2015", zu tsconfig.json hinzufügen, bevor der von @ligaz erwähnte Fix für mich funktionierte.

Ich verwende import React, {Component, PropTypes} from 'react'; und erhalte den Fehler Cannot resolve symbol PropTypes . Irgendein Hinweis, wie man dieses Problem lösen kann?

@kkarmalkar Wenn Sie React >=15.5.0 verwenden, sollten Sie von React.PropTypes auf das neue Prop-Types-Paket und die Definitionen migrieren.

Super, danke @corydeppen

Obwohl ich allowSyntheticDefaultImports habe, kann ich es nicht bekommen

import React, {Component} from 'react';

zu arbeiten, aber mit

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

funktioniert gut. Ich habe mein Modul auf es5 eingestellt. Wird beim Kompilieren von Code für den Browser empfohlen, es6 zu verwenden? Ich habe es2015 zu meiner libs-Eigenschaft in tsconfig.json hinzugefügt.

@richtera Möglicherweise verwandt mit?: https://github.com/Microsoft/TypeScript/issues/21621

Es hängt zusammen, ja. Seltsam, dass es laut diesem Thread für Sie funktioniert.

Fügen Sie einfach eine tsconfig-Option esModuleInterop: true hinzu und dann können Sie Standardimporte verwenden, dh import React from 'react'

Wenn Sie Webpack verwenden, können Sie mit diesem Setup auch babel fallen lassen.

Das funktioniert jetzt. Ich denke, es hing mit bestimmten Versionen von Webpack und Typoskript zusammen, die ich zu dieser Zeit verwendet hatte. Babel-Setups sind leider immer noch für die Nicht-Javascript-Nutzung von Babel erforderlich.

"allowSyntheticDefaultImports": wahr

"module": "es2015
“allowSyntheticDefaultImports”：true

Arbeiten ....

"module": "es2015
“allowSyntheticDefaultImports”：true

Arbeiten ....

Ist das ein Troll? :) Direktionale Anführungszeichen in der letzten Zeile, und es ist kein Doppelpunkt vor true . Sollte wie folgt sein:

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

import { default as ProjectInfoProfile } from './ProjectInfoProfile';
oder
ProjectInfoProfile aus './ProjectInfoProfile' importieren;

in diesem Fall könnte es funktionieren.

"modul": "commonjs",
"Ziel": "es6",
"esModuleInterop": wahr,
"jsx": "reagieren",
"allowSyntheticDefaultImports": wahr