Using Haxe JavaScript from TypeScript?

,
1

Hey guys,

I’m curious if anyone has tried this before. I thought I looked into it, and forgot what the conclusions were.

What is the possibility of being able to make TypeScript definitions for Haxe-generated JavaScript classes?

Thanks!

2

Actually yes. I’m using Waud library in my type script angular project. I needed to write the type definition myself, and it actually works well.

3

I once started this project but never finished it: https://github.com/nadako/hxtsdgen

4

Thanks guys

Have either of you run into any nasty edge cases that wouldn’t be obvious otherwise? Of course, compile-time features like Haxe abstracts aren’t available, or macros, but generating new class instances and calling standard properties (what about get/set methods?) work? :slight_smile:

5

JavaScript doesn’t care if a property or a method is private or public, so to expose some privates I just defined their name in the Interface.
Creating instances, using maps and even typedefs is easy.
But I will add that I didn’t write this library, Adi wrote it and it was optimised for JavaScript.

6

We’re doing it here to reuse internal Haxe libs with TS.
We ran into some limits with @nadako’s lib but it could be fixed - we’ll get back to that.

I have mixed feelings about generating d.ts files for every Haxe class; I don’t think it’s very elegant when used from JS import if you don’t have a flat class hierarchy. I’d try exposing an index.ts re-exporting useful top-level classes.

Additionally producing a NPM module using Haxe JS with TS definitions is a tricky exercise which would be worth a good blog post.

1 Like
7

I’m trying to get some basic TypeScript definitions working, based off the output I’m seeing from hxstdgen

tsconfig.json

{
    "compilerOptions": {
        "target": "es5"
    },
    "files": [
        "openfl.d.ts",
        "Test.ts"
    ]
}

openfl.d.ts

export namespace openfl.geom {
	class Rectangle {
		constructor(x: number, y?: number, width?: number, height?: number);
		bottom: number;
		height: number;
		left: number;
		right: number;
		top: number;
		width: number;
		x: number;
		y: number;
		clone(): openfl.geom.Rectangle;
		contains(x: number, y: number): boolean;
	}
}

Test.ts

import "./openfl";


class Test {
	
	
	public static embed (div:string) {
		
		alert (div);
		
		let rect = new openfl.geom.Rectangle (0, 0, 100, 100);
		console.log (rect);
		
	}
	
	
}

Test.embed ("openfl-content");

I’m getting the following error:

Test.ts(11,18): error TS2552: Cannot find name ‘openfl’. Did you mean ‘open’?

I know this is likely a beginner TypeScript question, but how do I use this in the browser?

8

Importing doesn’t give you an openfl variable.

import * as openfl from "./openfl";
9

To use in the browser: normally tsc should transform your Test.ts into Test.js - the import should have been translated into something like:

const openfl = require('./openfl');

Now you need to bundle Test.js and openfl.js into a single JS file that you can reference in an HTML page - you can use Browserify to keep things simple.

browserify src/Test.js -o www/index.js -d