web-dev-qa-db-fra.com

Nouvelle syntaxe es6 pour importer des modules commonjs/AMD, par exemple `import foo = require ('foo')`

Auparavant je pouvais faire: 

import foo = require('foo');

Mais maintenant que TypeScript (1.5) prend en charge la syntaxe de module es6, quelle est la bonne façon d’obtenir la même chose dans la syntaxe de module ES6?.

javascripttypescriptecmascript-6
44
basarat

La bonne façon est de continuer à utiliser l'ancienne syntaxe d'importation. La nouvelle syntaxe d'importation concerne uniquement les modules ES et l'ancienne syntaxe d'importation concerne les modules antérieurs à ES6. Les deux sont distincts, intentionnellement. import * as foo from 'foo' importe tous les propriétés du module 'foo', il n'importe pas la valeur par défaut sous la forme foo. 

Du concepteur de la fonctionnalité :

  • Une déclaration d'exportation par défaut déclare toujours un membre exporté nommé default et est toujours émise en tant qu'affectation à exports.default. En d'autres termes, export default a toujours la sémantique du module ES. Pour assurer la compatibilité avec Babel, nous pourrions éventuellement émettre un marqueur __esModule lorsqu'un module a une exportation par défaut, mais nous n'utiliserions en fait ce marqueur pour rien.
  • Une déclaration export =, qui substitue une entité différente à exporter à la place du module lui-même, est toujours émise sous forme d'affectation à module.exports. C'est une erreur d'avoir d'autres exportations dans un module qui utilise export =. C'est le comportement TypeScript existant.
  • Un module qui utilise export = pour exporter un autre module (qu’il s’agisse d’un module interne ou externe) peut être importé à l’aide des nouvelles constructions ES6. En particulier, les importations de déstructuration pratiques peuvent être utilisées avec ces modules. Le modèle d'utilisation de export = pour exporter un autre module est courant dans les fichiers .d.ts qui fournissent une vue CommonJS/AMD d'un module interne (par exemple, angular.d.ts).
  • Un module qui utilise export = pour exporter une entité autre que le module à la place du module lui-même doit être importé à l'aide de la syntaxe import x = require("foo") existante, comme c'est le cas aujourd'hui.

Mise à jour 2016: Le compilateur TypeScript a commencé à permettre à import * as foo from 'legacy-module-foo' d'obtenir l'importation par défaut d'un module hérité dans certaines circonstances. Ceci est une violation de la spécification ES6 ( §15.2.1.16 , "La valeur" * "indique que la demande d'importation concerne l'objet de nom de l'espace de nom du module cible .").

Lorsque les modules existants que vous importez de cette manière sont mis à jour vers les modules ES6, les importations «par défaut» de ces modules cesseront de fonctionner (car les importations * as foo sont supposées être importées objets d'espace de nom) ce qui peut être extrêmement déroutant si vous ne savez pas que cela est un hack TypeScript/SystemJS. Il est également possible qu'un futur réalignement de TypeScript sur la spécification ES provoque leur rupture.

En tant que tel, vous devriez probablement préférer continuer à utiliser la syntaxe d'importation héritée décrite ci-dessus pour charger des modules hérités afin d'éviter toute confusion avec les autres développeurs travaillant sur votre code sur le fonctionnement des importations d'espace de noms ES6 et avec des modifications incohérentes.

78
C Snover

La syntaxe correspondante pour la syntaxe du module ES6 est la suivante: 

import * as foo from 'foo';

Importez fondamentalement tout du module foo dans une variable locale portant le nom foo.

9
basarat

Les modules ES6 sont en réalité des modules externes TypeScript avec un nouveau fichier syntaxe: les modules ES6 sont des fichiers sources chargés séparément, éventuellement importer d'autres modules et fournir un certain nombre d'éléments accessibles de l'extérieur exportations. Les modules ES6 comportent plusieurs nouvelles exportations et importations déclarations. Il est recommandé d'utiliser les bibliothèques TypeScript et les applications soient mises à jour pour utiliser la nouvelle syntaxe, mais ce n'est pas un exigence.

La source

Autant que je sache, cela signifie que vous êtes encouragé à migrer vos propres modules TypeScript vers la nouvelle syntaxe, mais continuez à utiliser import foo = require('foo') pour importer les modules AMD/CommonJS réels.

3
cubuspl42

Une autre option consiste à l'importer en utilisant la syntaxe commonjs:

const foo = require("foo");

TypeScript et Bable conviennent tous les deux de ce qu'il faut faire avec cela. De plus, si vous compilez jusqu'à ES5 ou moins, cela ne sera pas trop éloigné de sa forme finale.

1
johnnyodonnell

A partir de TypeScript 2.7 , un nouvel indicateur esModuleInterop peut être utilisé pour activer les importations par défaut avec CommonJS/AMD/UMD. En définissant cet indicateur sur true dans votre tsconfig.json, cela devrait fonctionner comme prévu:

import foo from 'foo';
1
Danny Guo

tout importer,

const foo = require("foo");

cela importera toutes les occurrences du paquet "foo" si c'est un fichier alors

const foo = require("./foo");

afin que vous puissiez accéder à chaque instance en appelant, foo.InstanceName

si vous voulez importer une instance spécifique,

import MyInstance from "foo";

donc cela importera une instance spécifique (Myinstance) de "foo" vous pouvez toujours tout importer en utilisant la méthode ci-dessus,

import * as ReferenceName from "foo";

son équivalent à, 

const ReferenceName = require("foo");
0
Mohideen ibn Mohammed