To the seasoned developer this may seem like a silly question, but to developers who are self-taught, bootcamp trained, or even just have never come across a project in TypeScript - understanding exactly what it is and how to use it can be a bit of a mystery.

In this article we will try to explain the basic concepts behind TypeScript, and the reasons for using it.

JavaScript and TypeScript; the relationship.

JavaScript is the most used programming language in the world. We imagine that it is almost impossible to be a developer and not have to write at least some piece in JavaScript in your career. JavaScript is the programming language that is responsible for making webpages interactive.

TypeScript is a superset of JavaScript that compiles to plain old JavaScript. A superset means that TypeScript takes the strengths of JavaScript, but also improves on its weaknesses by adding some extra features. The most well known feature of TypeScript is that it adds strong type checking to JavaScript. TypeScript was developed by Microsoft to solve the complexities large companies were having when writing JavaScript. Even though TypeScript was developed by Microsoft it is open sourced, and free.

What does TypeScript Do?

TypeScript solves 3 main issues.

Type:

It is a strong and powerful typed language. This means that types are set, and therefore known at the time of compiling. This means that if there is an error in terms of type it will be caught as compilation is taking place. This catches mistakes early on.

For example let’s say we defined a function to add 1 to any number:

const adding_one = (number) => {
 return(number + 1)
}

adding_one(1)

The return value would be 2

Then we or another developer comes along a few months later and calls the function adding_one with a string instead of a number.

adding_one(“1”)

The return value would be “11”, and this might break some things in your application. With TypeScript we can stop this from happening by specifying the type.

const adding_one = (number: number) => {
 return(number + 1)
}

Then we would get a TypeScript error like:

“Argument of type ‘string’ is not assignable to parameter of type ‘number’.”

Now we would have caught our mistake before it had a chance to break our application.

TypeScript comes with many types such as array, string, or boolean, but it is also possible to customize your own types. As you can see it is an extremely useful tool.

Cross browser and backwards compatibility:

A huge issue with JavaScript is that because it is such a popular language there are various versions of it being used by all different applications, developers, and browsers. The great thing about TypeScript is that it is built on top of JavaScript and compiles to vanilla JavaScript. We can choose the JavaScript version it compiles to, but it can also recognize versions ahead of time and compile to the correct version depending on the browser. Writing an application in TypeScript can save a lot of headaches over time.

Developer Tooling

TypeScript’s compiler had IDE integration. This is a great help while developing to discover mistakes, see hints, and look for ways to refactor your codebase. Originally Microsoft Visual Studio was the only editor to have these feature, but with the ever growing popularity of TypeScript many editors now have TypeScript tools available. This makes coding with TypeScript that much more fun, and that much easier.

Conclusion

Though TypeScript might seem like just another thing to learn, or pointless if you already are comfortable with JavaScript, we believe that it worth a try. Catching mistakes early, saving time with helpful tools, and having the full assurance of cross-browser compatibility are all things that every developer wants. If you haven’t already, give TypeScript a try!