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.

Advertisement

About Darren

My musing about anything and everything

‹ Visual Studio running on a 64 bit OS

Using Knockout – Part 1 ›

Tagged with: jquery, MotorDB, TypeScript
Posted in jquery, MotorDB, Typescript