TypeScript : Bug Repellent
TypeScript is a powerful tool for JavaScript developers. People often describe it as a superset of JavaScript. What this means is that it is layers of code built on-top of JavaScript with the intention of extending functionality during development. One of the strongest reasons for using TypeScript is that it will enable you to find bugs before you even try to run your code.
Static vs Dynamic Languages
How often have you tried to run a program or update an application only to see a Type Error? Misspelling a function name or trying to modify a variable that can’t be changed are a few common things I do. I’d say its a pretty common occurrence for most people to make these mistakes in dynamically-typed languages like JavaScript. They check for type errors when the code is run.
TypeScript on the other hand is a statically-typed language so it will check for these easier to fix Type Errors when the code is compiling. So if you were in VS Code trying to call a function and happened to spelled it incorrectly, you’d be notified that there’s a problem.
On large production applications this sort of mistake can be missed and end up very costly. The goal of TypeScript is to help find and fix those bugs before they get pushed to production.
This doesn’t just apply to function calls this behavior is also used with objects as well!
Explicit Types
Another powerful feature to fight against bugs used by TypeScript is Explicit Types. With this you’ll be telling the compiler what your function expects for inputs and outputs.
Inputs
You can do this for your inputs by going to the function declaration, adding a colon (:) after an input and then specifying a type.
Now when you call the function and don’t pass in the correct type, you’ll receive an error!
Outputs
You can also do this with the expected output as well. Just add a colon (:) after the function invocation like so:
Now we have a set return type of a string. If we happened to be making some changes to the function, like changing the return type to a Boolean, we’d receive an error. In the example below the error even tells us that it’s expecting a string.
Creating Types
TypeScript isn’t just limited to the same types JavaScript provides. It allows you to easily define your own types. By pre-defining what your types will look like in the future you get built in validation and easily accessible documentation built right into your code base.
interfaces
Interfaces are created just like creating a regular JavaScript object
And now when you create that type in your code you have the built in validations!
enums
Enums allow you to create constant values. Why would you use an enum over a regular constant? Well when properly set up it’ll provide documentation and context to your code. Take a look at the example below:
Learn more
This was meant as a brief introduction and honestly there’s a lot more to TypeScript. if you’d like to learn more I’d recommend checking out some of these free resources:
