Guide to implementing an "export default" with various types and values in a TypeScript module

Question

Guide to implementing an "export default" with various types and values in a TypeScript module

There is a simple way to export multiple values as default:

class Car {...}
class Bus {...}

export default { Car, Bus }

You can also easily export a type as default

export default interface Airplane {...}

However, exporting multiple types as default is not allowed

interface Airplane {...}
interface Motorcycle {...}

// 'Airplane' only refers to a type, but is being used as a value here. ts(2693)
export default { Airplane, Motorcycle }

And mixing multiple types and values as default is also not supported.

class Car {...}
interface Motorcycle {...}

// 'Airplane' only refers to a type, but is being used as a value here. ts(2693)
export default { Car, Airplane }

If you need to achieve this, there may be alternative solutions to explore.

typescript typescript-typings typescript2.0 es6-modules

Answer 1

Answer №1

Explore the functionality of the export = syntax.

With the export = syntax, you can designate a single object to be exported from the module. This object could range from a class, interface, namespace, function, or enum.

VehicleModule.ts

namespace VehicleModule {
    export class Car {
        // ...
    }

    export class Bus {
        // ...
    }
}

export = VehicleModule;

TestFile1.ts

import VehicleModule from './VehicleModule';

const car = new VehicleModule.Car();
const bus = new VehicleModule.Bus();

TestFile2.ts

import { Bus, Car } from './VehicleModule';

const car = new Car();
const bus = new Bus();

For more information, visit https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require

Answer 2

Explore the functionality of the export = syntax.

With the export = syntax, you can designate a single object to be exported from the module. This object could range from a class, interface, namespace, function, or enum.

VehicleModule.ts

namespace VehicleModule {
    export class Car {
        // ...
    }

    export class Bus {
        // ...
    }
}

export = VehicleModule;

TestFile1.ts

import VehicleModule from './VehicleModule';

const car = new VehicleModule.Car();
const bus = new VehicleModule.Bus();

TestFile2.ts

import { Bus, Car } from './VehicleModule';

const car = new Car();
const bus = new Bus();

For more information, visit https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require

Answer 3

Answer №2

When you export in this manner:

class Car {...}
interface Motorcycle {...}

// 'Airplane' is only a type reference, but it is being treated as a value in this context. ts(2693)
export default { Car, Airplane }

What you are doing is **exporting a default object with two properties*.*

Subsequently, in your code, you can import it like this:

// name it as you prefer for the default import
import transport from transport;

and utilize it as follows:

....new transport.Car()
....new transport.Plane()

Answer 4

When you export in this manner:

class Car {...}
interface Motorcycle {...}

// 'Airplane' is only a type reference, but it is being treated as a value in this context. ts(2693)
export default { Car, Airplane }

What you are doing is **exporting a default object with two properties*.*

Subsequently, in your code, you can import it like this:

// name it as you prefer for the default import
import transport from transport;

and utilize it as follows:

....new transport.Car()
....new transport.Plane()

Guide to implementing an "export default" with various types and values in a TypeScript module

Answer №1

Answer №2

Similar questions

Deploy the Angular standalone component numerous times across a single page using Bootstrap

Increase the ngClass attribute's value

Unused code splitting chunk in React production build would improve performance and efficiency of

Is there a way to establish a pre-defined key in a mat-table?

Transmitting MQTT information through an application programming interface

Issue with TypeScript: Assigning type 'type' to 'IntrinsicAttributes & type & { children?: ReactNode; }' is not allowed. What is the solution?

Is it possible for a button to be assigned to a variable upon creation, but encounter an error when trying to

Delete one item from a group of objects[]

Tips for implementing conditional styling (using else if) in a react component

The issue arises when attempting to drop elements from two lists with incorrect positions and mismatched coordinates

I implemented progress bars in Angular 2 that have changing maximum values. The service updates the maximum value for each bar dynamically. Currently, the progress bars are functioning at 100% capacity

Attempting to call a function with a template variable is not allowed

How can you implement a null filter in the mergeMap function below?

Setting a default check on a checkbox within an ngFor loop in Angular 2

Easy Steps to Simplify Your Code for Variable Management

Eliminate the unnecessary code repetition in my functions using Typescript

Having trouble looping through an array in Angular 2?

"Navigate to another screen with the FlatList component upon press, displaying specific

Can you explain the meaning of <T = MyType>?

The 'catch' property is not found within the type 'PromiseLike<void>'