react - typescript vs javascript diferencias

Exportación de mecanografía frente a exportación predeterminada

Question

¿Cuál es la diferencia en Typecript entre export y default export ? En todos los tutoriales veo personas export sus clases y no puedo compilar mi código si no agrego la palabra clave default antes de exportar.

Además, no pude encontrar ningún rastro de la palabra clave de exportación predeterminada en la documentación oficial del mecanografiado .

export class MyClass {

  collection = [1,2,3];

}

No compila Pero:

export default class MyClass {

  collection = [1,2,3];

}

Hace.

El error es: error TS1192: Module ''"src/app/MyClass"'' has no default export.

Answer 1

Aquí hay un ejemplo con la exportación de objetos simples.

var MyScreen = {

    /* ... */

    width : function (percent){

        return window.innerWidth / 100 * percent

    }

    height : function (percent){

        return window.innerHeight / 100 * percent

    }


};

export default MyScreen

En el archivo principal (se usa cuando no desea y no necesita crear una nueva instancia) y no es global, importará esto solo cuando sea necesario:

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

Answer 2

Estaba tratando de resolver el mismo problema, pero encontré un consejo interesante de Basarat Ali Syed , de la fama de inmersión profunda de TypeScript , de que deberíamos evitar la declaración export default genérica para una clase y, en su lugar, agregar la etiqueta de export a la declaración de clase. La clase importada debería figurar en el comando de import del módulo.

Es decir: en lugar de

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

y la simple import Foo from ''./foo''; en el módulo que importará, uno debería usar

export class Foo {
    // ...
}

e import {Foo} from ''./foo'' en el importador.

La razón de esto son las dificultades en la refactorización de las clases y el trabajo adicional para la exportación. La publicación original de Basarat está en export default puede provocar problemas

Answer 3

Exportación predeterminada ( export default )

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

La principal diferencia es que solo puede tener una exportación predeterminada por archivo y la importa así:

import MyClass from "./MyClass";

Puedes darle el nombre que quieras. Por ejemplo, esto funciona bien:

import MyClassAlias from "./MyClass";

Exportación con nombre ( export )

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

Cuando utiliza una exportación con nombre, puede tener múltiples exportaciones por archivo y debe importar las exportaciones entre llaves:

import { MyClass } from "./MyClass";

Nota: Agregar las llaves corregirá el error que está describiendo en su pregunta y el nombre especificado en las llaves debe coincidir con el nombre de la exportación.

O bien, digamos que su archivo exportó varias clases, entonces podría importar ambas cosas así:

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

O podría dar a cualquiera de ellos un nombre diferente en este archivo:

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

O puede importar todo lo que se exporta utilizando * as :

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

¿Cuál usar?

En ES6, las exportaciones predeterminadas son concisas porque su caso de uso es más común ; sin embargo, cuando estoy trabajando en código interno de un proyecto en TypeScript, prefiero usar exportaciones con nombre en lugar de exportaciones predeterminadas casi todo el tiempo porque funciona muy bien con la refactorización de código. Por ejemplo, si exporta por defecto una clase y cambia el nombre de esa clase, solo cambiará el nombre de la clase en ese archivo y no ninguna de las otras referencias en otros archivos. Con exportaciones con nombre, cambiará el nombre de la clase y todas las referencias a esa clase en todos los demás archivos.

También funciona muy bien con archivos de barril (archivos que usan export * espacio de nombres —exportar export * — para exportar otros archivos). Un ejemplo de esto se muestra en la sección "ejemplo" de esta respuesta .

Tenga en cuenta que mi opinión sobre el uso de exportaciones con nombre, incluso cuando solo hay una exportación, es contraria al Manual TypeScript: consulte la sección "Banderas rojas". Creo que esta recomendación solo se aplica cuando está creando una API para que la utilicen otras personas y el código no es interno de su proyecto. Cuando estoy diseñando una API para que la usen las personas, import myLibraryDefaultExport from "my-library-name"; una exportación predeterminada para que las personas puedan import myLibraryDefaultExport from "my-library-name"; . Si no está de acuerdo conmigo en hacer esto, me encantaría escuchar su razonamiento.

Dicho esto, ¡encuentra lo que prefieres! Puede usar uno, el otro o ambos al mismo tiempo.

Puntos adicionales

Una exportación predeterminada es en realidad una exportación con nombre con el nombre default , por lo que si el archivo tiene una exportación predeterminada, también puede importar haciendo:

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

Y tenga en cuenta que existen otras formas de importar:

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