TypeScript is a great addition to your toolkit if you’re a budding full-stack developer. It is popular amongst programmers today because it enhances JavaScript code making it more productive and less error-prone.
One of the main reasons for this increased productivity is the fact that TypeScript is a 'superset' of JavaScript: every piece of code you've ever written (or ever will write) in JavaScript is also TypeScript code.
TypeScript was created in 2012 by Microsoft, to help overcome the issues developers had when scaling up applications with JavaScript. The language’s popularity has slowly grown over the years with each successive, and open-sourced version, thanks to the broadening of its support for non-Microsoft branded environments and technologies.
Benefits & Drawbacks
At some point in your code journey, you’ll forget what every variable is supposed to be; it’s natural and everyone does it, no matter how skilled they are at coding.
Over at TypeScript's official site, they offer the following information:
“TypeScript provides static typing through type annotations to enable type checking at compile time. This is optional and can be ignored to use the regular dynamic typing of JavaScript.”
In other words, TypeScript notates (this is called type annotation) your data type choices while you write code, and then actively checks throughout the life of the program whether or not you’ve stuck to the data types you defined earlier.
This early detection system helps you and anyone you may be collaborating with. The downside to this is you will spend more time writing your code.
It also makes the environment setup stage a longer process: you must interact with the tsconfig.json file to make your overall experience run smoothly. I will say, this does provide an opportunity for you to create a more customized experience.
Another concern is that TypeScript can’t run on a browser. The language must first be compiled, either by its in-house compiler, tsc, or another transpilation program such as Babel. A benefit of this translation process is that even though TypeScript identifies type errors, once the code has been compiled, those errors remain readable only in .ts files.
Now that we’ve got a conceptual understanding down, I’ve provided a short coded example of what TypeScript's type annotation looks and acts like. I highly recommend the TypeScript Sandbox if you’re interested in exploring the code yourself.
A Quick Visual Example
let message: string = 'Good morning, good evening, & good night'; After declaring the ‘message’ variable, I added a colon and the name of the data type.
Technically, you don’t have to set an annotation: TypeScript does this for you in the background, but while learning, this might just be the helpful visual reminder you never knew you needed.
Here's what happens when I try to reassign message to a different data type:
console.log(message = 2); // prints "Type 'number' is not assignable to type 'string' Variables bound to arrays are written with a colon, followed by a one-word description of the element types, and a pair of brackets.
let authorsArray: string[] = ['Zadie Smith', 'Thomas Hardy']; let anyTypesArray: any[] = ['eight', 8, true]; This article answers a few journalistic questions: the why, how, what and when of the TypeScript language. It was written to give you a quick introduction, but I hope it has piqued your curiosity, allowing you to explore and appreciate the many different and interesting aspects of TypeScript-based programming. Thanks for reading!