Introducing TypeScript…

If you are a ride or die JavaScript programmer than you most likely have heard of TypeScript, but hopefully you aren’t like me and waited too long to hop on the bandwagon. Let’s not waste any more time and get down to what TypeScript is, the benefits, and how to implement it in your code!

What is it?

If you aren’t familiar TypeScript, is an open-source programming language that essentially builds onto JavaScript. TS code is transformed into JavaScript code either through the TypeScript compiler or Babel. So anywhere you are using JavaScript, you are able to apply TypeScript as well. TypeScript has a built in type system which allows us to find errors before running our code (so we can avoid seeing those nasty little red undefined or typerErrors all over our terminal).

When we run our code, the way that our JavaScript runtime chooses what to do is by the type of the value (as well as the behaviors and capabilities of the value). Some values we can identify their type but others we simply can not foresee without running our code first and see what happens! This behavior is obviously unpredictable and makes it harder for us programmers, I mean we aren’t mind readers! So comes along, TypeScript which uses types ([integers, strings, objects, booleans etc]) to differentiate whether something will crash or pass!

Dynamic typing vs. Static type checking…

JavaScript uses dynamic type checking which is the process of verifying the type safety of a program at runtime. And you guessed it, TypeScript uses static type checking which describes the shapes and behaviors of what our values will be when we run our programs. Sometimes, we are not lucky enough to witness our bugs first hand or have to do intense testing of features in our program to make sure everything is working properly. But that is not always the case so TypeScript makes it easy for us because it uses a system to let us know when things might be going off the rails instead of just wishing on a prayer that when you run your program, no new bugs arise!

Benefits?

• TypeScript can easily adapt to existing JavaScript files. Meaning you do not have to start using TypeScript in every file or right off the bat in a program but can gradually add it in here and there.
• TypeScript offers all of JavaScript’s features as well as an additional layer of TypeScript type system.
• Like we mentioned above, your existing JS code is TS so go on with loving your JavaScript language!
• TypeScript helps predict behavior of values so we can avoid a lot of hidden errors!

How to use?

Before implementing anything in your code, you will need to install the tsc or TypeScript compiler. Easiest way to do this is in your terminal and give it the old npm install package name!

Or to global install use this below in your terminal …

Please make sure to compile your files with tsc filename.ts if you are just switching some JavaScript files to TS change the filename.js to filename.ts and you are good to go!

Next, we define our types! TS is so smart that it already knows the JavaScript language and in many cases it will generate types for you. But with some types like objects, we need to state what the types are…

here is a simple object …

here is how we can use TypeScript, we create an interface declaration to explicitly describe this object’s shapes

now we reference our interface by using the syntax like : TypeName after a variable declaration

JS && TS support classes and object-oriented programming (my fellow react lovers can implement TS in their programs as well!)

Conclusion…

There are many other ways to implement TypeScript and many other benefits but I especially love the fact that it makes our lives as programmers easier! To get closer and closer with every commit to being able to predict what our code will do is a life saver! Enjoy!