将TypeScript对象传递给Electron应用程序中的Window

Question

If I have a simple typescript class that just prints to the screen, like below, how can I access it on the front end in a simpler way?

speak.ts

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

I know you are able to use

index.html

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

The require statement has to assign to a variable for me to access this class. I'm not able to access it using require('./speak'); on its own, trying to bring it into global scope.

Having to preface every command with "x.Speak.prototype" is a bit verbose, and could easily become much longer when multiple classes and interfaces are introduced.

I feel like I'm not doing this the right way. How can I bring data/functions over from TypeScript classes to operate on the front end?

UPDATE

When I try something like below in my index.html file

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

I get an error: Uncaught ReferenceError: Speak is not defined

Answer 1

There are two things involved.

1. ES6 -> CommonJS interop
2. class syntax

For the first point, you are declaring an ES6 module while consuming it in commonJs syntax.

that's why you need the extra X to hold on to the module object in 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();

If you consume the same code in ES6, it would be:

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

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

Of course, ESM (ES6 Module system) is not available in every browser, so you need to transpile your TypeScript code down to ES5 and use some loader mechanism to load the module (like requireJS).

For the second point, you are writing a class. so you typically would create an instance of Speak and use it (following code assume you consume the code in a module, to avoid confusion with the first point):

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

If you don't need an instance, you can use a static method or just function:

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

// usage:
Speak.write();

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

// usage:
write();