Unable to export/import class from module/namespace in TypeScript

Question

I'm playing around with TypeScript and export/import.

I simply want to have a file-structure like in C#. I want to nest a helper-class whic only contains some constant string-properties. This is what the file ~/Scripts/Helper/UrlHelper.ts looks like:

module Helper.UrlHelper {
    abstract class Controller {
        protected static readonly controllerName: string;
    }

    export abstract class Account extends Controller {
        static controllerName: string = "Account";

        static readonly loginGet: string = [Account.controllerName, "Login"].join("/");
        static readonly loginPost: string = [Account.controllerName, "Login"].join("/");
    }
}

My goal is to use the values e.g. Helper.UrlHelper.Account.loginPost. But I don't get the import/export to work.

My last try was to add export * from "./Helper/UrlHelper" and use the import import {Account} from "../Helper/UrlHelper";

This leads to the error:

Module '".../Scripts/Helper/UrlHelper"' has no exported member 'Account'

I tried nearly everything from here, but nothing worked. What am I doing wrong?

Paleo · Accepted Answer · 2017-09-12 15:28:05Z

1

Do not use the keyword module, just export the members you need to import elsewhere:

// Helper/UrlHelper.ts
abstract class Controller {
    protected static readonly controllerName: string;
}

export abstract class Account extends Controller {
    static controllerName: string = "Account";

    static readonly loginGet: string = [Account.controllerName, "Login"].join("/");
    static readonly loginPost: string = [Account.controllerName, "Login"].join("/");
}

Then, the exported member Account can be imported:

// other-directory/other-file.ts
import { Account } from "../Helper/UrlHelper"

The documentation on modules is here:

https://www.typescriptlang.org/docs/handbook/modules.html

You could also use namespaces but it isn't an ES6 standard. If you really want namespaces, here is the documentation:

3 Comments

Tim B James Over a year ago

On top of this answer, another helpful tip is that import's also work at the folder level if you have an index file in the folder, e.g. import { Account } from '../Helper'; If you have a file called index.ts in the Helper folder. In the index file, you will need to include the code export * from './UrlHelper';. Handy for then only needing 1 line for importing all your helpers.

Paleo Over a year ago

@TimBJames Interesting. But is it described somewhere? Is it a robust solution that works with all protocols (AMD, CommonJS, ES6) and all bundlers/loaders?

Tim B James Over a year ago

I am not 100%, some more info is here though stackoverflow.com/questions/44028806/…

codejockie · Accepted Answer · 2017-09-12 15:31:29Z

0

Referencing this: https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html
You're advised to not wrap classes in modules as it can become unnecessarily confusing.
A better option would be:

abstract class Controller { /* ... */ }
export abstract class Account extends Controller { /* ... */ }

This is could be placed in a Helper naming the file UrlHelper.ts as suggested.
Then later on when you want to import the class, you do:

import { Account } from "./Helper/UrlHelper";

answered Sep 12, 2017 at 15:31

codejockie

11.1k5 gold badges52 silver badges58 bronze badges

Collectives™ on Stack Overflow

Unable to export/import class from module/namespace in TypeScript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related