打字稿默認導出

Question

我剛剛開始看看Typescript，並在玩游戲時遇到問題。
我想編寫一個庫來管理一般的樹結構，只是做一些非常基本的測試來看看TS是如何工作的。

使用3個文件開始簡單設置：

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

目前，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(){ 

    } 
} 

我創建了一個簡單的test.js文件來調用庫（編譯TS到ES5）：

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

console.log(GForest); 

跑步時

> node test

輸出是：

我不明白為什么結果如下：

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

為什么有一個default為鍵的對象，如何更改它以實現所需的行為？

因此，我無法打電話：

GForest.createTree(); 

（我想通過靜態工廠公開樹的創建）任何幫助？

Answer 1

使用ES6 default導出

我引用文章ES6 In Depth：來自Mozilla的模塊 ：

如果您希望自己的ES6模塊具有默認導出功能，那么這很容易做到。 默認導出沒有什么神奇之處; 它就像任何其他導出一樣，除了它被命名為"default" 。

在test.js文件中，“默認”功能test.js優雅，因為您希望從ES5語法中使用ES6 default導出。 我建議在TypeScript的幫助下使用ES6語法：

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

此代碼編譯為：

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

直接導出一個類

在TypeScript中，您可以使用非標准語法export =直接導出成員。

例：

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

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

然后，使用代碼ES3 / 5：

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

...或者，在TypeScript中：

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

請參閱有關export = here的文檔 。

Answer 2

為什么有一個默認為鍵的對象，如何更改它以實現所需的行為？

那是因為它是從已編譯的GForest.js導出的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;

您需要使用.default來引用構造函數：

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

Typescript使用es6模塊語法，可以導出多個模塊。 然后將此代碼編譯為commonjs es5模塊語法。 打字稿編譯器使用properties上exports對象映射上定義的多個出口es6模塊語法。 default就像任何其他named導出一樣。