Click here to Skip to main content
Click here to Skip to main content

Tagged as

TypeScript in .NET

, 3 Jan 2014
Rate this:
Please Sign up or sign in to vote.
TypeScript in .NET

Introduction

With the development of successful Javascript techniques, a lot of popular JS libraries such as Jquery, Ajax, Angular JS, Konckout JS, Ext JS, Backbone JS, etc. have been used in developing business applications successfully. Microsoft invents TypeScript (latest 0.9.5.0) for .NET development. There is nothing new in Typescript. The exciting thing in typescript is it brings Type and OO programming concepts in. This makes Typescript programming more like C# programming. We can define module, class, interface, and inheritance, etc. OO elements in Typescript to make JavaScript programming easier than ever. The study curve also is shorter if you know JavaScript and C#. This project intends to back up the basic Typescript HTML project I have done in Visual Studio 2012.

Main Tasks

1. Download Typescript plug in and web essentials

Visual Studio 2012 does not have typescript IDE for .NET developer. We need to download TypeScript plugin and its web essentials tool from the internet to enable typescript programming in .NET. TypeScript is developed by Microsoft. Therefore, it has a lot of .NET elements that exist. After you install plugin and web essentials, you can create a Typescript HTML project as below:

Web essentials in Visual Studio 2012 is responsible for automatically converting TypeScript TS file into JS file with the same name. This is important because HTML web page does not know TS file but JS file. however, Typescript also does not give you a way to code JS file via it. You have to code TS file first and allow web essentials to generate JS file for you based on your TS file. After you click Save All button in Visual Studio 2012, web essential works automatically to convert each snapshot of TS file into JS file. Therefore, you do not worry about whether the JS file is updated in time or not.

TS file does nothing actually except coding JavaScript in typed&OO way. So we can use module class OO concepts to do TS coding for developing Javascript JS file. After you publish Typescript .NET web project, you even can not see any TS files but Jquery.d.ts file which is generated by Jquery if you introduce Jquery into TypeScript. This allows us to easily declare var $ in TS file and use jquery syntax in TS file without doing any reference.

2. Develop TS file

After we built up typescript development environment, we now can focus on developing TS file for HTML page. The whole example code is shown as below:

1, page loaded                 // client called

 $(document).ready(function () {
    modelWebApp.UI.showdata("filltxt");
});

2, MVC module:  

module modelWebApp {

    export module DataAccess {   // data module

     export   function dataarray():any[] {
            var ddar: any[] = new Array();
            var datas = { book: "book1", price: 23, amt: 23 };
            ddar.push(datas);
            var datas1 = { book: "book12", price: 323, amt: 213 };
            ddar.push(datas1);
            var datas2 = { book: "book14", price: 423, amt: 234 };
            ddar.push(datas2);
            var datas3 = { book: "book314", price: 4323, amt: 2343 };
            ddar.push(datas3);
            var datas4 = { book: "book414", price: 4243, amt: 2344 };
            ddar.push(datas4);
            var datas5 = { book: "book514", price: 5423, amt: 5234 };
            ddar.push(datas5);
            return ddar;
        }
}
 export  module BusinessLogic {   //business logic control module
       export class passstr implements books { 
           title: string;
           price: number;
           amt: number;
           constructor(public _title: string, _price: number, _amt: number) {
               this.title = _title;
               this.price = _price;
               this.amt = _amt;
           }
           ret() {

               //$.ajax({
               //    url: 'http://localhost:49306/api/values',
               //    type: 'get',
               //    datatype: 'json',
               //    success: function (data) {
               //        str = JSON.parse(data);
               //        alert(data);
               //    },
               //    error: function (data, status, error) {
               //        alert("error: "+error);
               //    }
               //});
               var str: string = "Book: " + this.title + " price: " + 
               	this.price + " Amount: " + this.amt + "\r\n";
               return str;
           }
       }
       export interface books {
           title: string;
           price: number;
           amt: number;
           ret(): void; 
       }
    }

 export  module UI {      //View Module
   export  function showdata(eid:string) {

         var ddar = modelWebApp.DataAccess.dataarray();
         for (var i = 0; i < ddar.length; i++) {
             var ff = new modelWebApp.BusinessLogic.passstr
             	(ddar[i].book, ddar[i].price, ddar[i].amt);
             $("#"+eid).append("< li>" + ff.ret() + "< /li>");
         }
         ddar = null;
     }  
    }
    // global code here
}

Module in TypeScript actually is the namespace in C#. You can put one namespace in another namespace in C#, therefore, you also can put one module inside another module in TyepScript. We can put n-tier modules in one module as the example I show here.

One beauty of TypeScript is the security in module. We can use access modifier to control module, class, function, and even fields accesses in module. Default access is private. Therefore, you cannot see members in a module if you want to call this from another module. you need to use export access modifier to open objects and functions for caller.

We can define a data function in Dataaccess module to provide dummy data for businesslogic module. Then we can call data function in dataaccess layer and business logic to create function for UI module which can be used in page or window load to display data in HTML.

When HTML page is loaded, we get the following example result.

3. Summary

If we have experience in Jquery, Ajax, Angular JS, ext JS, Knockout JS , and other JSs, we can quickly learn and use TypeScript. TypeScript is typed. Now we can really feel we are doing C# programming when we intend to develop front end JavaScript application with the help of TS file. TS file in typescript only is a design time coding template. It cannot run in run time, it works similar with a page designer. We design JavaScript in TypeScript and then convert it to a JS file via web essentials. The business logic in TS file then can be used in web page via its JS file. TypeScript gives us a MVC module for developing MVC pattern JS file. It is almost the same as the MVC pattern in Angular JS. Nothing new!

Home

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

lizhong huang
Software Developer
Australia Australia
Movement is life
Renew yourself to survive

Comments and Discussions

 
QuestionMy Vote of 5 PinmemberSampath Lokuge5-Jan-14 21:05 
AnswerRe: My Vote of 5 Pinmemberlizhong huang5-Jan-14 22:10 
QuestionCode for click event is missing ? PinmemberSampath Lokuge4-Jan-14 22:45 
AnswerRe: Code for click event is missing ? Pinmemberlizhong huang5-Jan-14 10:43 
GeneralRe: Code for click event is missing ? PinmemberSampath Lokuge5-Jan-14 19:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 3 Jan 2014
Article Copyright 2014 by lizhong huang
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid