Sunday, January 13, 2013

Extension methods in TypeScript

/* 18/1 2013Update Remember Extension methods are code smell, so use it only where it really make sense.
Good blog post about Extension methods why its code smell http://www.daedtech.com/why-i-dont-like-c-extension-methods   
*/

When working with strings it’s likely that you’ve had to check if the string is null or empty, and
Thats no different in TypeScript.

I thougt of making an extension method for StringIsNullOrEmpty, but could not fine any documentation on this.

I know that TypeScript interfaces are open ended, so I extended the String interface like this

    interface String {
        StringIsNullOrEmpty: () => bool;
    }


Then I just need to found out how to inplement it, and used prototype for this.

    String.prototype.StringIsNullOrEmpty = () : bool{
        return this == null || this.length == 0;
    }


This works fine, but I'm not sure this is the correct way of doing this, so if you know a better way please leave a comment.

I have encapsulated the inteface and all my prototypes into a module called StringExtensions

module StringExtensions {
    interface String {
        StringIsNullOrEmpty: () => bool;
    }

    String.prototype.StringIsNullOrEmpty = () : bool{
        return this == null || this.length == 0;
    }
}


Here is a litle jasmine test.

describe("StringExtensions methods tests", () => {

    it("Given an empty string should return true", () => {

        // Fixture setup       

        var sut = "";

        // Exercise system               

        var expected = true;

        // Verify outcome

        expect(sut.StringIsNullOrEmpty()).toEqual(expected);

        // Teardown

    });   
});

5 comments:

  1. i have also this functions:

    interface String {
    formatWith(...args: string[]): string;
    formatWith(...args: any[]): string;
    }

    and JS part:

    String.prototype.formatWith = function () {
    var params = $.makeArray(arguments);
    return $.validator.format(this, params);
    };

    ReplyDelete
  2. I tested your method but it fails when string variable is null, it throws:
    Cannot call method 'StringIsNullOrEmpty' of null. I think this cannot be implemented in JS.

    ReplyDelete
    Replies
    1. Hi Peter,

      Thanks for the comment, maybe something has change since I wrote this post. I will try play with extension methods in typescript again :-)

      Delete
  3. Seems wrap the extension methods in a module doesn't work in angular cli environment.

    ReplyDelete
  4. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from TypeScript Training in Chennai . or learn thru Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete