I just started taking a look at Typescript and have an issue when playing around.
I want to write a library to manage a general tree structure and just doing some very basic tests to see how TS works.

Start of the simple setup with 3 files:

• GForest.ts
• GTree.ts
• GNode.ts

Currently, GForest.ts:

import * as Immutable   from "immutable"; 
import GTree            from "./GTree"; 

export default class Forest{ 
    public static createTree(){ 
        let tree = new GTree(); 
    } 
} 

GTree.ts:

export default class GTree{ 
    constructor(){ 
        console.log("Tree constructed"); 
    } 

    public static createNode(){ 

    } 
} 

I created a simple test.js file to call the library (piled TS to ES5):

var GForest = require("./build/GForest"); 

console.log(GForest); 

When running

> node test

The output is:

I don't understand why the result is:

{ default: { [Function: Forest] createTree: [Function] } }

Why is there an object with default as key and how do I change this to achieve desired behaviour?

Because of this, I'm unable to just call:

GForest.createTree(); 

(I want to expose the creation of a tree through a static factory) Any help?

I just started taking a look at Typescript and have an issue when playing around.
I want to write a library to manage a general tree structure and just doing some very basic tests to see how TS works.

Start of the simple setup with 3 files:

• GForest.ts
• GTree.ts
• GNode.ts

Currently, GForest.ts:

import * as Immutable   from "immutable"; 
import GTree            from "./GTree"; 

export default class Forest{ 
    public static createTree(){ 
        let tree = new GTree(); 
    } 
} 

GTree.ts:

export default class GTree{ 
    constructor(){ 
        console.log("Tree constructed"); 
    } 

    public static createNode(){ 

    } 
} 

I created a simple test.js file to call the library (piled TS to ES5):

var GForest = require("./build/GForest"); 

console.log(GForest); 

When running

> node test

The output is:

I don't understand why the result is:

{ default: { [Function: Forest] createTree: [Function] } }

Why is there an object with default as key and how do I change this to achieve desired behaviour?

Because of this, I'm unable to just call:

GForest.createTree(); 

(I want to expose the creation of a tree through a static factory) Any help?

• javascript
• typescript

• why do you use var GForest = require("./build/GForest"); inside test.js instead of import and then piling the file to js? – Max Koretskyi Commented Nov 23, 2016 at 10:35
• @Maximus I just run test.js as a simple node script. Not sure why I would want to write import, then pile for this (?). – Trace Commented Nov 23, 2016 at 10:39
• Never mind, please see my answer – Max Koretskyi Commented Nov 23, 2016 at 10:43

2 Answers 2

Use the ES6 default export

I quote the article ES6 In Depth: Modules from Mozilla:

If you’d like your own ES6 module to have a default export, that’s easy to do. There’s nothing magic about a default export; it’s just like any other export, except it’s named "default".

In your test.js file, the "default" feature is inelegant because you want to consume the ES6 default export from an ES5 syntax. I suggest to use the ES6 syntax with the help of TypeScript:

// test.ts
import GForest from "./build/GForest";
console.log(GForest); // { [Function: Forest] createTree: [Function] }

This code is piled to:

var GForest_1 = require("./build/GForest"); 
console.log(GForest_1.default);

Directly export a class

In TypeScript, you can directly export a member with the non-standard syntax export =.

Example:

// GForest.ts
import * as Immutable   from "immutable"; 
import GTree            from "./GTree"; 

class Forest{ 
    public static createTree(){ 
        let tree = new GTree(); 
    } 
}
export = Forest;

Then, use it with a code ES3/5:

// test.js
let GForest = require("./build/GForest");
console.log(GForest); // { [Function: Forest] createTree: [Function] }

... or, in TypeScript:

// test.ts
import GForest = require("./build/GForest");
console.log(GForest); // { [Function: Forest] createTree: [Function] }

See the documentation on export = here.

Why is there an object with default as key and how do I change this to achieve desired behaviour?

That's because it is what is exported from piled GForest.js:

"use strict";
var GTree_1 = require("./GTree");
var Forest = (function () {
    function Forest() {
    }
    Forest.createTree = function () {
        var tree = new GTree_1["default"]();
    };
    return Forest;
}());
exports.__esModule = true;
exports["default"] = Forest;

You need to use .default to refer to the constructor:

var GForest = require("./build/GForest").default; 

Typescript uses es6 module syntax which can export multiple modules. This code is then piled into monjs es5 module syntax. Typescript piler uses properties on exports object to map multiple exports defined on es6 module syntax. And default is just like any other named export.