Setting up and using Typescript – Part 1

In a previous post, I started a restful API that returns policy information. Now its time to starting calling the API from client.

First thing need is to get all the typing definition files. Any definition file required can be found on Boris Yankov’s github site

At an absolute minimum need the following files:

  • jquery.d.ts
  • jqueryui.d.ts
  • knockout.amd.d.ts
  • knockout.d.ts
  • knockout.mapping.d.ts

A personal preference is to split out files so that following Single Responsibility. I have never liked how a lot of javascript code is created. It just reminds me so much of god class

Therefore the first file I like to create is a class whose only purpose is for data retrieval

module MotorDB {
    export class DataService {
        public GetAllPolicys() {
            return $.ajax({
                 url: 'api/policy',
                 type: 'GET'
             });
         }
    }
}

All this file/class does is return the javascript promise to execute an ajax data retrieval. This will be used in our next file

The next step is to create our view model that will contain our Policy information

module MotorDB {
    export class Policy {
        constructor(
            public Identifier: number,
            public PolicyNumber: string,
            public Policyholder: string) {
        }
    }

    export class PolicyViewModel {
        private dataService: MotorDB.DataService;
        public Policies: KnockoutObservableArray<Policy>;

        constructor() {
            var self = this;
            self.dataService = new MotorDB.DataService();
            self.Policies = ko.observableArray([]);
        }

        public Load() {
            var self = this;
            self.dataService.GetAllPolicys()
                .done(function (data) {
                    $.each(data, function (index, element) {
                        var policy = new Policy(element.Identifier, element.PolicyNumber, element.PolicyholderName);
                        self.Policies.push(policy);
                    });
                })
            }
        }
    }
}

Lets break this code down.

Right now the code cannot be tested because creating the concrete data retrieval class. Later will be improving the constructor to inject in the data service so that the model can be unit tested.

The class Policy, is using normal typescript variables, because at this point I don’t know if they need to be using knockout observable properties. YAGNI.

Now moving on to the actual ViewModel class, PolicyViewModel. The Load method just calls the GetAllPolicys function of the dataservice. Once the javascript promise is returned and the action completed, then the knockout array of Policy objects is populated.

Now that all is ready to do is create the template that will use the ViewModel. This will be the topic of another post.

Advertisements

My musing about anything and everything

Tagged with: , ,
Posted in jquery, MotorDB, Typescript
One comment on “Setting up and using Typescript – Part 1
  1. […] This is the continuation of the previous post. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 9 other followers

%d bloggers like this: