TypeappオブジェクトをElectronアプリでWindowに渡す

Question

単純なtypescriptクラスを画面に印刷するだけの場合（以下のように）、フロントエンドで簡単にアクセスするにはどうすればよいですか？

speak.ts

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

は、私はあなたが使用することができます知っている

のindex.html require文は私のために変数に割り当てる必要があり

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

このクラスにアクセスする私は自分自身でrequire('./speak');を使ってアクセスすることができず、グローバルスコープに持っていこうとしています。

すべてのコマンドに「x.Speak.prototype」を付けることは少し冗長であり、複数のクラスとインターフェイスが導入されると、はるかに長くなる可能性があります。

私はこれを正しい方法でやっていないように感じます。フロントエンドで動作するために、どのようにデータ/関数をTypeScriptクラスから持ち出すことができますか？ Uncaught ReferenceError: Speak is not defined

Answer 1

が関与する2つのものがあります：私は私のindex.htmlファイル

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

に以下のような何かをしようとすると

UPDATEは

私はエラーを取得します。

1. ES6 - >は、最初の点について相互運用
2. クラス構文

をCommonJS commonJs構文でそれを消費しながら、あなたはES6モジュールを宣言しています。

あなたがCJSにモジュールオブジェクトを保持するために余分なXを必要とする理由です：

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

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

あなたはES6で同じコードを消費した場合、それは次のようになります。もちろん

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

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

、ESM（ES6モジュールシステム）はすべてのブラウザで利用できるわけではないので、TypeScriptコードをES5に置き換えてロードする必要があります（requireJSなど）。

第2のポイントは、クラスを作成することです。あなたは、通常Speakのインスタンスを作成し、それを使用します（コードに続く最初のポイントとの混同を避けるために、モジュール内のコードを消費すると仮定）：

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

インスタンスを必要としない場合は、

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

// usage: 
Speak.write(); 

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

// usage: 
write();