TypeScript: The beginning

Yes, this is a thing that I want to start this blog with. TypeScript - you've probably heard about it. What is it?

As you know, JavaScript is quite simple language. It has no strong typing, doesn't have OOP languages elements like classes, explicit inheritance or interfaces. That makes it easy to learn and many beginning programmers take it as their first language.
There is also another thing that makes JavaScript special - it's everywhere. In browsers, mobile phones, micro-computers (like Raspberry PI, Arduino, etc.). It's used even as a server-side languages for full-stack applications, tools, services, etc. With JavaScript you can do almost everything, if you know how.
JavaScript is fast as hell thanks to its event loop mechanism and asynchronous function calls. You can send a request to server without blocking the rest of interface only to show results when they're ready. Awesome, huh?

Did I mentioned that JavaScript is a quite simple language? Well... quite. I remember when I was, more or less, a one-year-experienced PHP developer and I've discovered node.js. Those days JavaScript was a black magic for me. I couldn't understand those asynchronous calls, why my programs don't execute line-by-line, like in PHP. Well, ok, it was quite easy and I got it quickly. Problems began later when I had to write more complex programs... The hell, where are the classes?! I need to group those methods, I need some representation of objects! Then I realized that there is something like OOP in JavaScript. If you'd ask an experienced JS developer, he could tell you that this language consist only of objects. I mean, litereally everything is an object. Even if you create a simple function... it's still an object. Every string is an object, you can control it with methods, like:

var myString = "This is a string";  
var myStringUppercased = myString.toUpperCase();  

Or one of the weirdest syntax with functions, that I've just mentioned:

var myClass = function () {  
    console.log("Constructed!");
};
var myObject = new myClass();  
// Outputs: Constructed!

But I won't be writing about the JS internals. I just want to show you that implicit OOP isn't so clear for everyone. Especially for programmers who code in strong-typed, binary-compiled languages, like Java, C++ or.. C# and ASP.NET.

One of the reasons why Microsoft created TypeScript wanted to make .NET developers easier. There are many developers who create web-based software in ASP.NET and they can have troubles with different syntax and potential mistakes when writing the code. The VisualStudio IDE has an awesome feature that points them in real time, as you write the code. For example. it can indicate that you use wrong data type. So in JavaScript you can just write:

var myNumber = 12;  
// ...
myNumber = "Ha! This is a string!";  

In TypeScript, the IDE or compile will yell when you'll try to do a thing like:

var myNumber: number = 12;  
// ...
myNumber = "Damn... There's no place for me here..."; // Will throw a compiler error  

Microsoft wanted also to introduce the syntax sugar with classes, interfaces, explicit inheritance and so on. Another great thing (for me) - generic types. TypeScript does not have any built-in collections (and that's obvious, see below) but you can declare that array-like collection can consist only of elements of given type or interface. I think it made many programmers' life much easier. Take a look at the code below:

var Person = function (firstName, lastName, contacts) {  
    this.firstName = firstName;
    this.lastName = lastName;
    this.contacts = contacts;
};

person.prototype.greet = function () {  
   return "Hello, I am " + this.firstName + " " + this.lastName + ".";
};

var johnSmith = new Person();  
console.log(johnSmith.greet());  

I've just created a Person class that contains one simple method. With OOP and TypeScript goodness we can make it more readable:

class Contact {  
    constructor(private value: string, private isActive: boolean = false) {}
}

class Person {  
    constructor(private firstName: string, private lastName: string, private contacts: Contact[]) {}
    greet(): string {
        return `Hello, I am ${this.firstName} ${this.lastName}.`;
    }
}

var johnSmith = new Person();  
console.log(johnSmith.greet());  

Looks sexy, don't you think?
I've indicated that Person should be constructed with firstName and lastName which are strings and contacts - the array of Contact instances. To construct the Contact object you need a value, like phone number and you may determine is this contact valid by passing boolean value (true/false) but you don't have to because this parameter is optional. You simply cannot do it in pure JavaScript!

I've just written that TypeScript hasn't collections implemented and it's ok. First, remember that TypeScript isn't a language that is interpreted by just-in-time compilers or browsers, like JavaScript. Files written in TypeScript must be compiled first to pure JS to make them usable by browsers or server-side interpreters. TS only introduces few cool features to make it easier to write code, but it won't create anything you are not aware of. That's because TypeScript is fully JavaScript backward compatible. Sounds weird, doesn't it? If you have TypeScript compiler installed and you know how to use it, try to compile some pure JavaScript file. You'll get exactly the same file. And here we have another great thing for good ol' JS coders.

It can be even more exciting that TypeScript has implemented many ES6 features that you can use right now, with no other compilers, like Babel or Traceur. You can use arrow functions, temporary variables with let or (well, hello!) classes. Of course not everything in TypeScript is compatible with ES6 or even ES7 but who cares - compiler will translate TypeScript file to target dialect for you.

You can look at TypeScript in similar way as CSS preprocessors. You know LESS? It simplifies writing CSS code and allow to avoid writing the same part of code many times. And it's also CSS backward compatible!

// You can write THIS in CSS:
.a .b {
   background-color: black;
}
.a .b .c {
   color: white;
}

// But instead you can write the same in LESS syntax:
.a {
    .b {
        background-color: black;
        .c {
            color: white;
        }
    }
}

All right I think it's enough for TypeScript for today. I hope I'll write another post soon to show how to use it in development. Stay tuned and feel free to comment!