將TypeScript對象傳遞給Window中的電子應用程序

如果我有一個簡單的打印到屏幕的打字稿類，如下所示，我怎樣才能以更簡單的方式在前端訪問它？將TypeScript對象傳遞給Window中的電子應用程序

speak.ts

export class Speak { 
    public write() { 
     console.log("Hello"); 
    } 
}

我知道你能夠使用

的index.html

<script> 
    var x = require('./speak'); 
    x.Speak.prototype.write(); // Prints "Hello" 
</script>

的require語句分配給一個變量我訪問此課程。我無法使用require('./speak');自己訪問它，試圖將其帶入全球範圍。

必須以「x.Speak.prototype」開頭的每一條命令都有點冗長，並且在引入多個類和接口時可能會變得更長。

我覺得我不是這樣做的正確方法。如何從TypeScript類中將數據/函數從前端操作？

UPDATE

當我嘗試像下面我index.html文件

<script> 
    var speak = new Speak(); 
    speak.write("some other stuff"); 
</script>

我得到一個錯誤：Uncaught ReferenceError: Speak is not defined

來源

2017-05-16 James

有涉及兩件事情。

ES6 - > CommonJS的互操作
類語法

對於第一點，你而在CommonJS的語法消費它聲明一個ES6模塊。

這就是爲什麼你需要額外的X扶住模塊對象在CJS：如果你消耗ES6相同的代碼

var X = require('./speak'); 
var speak = new X.Speak(); 

// or accessing the `Speak` class directly: 
var Speak = require('./speak').Speak; 
var speak = new Speak();

，這將是：

import { Speak } from './speak' 
const s = new Speak(); 

// or 
import * as X from './speak' 
const s = new X.Speak();

當然，ESM（ES6模塊系統）在每個瀏覽器中都不可用，所以您需要將TypeScript代碼轉換爲ES5，並使用一些加載器機制來加載模塊（如requireJS）。

對於第二點，你正在寫一個類。所以你通常會創建Speak一個實例，並使用它（以下代碼假設你消耗的代碼模塊中，爲了避免混淆與第一點）：

var speak = new Speak(); 
speak.write();

如果你不需要一個實例，你可以使用靜態方法或者功能：

export class Speak { 
    static write() { ... } 
} 

// usage: 
Speak.write(); 

// function 
export function write() { ... } 

// usage: 
write();

來源

2017-05-16 22:38:32 unional

你的第一個點，當我創建我的index.html文件的腳本標籤中的實例，如'VAR代言=新的說話（）;'我得到一個錯誤：未捕獲的ReferenceError，Speak未定義，與靜態類相同。第二點，我明白，但是如何從HTML文件的上下文中使用ES6？ – James

關於在模塊內直接使用'Speak'類的例子。在腳本標籤中，你會做'var x = require（'./ speak'）; var speak = new x.Speak（）;'（如果'require（）'）函數由某個加載器提供）。 – unional

我沒有寫出來，以避免與第二點混淆。 – unional

將TypeScript對象傳遞給Window中的電子應用程序

回答

相關問題