TS file generated by Typewriter is not a module

Question

I used the Typewriter extension in Visual Studio to generate a model (Account.ts), but when I try to import the model in another class it fails. What am I doing wrong?

import { Account } from '../../models/greencard/Account';

Error

'C:/Users/me/Desktop/_REPOS/stuff/ClientApp/src/app/models/greencard/Account.ts' is not a module.   

Typewriter file

${
    // Enable extension methods by adding using Typewriter.Extensions.*
    using Typewriter.Extensions.Types;

    // Uncomment the constructor to change template settings.
    //Template(Settings settings)
    //{
    //    settings.IncludeProject("Project.Name");
    //    settings.OutputExtension = ".tsx";
    //}

    // Custom extension methods can be used in the template by adding a $ prefix e.g. $LoudName
    string LoudName(Property property)
    {
        return property.Name.ToUpperInvariant();
    }
}
module InvWebOps.EFModels.TypewriterTSTFiles {

templates e.g. $Properties[public $name: $Type][, ]

    // More info: http://frhagn.github.io/Typewriter/

$Classes(Account)[
    export class $Name {
        $Properties[
        // $LoudName
        public $name: $Type = $Type[$Default];]
    }]
}

Autogenerated Account.ts

module InvWebOps.EFModels.TypewriterTSTFiles {

    // More info: http://frhagn.github.io/Typewriter/


    export class Account {

        // ID
        public id: number = 0;
     ......

Answer 1

Short Answer

You can access the Account class in some other file by using its namespace.

namespace InvWebOps.EFModels.TypewriterTSTFiles {
    const account = new Account();
}

// the deprecated `module` keyword also works
module InvWebOps.EFModels.TypewriterTSTFiles {
    const account = new Account();
}

// a fully qualified name also works
const account = new InvWebOps.EFModels.TypewriterTSTFiles.Account();

More Details

What am I doing wrong?

The keyword module has been deprecated in favor of namespace. Both keywords mean the same thing, but the second one is less confusing. The official TypeScript docs say this about namespaces:

Namespaces are simply named JavaScript objects in the global namespace. This makes namespaces a very simple construct to use. They can span multiple files ... [and] ... can be a good way to structure your code in a Web Application...

The generated Account code does two things:

1. Adds the InvWebOps.EFModels.TypewriterTSTFiles namespace to the global scope.
2. Exports an Account class from that namespace.

Anything that gets exported from a namespace is only accessible from within that namespace. So, whenever a line of code needs to access the Account class, the line of code needs to use the Account class's namespace. The short answer shows three ways to do that.