Writing my first TypeScript type definition

A little delayed, but last week I officially made my first proper contribution to an open source project. As you’ll probably be aware by now if you’re using TypeScript, there is a great resource for type definitions on GitHub called DefinitelyTyped. I was working on some prototyping and wanted to try out some custom scroll bars and found a great library called mCustomScrollbar. Unfortunately there wasn’t already a type definition for this in DefinitelyTyped but after looking at the fantastic documentation provided for it, I decided to write my own.

It was all a bit of a trial really. I hadn’t read anything formally about how to create these but I had been looking at the ones I was getting from the DefinitelyTyped project in order to try and understand what they were doing. One of the benefits of TypeScript is the design time errors so without your type definition between your TypeScript and your library to allow your TypeScript to understand what it is you’re trying to call, all you will see is squiggly red lines and your project won’t build. I found it quite easy to understand what I needed to write in my type definition to make it work and being able to refer to the other definitions in my project was a great help in that sense. The biggest help by far though was the great documentation written by the plugin’s author. I would happily write more type definitions in the future for plugin’s with documentation as good as this one as it made the process a lot easier.

My main piece of advice if you’re thinking of contributing to the project, is to read their contributor guidelines. Making sure you get the small details right mean that you are more likely to get the type definition right (you will have to write tests) and it also means you will save yourself and the person reviewing your pull request from wasting time over formatting / test failure issues. See the contributor guidelines here – https://github.com/borisyankov/DefinitelyTyped/wiki/How-to-contribute

I’m going to attempt to put together an in depth guide on how to write a basic type definition using this as my working example in the very near future. If you want help in the meantime (and let’s be honest, it’s possible this in depth guide will never happen) then get in touch on here and I will get back to you to see if I can be of any help.

I’ll be totally honest, the main reason for this post was because I was so happy to have finally made my first contribution to an open source project as it’s something that I had always wanted to do. I just wanted to share my happiness with whoever may read this!

Scroll bars in Flex

I’ve just been doing some work with scroll bars in Flex. I used the standard HScrollBar and set my maximumScrollPosition and minimumScrollPosition, but the thumb (the little rectangle between the two buttons) was staying a standard size. I have now found out this is because you also need to set the pageSize property. So I set this to be the same as the maximumScrollPosition property, and like magic, my thumb changes size depending on how much it has to scroll through. Excellent!