Is it possible to declare a namespaced class in TypeScript?

Question

Is it possible to declare a namespaced class in TypeScript?

Currently, I'm in the process of converting JavaScript code to TypeScript and encountering some challenges with converting class definitions.

These classes are based on Marionette and have namespaced class names. For instance, in JavaScript with the 'xyz' namespace:

xyz.Marionette.AppRouter = Marionette.AppRouter.extend({
    instance_name: "AppRouter",

     functionName: function(options) {
     }
});

I attempted to convert this class definition to TypeScript as follows:

class xyz.Marionette.AppRouter extends Marionette.AppRouter {

However, it appears that this syntax is not supported in TypeScript.

Is there a way to declare a class in TypeScript with namespacing?

The responses provided below have been informative, but I still require clarity on how to articulate this definition, or if it's feasible at all.

typescript marionette

Answer 1

Answer №1

class nameSpace.Marionette.AppRouter extends Marionette.AppRouter {

First, declare the namespace followed by defining the class:

namespace nameSpace.Marionette {
    export class AppRouter {

    }
}

Answer 2

class nameSpace.Marionette.AppRouter extends Marionette.AppRouter {

First, declare the namespace followed by defining the class:

namespace nameSpace.Marionette {
    export class AppRouter {

    }
}

Answer 3

Answer №2

After attempting to mock this scenario, I encountered an issue with referencing the base AppRouter due to overlapping namespaces. To resolve this, I found that adding a qualifier of "base" to the first namespace solved the problem.

namespace base.Marionette {

    export class AppRouter {

        Foo() {
            return "Hello";
        }
    }
}

namespace nameSpace.Marionette {

    export class AppRouter2 extends base.Marionette.AppRouter {

        Bar() {
            var hello = this.Foo();
        }
    }
}

Answer 4

After attempting to mock this scenario, I encountered an issue with referencing the base AppRouter due to overlapping namespaces. To resolve this, I found that adding a qualifier of "base" to the first namespace solved the problem.

namespace base.Marionette {

    export class AppRouter {

        Foo() {
            return "Hello";
        }
    }
}

namespace nameSpace.Marionette {

    export class AppRouter2 extends base.Marionette.AppRouter {

        Bar() {
            var hello = this.Foo();
        }
    }
}

Is it possible to declare a namespaced class in TypeScript?

Answer №1

Answer №2

Similar questions

Angular Material - Stick to the Top

Using TypeScript, we can assign a JSON object to an extended class by leveraging the

When viewing an array, the objects' values are displayed clearly; however, when attempting to access a specific value, it

Ensuring type safety in TypeScript arrow function parameters

Is there a way to configure tsconfig so that it can properly recognize ".graphql" files and aliases when they are imported into components?

Guide to Injecting Services with Dependencies in Angular 2 (Using Ionic 2/Angular 2/Typescript)

Different ways to invoke a general method with a deconstructed array as its argument

Determine the category of a nested key within a different type

An unexpected token was discovered by Jest: export { default as v1 } when using uuid

I'm looking to find the Angular version of "event.target.value" - can you help me out?

Conceal the current component when navigating in Angular 2

What is the best way to assign default values when destructuring interfaces within interfaces in TypeScript?

Using TypeScript with React Redux, encountering issue of property not being available in the Reducer from the ActionType

Generic interface function in Typescript

Mocking multiple services and their constructors in an Angular 2 TypeScript Jasmine test component

Encountering Problem with NextJS and Typescript when Attempting to Import Protected Authentication to a Page

Tips for utilizing the patchValue method within a dynamic FormArray in Angular

What is the solution for resolving an Element that implicitly has said it has an 'any' type as the expression of type 'string' cannot be used to index the type?

Utilize information gathered through subscription to populate the List

Encountering browser freezing issues with a Next.JS app when trying to add an input field