Typescript 101: Basics, Types and Functions

This is the second article about TypeScript, you can read the first part here

I’ve talked earlier about the Javascript superset language TypeScript. I want to share some of the basics with you. Unlike javascript, Typescript is typed. This is a huge deal. It will give you compiletime syntax and type checking.

Also - just in case you missed it - TypeScript is just an improved version of Javascript. (Thats what superset implies). Valid Javascript is also valid Typescript, so if you have JS code now, you can just drop it into typescript and continue. When you compile Typescript, you get normal JS. For more information I recommend my earlier post, Trying out TypeScript.

To get started, I recommend you install Visual Studio 2012 and the extension Web Essentials 2012 Web Essentials 2012

Fire up Visual Studio and create your first typescript file (myscript.ts). With Web Essentials 2012 extension installed, you will have a split screen with TypeScript on the left side and javascript to the right. This is useful since you can see how the compiler (it compiles on save) actually transforms your code. You can copy/paste the code below and play around with the syntax until you become comfortable.

Types

So, this is what typescript look like:

var age; // Type of Any (generic type)
var age1 = 21; // inexplicit typed number
var age2: number = 21; // explicit typed number

var name; // Type of any
var name1 = "Anders"; // inexplicit typed string
var name2: string = "Anders"; // explicit typed string

var isThisAwesome : bool = true;

You delcare a type by ` : Type`. Simple as that. You don’t have to declare a type, but it is usually recommended since you get better intellisense och compile-time checking

Functions

You can declare functions in two different ways. Since you will be mostly living inside a class (did i mention you can have classes and constructurs in typescript?) you will mostly use this syntax: myFunc(inputValue : string) { // do stuff }.

If your not inside a class, you can use the standard JavaScript way, function doSomething() {}

In the next article I will describe how you can use classes and interfaces to create complex types. If you want to continue by yourself, I suggest playing around at TypeScriptlang.org