将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中的电子应用程序

回答

相关问题