Exportation typographique vs exportation par défaut

Quelle est la différence entre Typescript entre export et default export . Dans tous les tutoriels, je vois des personnes export leurs classes et je ne peux pas comstackr mon code si je n’ajoute pas le mot-clé default avant l’exportation.

De plus, je n’ai trouvé aucune trace du mot-clé d’exportation par défaut dans la documentation officielle du fichier texte .

 export class MyClass { collection = [1,2,3]; } 

Ne comstack pas Mais:

 export default class MyClass { collection = [1,2,3]; } 

Est-ce que.

L’erreur est la suivante: error TS1192: Module '"src/app/MyClass"' has no default export.

    Export par défaut ( export default )

     // MyClass.ts -- using default export export default class MyClass { /* ... */ } 

    La principale différence est que vous ne pouvez avoir qu’une exportation par défaut par fichier et que vous l’importez comme ceci:

     import MyClass from "./MyClass"; 

    Vous pouvez lui donner n’importe quel nom que vous aimez. Par exemple, cela fonctionne bien:

     import MyClassAlias from "./MyClass"; 

    Exportation nommée ( export )

     // MyClass.ts -- using named exports export class MyClass { /* ... */ } export class MyOtherClass { /* ... */ } 

    Lorsque vous utilisez une exportation nommée, vous pouvez avoir plusieurs exportations par fichier et vous devez importer les exportations entourées d’accolades:

     import { MyClass } from "./MyClass"; 

    Remarque: L’ajout des accolades corrige l’erreur que vous décrivez dans votre question et le nom spécifié dans les accolades doit correspondre au nom de l’exportation.

    Ou disons que votre fichier a exporté plusieurs classes, vous pouvez alors importer les deux comme ceci:

     import { MyClass, MyOtherClass } from "./MyClass"; // use MyClass and MyOtherClass 

    Ou vous pourriez donner à l’un d’eux un nom différent dans ce fichier:

     import { MyClass, MyOtherClass as MyOtherClassAlias } from "./MyClass"; // use MyClass and MyOtherClassAlias 

    Ou vous pouvez importer tout ce qui est exporté en utilisant * as :

     import * as MyClasses from "./MyClass"; // use MyClasses.MyClass and MyClasses.MyOtherClass here 

    Lequel utiliser?

    Dans ES6, les exportations par défaut sont concises car leur cas d’utilisation est plus courant ; Cependant, lorsque je travaille sur du code interne à un projet dans TypeScript, je préfère utiliser les exportations nommées au lieu des exportations par défaut presque tout le temps car cela fonctionne très bien avec le refactoring du code. Par exemple, si vous exportez par défaut une classe et renommez cette classe, elle ne renommera que la classe de ce fichier et pas les autres références des autres fichiers. Avec les exportations nommées, la classe et toutes les références à cette classe seront renommées dans tous les autres fichiers.

    Il joue également très bien avec les fichiers barrel (fichiers qui utilisent des export * espace de noms – export * – pour exporter d’autres fichiers). Un exemple de ceci est montré dans la section “exemple” de cette réponse .

    Notez que mon opinion sur l’utilisation d’exportations nommées même s’il n’y a qu’une exportation est contraire au manuel TypeScript – voir la section “Drapeaux rouges”. Je crois que cette recommandation ne s’applique que lorsque vous créez une API à utiliser par d’autres personnes et que le code n’est pas interne à votre projet. Lorsque je conçois une API pour les utilisateurs, j’utilise une exportation par défaut pour que les utilisateurs puissent import myLibraryDefaultExport from "my-library-name"; . Si vous n’êtes pas d’accord avec moi sur ce point, j’aimerais entendre votre raisonnement.

    Cela dit, trouvez ce que vous préférez! Vous pouvez utiliser l’un, l’autre ou les deux en même temps.

    Points additionnels

    Une exportation par défaut est en réalité une exportation nommée avec le nom default , donc si le fichier a une exportation par défaut, vous pouvez également importer en faisant:

     import { default as MyClass } from "./MyClass"; 

    Et notez que ces autres moyens d’importation existent:

     import MyDefaultExportedClass, { Class1, Class2 } from "./SomeFile"; import MyDefaultExportedClass, * as Classes from "./SomeFile"; import "./SomeFile"; // runs SomeFile.js without importing any exports 

    Voici un exemple avec une exportation d’object simple.

     var MyScreen = { /* ... */ width : function (percent){ return window.innerWidth / 100 * percent } height : function (percent){ return window.innerHeight / 100 * percent } }; export default MyScreen 

    Dans le fichier principal (à utiliser lorsque vous ne voulez pas créer de nouvelle instance et que vous n’en avez pas besoin) et que ce fichier n’est pas global, vous ne l’importerez que lorsque cela sera nécessaire:

     import MyScreen from "./module/screen"; console.log( MyScreen.width(100) ); 

    J’essayais de résoudre le même problème, mais j’ai trouvé un conseil intéressant de Basarat Ali Syed , de la renommée de TypeScript Deep Dive , à savoir éviter la déclaration d’ export default pour une classe et append la balise export à la déclaration de classe. La classe imscope doit plutôt être répertoriée dans la commande d’ import du module.

    C’est à dire: au lieu de

     class Foo { // ... } export default Foo; 

    et la simple import Foo from './foo'; dans le module qui va importer, il faut utiliser

     export class Foo { // ... } 

    et import {Foo} from './foo' dans l’importateur.

    La raison en est la difficulté de refactorisation des classes et le travail supplémentaire à exporter. Le message original de Basarat est en export default peut entraîner des problèmes