TypeScript Defination & Work with Javascript

Last week was a frustrated one, the fucking air-condition was always blowing warm air with lousy smell everyday. Just like a drunk man was burping next to you. I bet my blood press must been really high at the moment. And the cold war is still running, but a bit assuaged after my wife bought two jackets and two down jackets for her parents and grandparents. WTF!

About Egret

Another problem that stuck me down was, using SFS servers on Egret. Egret has became a outstanding mobile app development solution since that group of former Adobe guys started working on it. And I’ve been keeping an eye on it till it becomes an eligible solution. A friend of mine suggested it to me recently again because I requested some advices from him. He put a lot resources on html 5 games dev. And the CTO (also my high school classmate) Guo said:
“Is that the Microsoft’s TypeScript? Oh come on dude!! Don’t waste your time on a MS’s Open Source project! Don’t you remember silverlight?”
What I say is never look at something in a constant view, especially it’s a changeful one.
More informations visit here
Use Javascript in TypeScript project

What I want to talk about here is how to use existing Javascript framework or libs in a typical egret project. First look it up here, see what if your target has been listed in an most wanted list. Some of the popular frameworks has been defined by some eager guys.
If, like my situation, the lib you need is not on the list. Then try to make it by your self. According to the official doc, you need to write your own dts file, it’s like a header file, there no implementation code. It just tells you what’s inside the JS lib and how you gonna work with it.

Create a lib in your egret project.

In the terminal App, locate to your egret project path, then run

egret create_lib libname

Then you have a new folder contains all the things you need to integrate the 3rd javascript lib.
Copy and paste your js file to libfolder/src/. Then add a new file named your_lib_name.d.ts.

Class Definition

The first thing you should do is to check the Javascript API (if there is an API Doc), try to know the structure of the framework like these code here.
Javascript

function init()
{
	// Create configuration object
	var config = {};
	config.host = "127.0.0.1";
	config.port = 8888;
	config.useSSL = false;
	config.zone = "BasicExamples";
	config.debug = false;

	// Create SmartFox client instance
	sfs = new SmartFox(config);
}

You know that class(or we can say a fake class, cause there is no class in Javascript) SmartFox has a constructor function that receive a parameter which’s type is object. So the in the very beginning, I add these code in tds file to tell Typescript engine:
Typescript

declare class SmartFox{
    constructor(config:any);
}

Then run command like this:

egret build libname

If there are no errors, you’ll have these.

Now you can instant Smartfox in you typescript class.
Typescript

var config:any = {};
config["host"] = "127.0.0.1";
config["port"] = 8888;
config["useSSL"] = false;
config["zone"] = "BasicExamples";
config["debug"] = false;
var smartfox:SmartFox = new SmartFox(config);

Module Definition

When I need to register a listener to catch a connection success event, the js code is like below:
Javascript

sfs.addEventListener(SFS2X.SFSEvent.CONNECTION, sfs_onConnection, this);

First, check the function’s parameter types in the API Doc, then add function definition in .d.ts file.
TypeScript

declare class SmartFox{
    constructor(config:any);
    config: any;
    addEventListener(evtType:string, listener:Function, scope:any);
}

Then we come to “SFS2X.SFSEvent.CONNECTION”, it’s a static constant define,we can use module definition to locate special variables in Javascript. So the code will be like this:

declare module SFS2X{
    class SFSEvent {
        static CONNECTION: string;    
        static ROOM_JOIN_ERROR: string;
        static LOGIN: string;
        static ROOM_JOIN: string;
        static ROOM_ADD: string;
        static ROOM_CREATION_ERROR: string;
        static LOGIN_ERROR: string;
        static CONNECTION_LOST: string;
        static USER_ENTER_ROOM: string;
        static USER_EXIT_ROOM: string;
        static USER_VARIABLES_UPDATE: string;
        static LOGOUT: string;
        
        success:boolean;
    }      
}
declare class SmartFox{
    constructor(config:any);
    config: any;
    connect(host?:string,port?:string,useSSL?:boolean);
    addEventListener(evtType:string, listener:Function, scope:any);
    send(request:any);
}

One of the props is you don’t have to define all the functions or constants or properties, just add what you need. The full version till now is available on my github, I will update it with the project status.