Question

如果我有一个简单的打字稿类，只是打印到屏幕上，如下所示，我怎样才能以更简单的方式在前端访问它？

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');访问它，试图将其置于全球范围内。

必须在每个命令前加上＆＃34; x.Speak.prototype＆＃34;有点冗长，当引入多个类和接口时，很容易变得更长。

我觉得我没有以正确的方式做到这一点。如何从TypeScript类中提取数据/函数以在前端运行？

更新

当我在index.html文件

中尝试以下内容时

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

我收到错误：Uncaught ReferenceError: Speak is not defined

Answer 1

涉及两件事。

ES6 - ＆gt; CommonJS interop
类语法

首先，您在使用commonJs语法时声明了ES6模块。

这就是为什么你需要额外的X来保持CJS中的模块对象：

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）。

关于第二点，你正在写一堂课。因此，您通常会创建Speak的实例并使用它（以下代码假设您使用模块中的代码，以避免与第一点混淆）：

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

如果您不需要实例，可以使用静态方法或仅使用函数：

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

// usage:
Speak.write();

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

// usage:
write();

将TypeScript对象传递给Electron app

1 个答案: