Category Archives: TypeScript

Promises in JavaScript/TypeScript

Promises, are analogous to futures or tasks (if you background is C#) and are used for asynchronous code.

I’m using TypeScript at the moment (as part of learning Angular 2) but I’ll try to list code etc. in both JavaScript and TypeScript, solely to demonstrate the syntax. The underlying functionality will be exactly the same as (of course) TypeScript transpiles to JavaScript anyway.

The syntax for a promise in JavaScript looks like this

let promise = new Promise((resolve, reject) {
   // carry out some async task
   // then resolve or reject
   // i.e. resolve(result);
   // and/or reject("Failed");
});

As you can see in the above code, we can (in essence) return a success, with resolve or a failure, with reject.

In some situations we might simply wish to immediately resolve or reject without actually executing any asynchronous code.

In such situations we can use the methods Promises.resolve and/or Promise.reject method calls, i.e.

// in JavaScript
function getData() {
   return Promise.resolve(data);
   // or 
   return Promise.reject("Cannot connect");
}

// in TypeScript
getData(): Promise<MyDataType> {
   return Promise.resolve(data);
   // or
   return Promise.reject("Connot connect);
}

As you can see the difference between TypeScript and JavaScript (as one might expect) is the strong type checking/expectations.

Using the results from a Promise

As a promise is potentially going to be taking some time to complete we need a way to handle continuations, i.e. what happens when it completes.

In C# with have ContinueWith, in JavaScript we have then, hence our code having received a Promise might look like this

let promise = getData();

promise.then(result => {
   // do something with the result
}).catch(reason => {
   // failure, so something with failure
});

There are other Promise methods, see promise in JavaScript but this should get us up and running with the basics.

Using jQuery in TypeScript

As somebody who mainly develops in C# I do miss strong typing when using JavaScript. So I’ve started to use TypeScript which solves this. But let’s face it, this would be of little use without jQuery (and other frameworks). So here’s the steps to get jQuery running with TypeScript.

  1. If you have already installed TypeScript, grab the latest VS2012 integration from http://www.typescriptlang.org/
  2. Next up, create a new project, navigate to Other Languages | TypeScript and create a new TypeScript project
  3. From the References section in the solution explorer, right mouse click and select Manage NuGet Packages and search for jquery.TypeScript.DefinitelyType and install – this will install a .ts file which includes the jQuery TypeScript definition to allows us to work with code completion
  4. Now either from NuGet, install jQuery or download from http://jquery.com/
  5. To reference the jQuery TypeScript file put /// at the top of the app.ts file, this will allow VS2012 to reference the types in the .ts file
  6. You’ll need to add a script to the default.htm file

Now we’ve got jQuery up and running in TypeScript.

Note: One problem I found on one of my machines was the code complete didn’t work for TypeScript, reading up on this on it appeared (as suggested in one of the posts) that MySQL Connector Net 6.6.5 was causing the problem. Open Control Panel | Programs | Programs and Features, location My SQL Connector 6.6.5 if its installed. Right mouse click on it and select Change and remove the Visual Studio Integration.