Definitelytyped: Problème d'importation React ES6

export default react = React; pourrait bien fonctionner

Je pense que ce que vous voulez, c'est import * as React, {Component} from 'react'; (mais je peux me tromper, j'apprends encore une partie de ça aussi :smiley:)

J'ai donc passé pas mal de temps avec ES6 récemment et je pense qu'actuellement import React from 'react'; n'est techniquement pas un comportement valide car React n'utilise pas les modules de classes ES6 et ne peut donc pas spécifier d'exportation par défaut.

Cette syntaxe fonctionne lors de l'utilisation de Babel, mais c'est parce que Babel a essentiellement dit que "si vous utilisez une importation ES6 pour obtenir un module CommonJS, l'exportation par défaut est la même que modules.export . Cependant, c'est entièrement une chose Babel et pas une chose de spécification Du point de vue de la spécification, je dirais que import * as React from 'react'; est en fait beaucoup plus proche dans l'esprit (et cela fonctionne avec TypeScript prêt à l'emploi).

Cependant, c'est entièrement une chose de Babel et non une chose de spécification

D'accord. Mais babel a _beaucoup_ de traction et les gens pensent que c'est la bonne façon dont les modules ES6 _devraient_ se comporter.

@vvakame a fait du travail pour rendre l'interop avec les importations de type babel plus fluide : https://github.com/Microsoft/TypeScript/pull/3586

Oui, sauf que PR concerne principalement l'exportation hors de TypeScript, alors que ce problème concerne davantage l'importation dans TypeScript. En d'autres termes, ce PR n'aide pas à résoudre ce problème (mais c'est certainement bon pour créer des bibliothèques avec TypeScript !).

Je soupçonne que ce problème disparaîtra bientôt car Babel a été embauché par Facebook et je ne serais pas du tout surpris si React était réécrit en tant que modules ES6.

Ou, si vous voulez _vraiment_ utiliser cette syntaxe, vous pouvez modifier le fichier de déclaration en export default React mais vous devez cibler ES6, puis utiliser Babel pour transpiler vers CommonJS, sinon cela ne fonctionnera pas correctement au moment de l'exécution (TypeScript toujours transpiler en moduleName.default lors de l'utilisation des importations ES6).

Merci de clarifier. En bref, nous avons ts export -> babel import travail. Maintenant, nous avons besoin module.exports aliased to default -> ts import travail.

Je suis un peu en retard pour la fête, mais d'après ce que je sais, c'est une coutume de l'équipe TypeScript.

tl;dr : vous ne pouvez pas traduire un export default en un module.exports = . Utilisez plutôt la syntaxe héritée import ... = require(...) :(

Étant donné que l'exportation par défaut ES-6 est essentiellement une exportation régulière avec le nom 'default' , l'équivalent dans CJS serait un exports.default = . et l'importation ressemblerait à ceci dans CJS var something = require('something').default . La syntaxe module.exports = n'est pas suffisante car elle rend le module égal au symbole exporté lui-même, rendant les dépendances circulaires impossibles à résoudre. Cela va à l'encontre de la conception des modules ES6. À mon humble avis, l'équipe de Babel est allée un peu trop loin avec ça :(

@dreampulse Je fais en utilisant ce syndax :

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

@kataras qui ne fonctionne pas pour moi malheureusement :

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"
  }
}

Ce qui fonctionne, c'est d'avoir deux importations. Comme:

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

Vous pouvez utiliser l'option de compilation allowSyntheticDefaultImports qui permettra ce type d'importation :

import React, {Component} from 'react';

merci @jbrantly. Spot sur !!

@ligaz merci !

Juste pour référence, j'ai dû ajouter "module": "es2015", au tsconfig.json avant que le correctif mentionné par @ligaz ne fonctionne pour moi.

J'utilise import React, {Component, PropTypes} from 'react'; et j'obtiens l'erreur Cannot resolve symbol PropTypes . Un pointeur sur la façon de résoudre ce problème?

@kkarmalkar Si vous utilisez React >=15.5.0, vous souhaiterez migrer de React.PropTypes vers le nouveau package prop-types et definitions .

Génial, merci @corydeppen

Même si j'ai allowSyntheticDefaultImports je ne peux pas obtenir

import React, {Component} from 'react';

travailler, mais en utilisant

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

fonctionne bien. J'ai mon module réglé sur es5. Lors de la compilation du code pour le navigateur, est-il suggéré d'utiliser es6 ? J'ai ajouté es2015 à ma propriété libs dans tsconfig.json.

@richtera Peut-être lié à ? : https://github.com/Microsoft/TypeScript/issues/21621

C'est lié, oui. Curieux cependant que, selon ce fil, cela fonctionne pour vous.

Ajoutez simplement une option tsconfig esModuleInterop: true et vous pourrez ensuite utiliser les importations par défaut, c'est-à-dire import React from 'react'

Si vous utilisez Webpack, vous pouvez également abandonner Babel avec cette configuration.

Cela fonctionne maintenant. Je pense que cela était lié à des versions spécifiques de webpack et de tapuscrit que j'utilisais à l'époque. Les configurations de Babel sont malheureusement toujours nécessaires pour les utilisations non javascript de babel.

"allowSyntheticDefaultImports": vrai

"module": "es2015
“allowSyntheticDefaultImports”：true

Travaillant ....

"module": "es2015
“allowSyntheticDefaultImports”：true

Travaillant ....

Est-ce un troll ? :) Guillemets directionnels sur la dernière ligne, et ce n'est pas deux-points avant true . Devrait être comme suit :

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

import { default as ProjectInfoProfile } from './ProjectInfoProfile' ;
ou
importer ProjectInfoProfile à partir de './ProjectInfoProfile' ;

dans ce cas, ça peut marcher.

"module": "commonjs",
"cible": "es6",
"esModuleInterop": vrai,
"jsx": "réagir",
"allowSyntheticDefaultImports": vrai