CODEWITHSUNDEEP
javascripttypescript
Trace
Trace

Reputation: 18859

Typescript default export

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:

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 (compiled 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?

Upvotes: 4

Views: 6346

Answers (2)

Paleo
Paleo

Reputation: 23682

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 compiled 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.

Upvotes: 2

Max Koretskyi
Max Koretskyi

Reputation: 105439

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 compiled 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 compiled into commonjs es5 module syntax. Typescript compiler uses properties on exports object to map multiple exports defined on es6 module syntax. And default is just like any other named export.

Upvotes: 1

Related Questions