TypeScript meets OData with the help of JayData and JaySvcUtil

13 Nov
Categories: Featured, Tutorials
Author: Péter Áron Zentai
* * * * . -

I am superexcited to share that we have completed our homework, and now TypeScript can be fully employed to use OData from JavaScript with an attitude. All you have to do is to include the JayData library in your application, and use JaySvcUtil.exe to create a TypeScript definition. And there you go.

If you are new to JayData: JayData is a unified data access library for JavaScript, supporting a number of online and offline storage types like OData, YQL, Facebook, webSQL or IndexedDB to name a few. You might also want to have a peek on these:

With our beloved Northwind context and JaySvcUtil.exe first we create the client environment, then the party begins.

You can download the JaySvcUtil tool from CodePlex.

Also can download the following example project from CodePlex, with all necessary files prepared, ready to be played with.

 

The newest version of JaySvcUtil on the top of the usual context.js file will produce a context.d.ts ambient file too that you can simply ///<reference  in your TypeScript client code, to have the full OData magic happen in your application.

After the preparations you should have an HTML client page as the below example. Please notice, that you need to download Microsoft’s datajs  and jQuery separately from JayData.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.2.js"></script>
    <script src="Scripts/datajs-1.0.3.js"></script>
    <script src="Scripts/jaydata.js"></script>
    <script src="Scripts/jaydataproviders/oDataProvider.js"></script>
    <script src="Scripts/northwind.js"></script>
</head>
<body>

Use JaySvcUtil.exe to generate yourEntityContext.d.ts from the service url or metadata document. Create your client.ts file.

///<reference path="Scripts/jQuery.d.ts" />
///<reference path="Scripts/Northwind.d.ts" />

var northwind = new WebApp.NorthwindEntities({ name: "oData", oDataServiceHost: "http://localhost:60349/Northwind.svc" });

EntityContext constructors

EntityContext constructors now show the possible initializtion parameters.

image

EntitySets and Functions are visible on the EntityContext instance

image

Imported types are listed in their namespace

image

EntitySets offer typed query functions (filter, map, toArray, etc)

image

Use Arrow Functions anyplace predicates are used

image

Query expressions now have property level hints

In predicates the lambda parameter now provides full discoverability

image

Types are correctly checked

image

Service function parameters are now visible

Service code:

    [WebGet]
    public IQueryable<Product> GetSomeProducts(int catID)
    {
        return this.CurrentDataSource.Products.Where(p => p.Category_ID == catID);
    }

Client code:

image

Promised values offer promise methods

image

Typed JSON inputs offer field hints

image

JayData, TypeScript, JaySvcUtil, odata

Leave a comment
comments powered by Disqus