Make the switch from TypeScript namespaces to ES2015 modules

Question

Make the switch from TypeScript namespaces to ES2015 modules

After making adjustments to my TypeScript configuration, I am now encountering errors related to the no-namespace rule.

Here is how my current setup involving namespaces looks like:

Exporting classes within a namespace:

namespace MyNamespace {
    export class Foo {}
    export class Bar {}
}

Importing and accessing classes:

import MyNamespace from './my-namespace';

// access classes
MyNamespace.Foo;
MyNamespace.Bar;

I would like to switch to using ES2015 modules as recommended (without simply disabling the rule). Is there a way to accomplish this while retaining my existing import syntax? I'm not a fan of the syntax

import {Foo, Bar} from './my-namespace'

.

typescript eslint typescript-eslint

Answer 1

Answer №1

Check out the official response.

To simplify your code, consider replacing namespaces with modules:

Get rid of the namespace syntax:

    //namespace MyNamespace {   <-- delete this line
    export class Foo {}
    export class Bar {}
    //}                         <-- delete this line

Use a named import in the necessary file:

import * as MyNamespace from './my-namespace';

// access classes
MyNamespace.Foo;
MyNamespace.Bar;

Answer 2

Check out the official response.

To simplify your code, consider replacing namespaces with modules:

Get rid of the namespace syntax:

    //namespace MyNamespace {   <-- delete this line
    export class Foo {}
    export class Bar {}
    //}                         <-- delete this line

Use a named import in the necessary file:

import * as MyNamespace from './my-namespace';

// access classes
MyNamespace.Foo;
MyNamespace.Bar;

Answer 3

Answer №2

To organize your imports into namespaces, you can utilize the * as ... import syntax:

export class Car {}
export class Bike {}

import * as VehicleType from './vehicle-type';

// access classes
VehicleType.Car;
VehicleType.Bike;

Answer 4

To organize your imports into namespaces, you can utilize the * as ... import syntax:

export class Car {}
export class Bike {}

import * as VehicleType from './vehicle-type';

// access classes
VehicleType.Car;
VehicleType.Bike;

Answer 5

Answer №3

When utilizing the export keyword, you can follow @cyr_x's suggestion. It's worth noting that using export default is also a valid method for creating a namespace.

export {default as YourCustomisedName} from '<your file path>'

Answer 6

When utilizing the export keyword, you can follow @cyr_x's suggestion. It's worth noting that using export default is also a valid method for creating a namespace.

export {default as YourCustomisedName} from '<your file path>'

Make the switch from TypeScript namespaces to ES2015 modules

Answer №1

Answer №2

Answer №3

Similar questions

What is the best approach to handling an undefined quantity of input FormControls within Angular?

Matching multiline input with RegExp and grouping matches from consecutive lines

Sending an object between two components without a direct parent-child connection

Is it feasible to access a service instance within a parameter decorator in nest.js?

You must add the module-alias/register to each file in order to use path aliases in

The letter 'X' is not suitable for use as a JSX component because its return type 'Element[]' does not qualify as a valid JSX element

What is the method for transmitting a URL API from an ASP.NET Core server to my Angular 2 single application?

Subclass method overloading in Typescript

What is the best way to fully reload an Angular component when the route is changed?

Finding the specific type within a union based on its field type

Issues arising with code splitting using React HashRouter in a project utilizing Typescript, React 17, and Webpack 5

How to resolve useState problem in useEffect when state is not null

Combine an array of objects that are dynamically created into a single object

Experimenting with altering the heights of two Views using GestureHandler in React Native

Prohibit using any as an argument in a function if a generic type is

Modify the height of React Cards without implementing collapse functionality

Is it possible to pass a variable to a text constant in Angular?

Capturing user audio on the client side with Angular

Ways to dynamically authenticate in AuthGuard and return a true value

The issue encountered during a POST request in Postman is a SyntaxError where a number is missing after the minus sign in a JSON object at position 1 (line 1