An overview to Typescript

Typescript is a superset of javascript developed by Microsoft. This means that any javascript is a valid typescript (you need to add some configurations to make it valid). It basically add strong typing to javascript. This in my opinion is an excellent add-on to javascript because is the only thing that was lacking. Javascript is a chameleon type language (or multi paradigm), it means that have multiple approaches that you can take when developing software. It supports scripting, object oriented (prototype based), imperative, functional and event driven. Also javascript have first-class functions (this means that you can pass functions as arguments to other functions). The good thing of javascript is that you can do virtually anything, the bad thing of javascript is that you can do virtually anything (this writing was intended).

Why is good?, it gives you a lot of expressivity at the moment of development, you have more than a zillion ways to solve a problem.

Why is bad?, when you need to maintain your code or others code. Add functionality, delete something or update some code. Sometimes it get’s very difficult to read.

This is why typescript helps a lot in the development of software, because you will know exactly what type of data are you passing along to a function or a method. Let’s take a look:

const add = (x: number, y: number) => x + y

If we write the same in javascript this function will work even if we pass strings, we can call the function with the number 2 and the string 2 and will return 22, totally not expected but we expected 4.

String.prototype.concat = function(x: string) {
return this + x // this will return a string
}
// we can even force the value of the returning type:
String.prototype.concat = function(x: string): string {
return this + x
}

Now we know that the returning value will be a string. And also there is something really cool that will add functionality to our editor. But first let’s define an interface:

interface IUser {
name: string
age: number
email: string
}

Now, let’s create a function that receives only IUser

const makeOlder = (user: IUser) =>
Object.assign({}, user, {age: user.age + 1})
const user = {
name: 'John',
age: 17,
email: 'john@mail.com'
}
const olderUser = makeOlder(user)

Now we have a copy of the user that is older in one year, but the good thing is that if we try to call that function with another type, like a string, number, or a IProduct interface, typescript will give as an error. Even our editor will show as an error!

Like black magic!

Visual studio code will show as an error immediately if we try to call makeOlder() with a different object, it will even give us intellisense!

Here you can see when the user is typing send it will show different methods or properties that the object response have (res in code). And will also tell the user what types does the function need in order to work. (status is a number and body can be anything and is optional)

Hope that this overview cleared your mind if you are taking the decision to which language or superset learn :)