Working TypeScript for server and client :)

The Gallery
1

Determined not to write boring old JavaScript, I managed to get TypeScript working for the server (haven’t tried the client yet; how hard can it be? :wink:)

It’s a very trivial echo service using web sockets… You enter something in the textbox and click send and the server echos it back.

typescript.png1475×525 62.8 KB

https://rapid-arm.hyperdev.space/

The app bootstrap stuff is untyped (everything is any), I didn’t want to pull in a big bloated node .d.ts for so little (but I might stub out the few things I call). In server.ts it creates an instance of EchoService from echo.ts:

// Create echo service
import echo = require('./echo');
var echoService = new echo.EchoService(wss);

Again, wss is untyped but the important thing is that TypeScript is compiling these and it’s running in node on the server :slight_smile:

It’s done using the ts-node npm package, which you can pass a .ts file, it compiles on the fly and executes (I presume this is being done in memory based on previous comments that the fs is readyonly, but I haven’t checked).

In package.json, I replaced the start call to call ts-node and pass the server:

"start": "node node_modules/ts-node/dist/bin/ts-node.js server.ts"

It’d be nice to have native TypeScript and/or ES classes (I think ES classes will come free with a node upgrade) and editor support, but this’ll do for now!

Note: If playing with the example, you might see “WebSocket closed” and it’ll stop working. Looks like it goes to sleep even though there are open websockets, not sure if that’s intended or not (I hope it’s a bug, otherwise my game prototype won’t work very well!).

4 Likes
2

Nice! Thanks for this :slight_smile:

I have remixed it to use postinstall to compile the .ts file to .js: https://hyperweb.space/#!/project/hazel-devourer

What do you think?

3

Oh, I figured that wouldn’t work on every change, but if it gets run on every build, even better (and one less dependency)! Thanks! :slight_smile:

Edit: So I just tested this, but as I feared, changes to .ts files don’t seem to get rebuild into js when making changes in the editor :frowning:

I guess it only runs when you make package changes?

4

I guess you are getting better than me on HyperWeb… that’s great :smiley: Thanks for your feedback!

We’ll keep an eye open on this issue (supporting coffee/type scripts and other javascript dialects)!

Keep up with your great work :slight_smile:

6

I managed to make TypeScript work for the client too… I created a small class that compiles typescript from a folder and serves it up at /scripts.js. It uses a filesystem watcher to detect changes in the folder so it automatically re-compiles when you change the ts files in /public/ts.


https://rapid-arm.hyperdev.space/

Both the websocket code that talks to the server (which just echos) and the “Say Hello” button (taken from the TypeScript playground) are TypeScript.

I’m sure it can be improved, but the compilation is fairly isolated so if native TS support ever came (or the ability to run the compiler from the build) there shouldn’t be much to change; all the typescript (minus the calls to the compiler and the compiler class) should work the same.

2 Likes