2016-05-18 34 views
0

例如我有以下模塊如何使用TypeScript中相同模塊或名稱空間中的類?

Foo.Bar.ts

export module Foo { 
    export class Bar { } 
} 

而且我想用它在主,這也屬於同一模塊

主。 ts

export module Foo { 
    class MainBar { 
     constructor() { 
      new Bar(); // doesn't work 
     } 
    } 
} 

這不起作用unle ss我輸入Foo.Bar.ts,如下面的
import * as MyFooBar from "./Foo.Bar";然後以這種方式使用它new MyFooBar.Foo.Bar()

這似乎有點過分了,與示例Java非常不同。告訴我是唯一的方法嗎?

UPDATE:
所以我發現post,它仍然沒有回答我的問題。這有點像Roy Dictus所建議的,但我認爲這是目前我的問題最接近的答案。

回答

1

你可以寫

import {Bar} from "./Foo.Bar"; 

然後用

var newBar = new Bar(); 
+0

謝謝,但是,如果我先從模塊Foo中取出'class Bar',那麼這將起作用。 – starcorn

+0

我完全不理解這個評論。如果你把課拿出來,這會起作用嗎? –

+0

對不起,我的意思是,如果我不把課程包裝在一個模塊中,那麼你的解決方案就可以工作。 – starcorn

1

打字稿模塊的工作就像ES2015/2017年模塊。在一天結束時,模塊是文件,它們被加載爲異步。

在另一方面,模塊創建範圍如手動模塊模式實現:

Foo = (function() { 
    var export = {}; 
    export.x = 11; 
})(); 

您需要使用import因爲功能範圍將不會導入其他文件(即模塊 )變量,函數,...類默認情況下:應該手動導入。

當你需要從其他模塊東西,該操作相當於此:

// File1.js 
Foo = (function(export) { 
    export.x = 11; 

    return export; 
})(Foo || {}); 


// File2.js 
Foo = (function(export) { 
    // You access the "x" variable exported from the other file on the Foo module 
    export.pow2 = function() { 
     return export.x * export.x; 
    }; 

    return export; 
})(Foo || {}); 

在這一天結束時,你不能指望一個Java *.jar或.NET程序集的行爲因爲這些運行時環境在本地機器上運行應用程序或系統,並且模塊在運行期間基於對本地路徑的提示而被鏈接。例如,B.dll需要A.dll,因爲某些類派生了A.dll中定義的類,運行時會將程序集A.dll加載到內存中。

可悲的是,這種機制是不是仍然可以用JavaScript和打字稿被transpiled成目標語言,現在,因爲你的模塊只是代碼文件,他們不是字節代碼或中間語言。

也許WebAssembly有希望!

+0

似乎現在它不起作用。這太傷心了:( – starcorn

+0

@starcorn我很想擁有這個功能:( –

0

在您的代碼中,第一個關鍵字export表示ES6模塊。而關鍵字module應替換爲命名空間since TypeScript 1.5。我們可以用新的關鍵字重寫代碼:

// File Foo.Bar.ts 
export namespace Foo { 
    export class Bar { } 
} 

如果目的是組織代碼,這是一個不好的做法,使用命名空間模塊在同一時間。你應該選擇模塊和命名空間。

隨着ES6模塊

打字稿支持ES6模塊的語法非常好:

// File Foo.Bar.ts 
export default class Bar { } 

// File Main.ts 
import Bar from './Foo.Bar'; 
class MainBar { 
    constructor() { 
     new Bar(); 
    } 
} 

這是推薦的方式。它將在Node.js上工作(在編譯器選項中使用commonjs模塊語法)。或者,在瀏覽器中,它可以在諸如Webpack(參見a tutorial here)或諸如SystemJSa tutorial here)的裝載器的捆綁器的幫助下工作。

有關ES6模塊語法的好介紹,請參閱read this article

名稱空間

如果你不使用模塊,不要在頂層import既不export什麼:

// File Foo.Bar.ts 
namespace Foo { 
    export class Bar { } 
} 

// File Main.ts 
namespace Foo { 
    class MainBar { 
     constructor() { 
      new Bar(); 
     } 
    } 
} 

此代碼將在瀏覽器中運行,如果你加載生成的兩個JavaScript文件,或者連接它們,例如uglifyjs

相關問題