Writting my first lines of TypeScript code

Posted by in HTML5



After a few days learning TypeScript, I must admit that I like it, even if is from Microsoft!! If you have a bit of time, yu shuld read this article about The Rise of TypeScript for developing large Javascript apps.

If you don’t know it, it is not easy to start. You need to learn new sintaxis, set up a IDE to develop (it is better to use them for large apps, instead of using text editors, but … it’s your choice!).


Before to continue, I would like you to give some resources to start. The first one, check out the Oficial HandBook of TypeScript: http://www.typescriptlang.org/Handbook , a link you need to include on your favorites.

I have found a few resources in spanish about TypeScript, but the best one is YoTypeScript, where you can download a 15 pages book about TypeScript. I already did it, and the book starts with the Javascript history, how you can start with TypeScript, how to set up an IDE, about variables, .. increasing dificulty. I still have to read some chapters, but it worth it to give a try!.

Development environment

The best IDE for working with TypeScript are Visual Studio and WebStorm (paid). I’m using CATS, a software I already showed you how to install it (also, it’s postable).

If you want to use Sublime Text, Brackets, Atom, … you need to invest some time on them, because you need to compile even Node.JS and a few more tools in order to have the TypeScript compiler ready. I haven’t worked with Node.js, so, I decided to try another option, but if you want to try a different way, here you have a nice post about how to use TypeScript with Gulp.

Back to CATS, It’s not the perfect editor but it does the work perfectly with no installation (just download and unzip two software and you’re done!). The project is very active and under development, so upgrading is a matter of downloading the files agains and unzip. Very easy!!

If you feel like not to install anything, and try an online WebIDE, the best option is TypeScript Playground, where on the left part you write the TypeScript code and on the right you are having the Javascript code. For small exercises, it’s a good alternative, but the big problem is that you cann’t work with files,  neither projects.

If you decided to try Visual Studio, you need to download the TypeScript plugin.

If your IDE is Eclipse, the best alternative for working with TypeScript is install this pligun .

Of course, because TypeScript has been created by Microsoft, using Visual Studio should be your first option, specially because it is the best option for debugging, a crucial aspect in programming.

Starting with the language

The first lecture you need to know about TypeScript is related to data types, and the basic types are: boolean, number, string, array, enum, any, and void. I like this simplification of types, plus arrays and enum, a type that can be whatever (any), and another one that return nothing (void).

The second lecture is related to variables. In TypeScript, variable names are case sensitive the same as Javascript (do not forget that TypeScript is a typed superset of JavaScript that compiles to plain JavaScript). Also, you need to use var for declaring variables, the same as Javascript.

The asignation of types to variales can be done by annotation (specifying a type), or by inference, assigning a value:

var foo: string = "TyppeScript"; // Por anotación

var bar = 10.2; // Por inferencia

Related to types, another feature I like a lot is creating your own types, and also use the types defined by TypeScript, defined on the file lib.d.ts, where the basic types are defined, and also other types such as window, document, HTMLElement, HTMLInputElement, HTMLButtonElement, …. making more easy to develop large applications.

type StringArray: string[]; // Define Type

var foobar: StringArray = ['foo', 'bar']; 

Last lecture, by now, is about the use of ; as a sentence separator. It’s exactly like in Javascript. and the comments are also the same as Javascript, using  // and /* … */.

Let’s keep on working with TypeScript!

Google+ Comments - Comentarios Google+