Before I used TypeScript on actual projects I used to think it was a waste of time. I thought it would cost a lot of effort to document a type on every variable and function and make custom types and interfaces and more for marginal benefits to my code.

Little did I know that I would come to fall in love with TypeScript.

1. Compile-Time Errors

Unlike Vanilla JavaScript TypeScript is able to provide errors at compile time. Whether you are performing a wrong type check, passed in the wrong variable type to a function, or simply missed a required argument to a function TypeScript will let you know at compile time.

This helps avoid unnecessary bugs and keeps your focus on improving your application.

2. JavaScript is Valid TypeScript

TypeScript is a typed superset of JavaScript that compiles down to vanilla JavaScript. This means that you can paste any JavaScript file and change the file extension to “.ts” and it will be valid TypeScript out of the box.

When you do not set a type, and TypeScript can’t infer the type from the context it will get the `any` type.

If you want you can set stricter rules through a .tsconfig file, these rules help you enforce clean code and best practices. But when starting out with TypeScript or introducing TypeScript into a large codebase you might want to start off with not too many strict rules and gradually set more rules.

This makes the barrier to switching to TypeScript very low and allows you to use only the features of TypeScript you actually want/need.

3. You Don’t Have to ‘Type’ Everything

TypeScript infers types to the best of its ability. You only have to manually document a type when it’s not clear what the type of the variable is going to be. When you do not set a type, and TypeScript can’t infer the type from the context it will get the any type.

This type allows any form of content and can not be type checked. Although this is a bad practice it makes switching to TypeScript easier. This means you can convert your JavaScript code and worry about any types later.

When we made the switch to TypeScript at my current position we spend several months converting a large codebase to TypeScript in small parts. The last step in this was disallowing the any type since this is often the most difficult step of the process.

4. Custom Types

Typescript allows you to make custom types. This has many different use cases, but let’s take a look at a very common case, receiving an API response.

In JavaScript/TypeScript code you have no way of knowing what’s in the response you’re receiving. You as a developer might know the details of the response by heart, you might look at the API documentation or you might console.log the response to see what’s in it before handling the response.

Documenting the type once will help you know what’s in the response and helps TypeScript detect errors in the code much faster, additionally, your editor will use the type to autocomplete code for you.

In the CodePen below there is a demo of a Custom Type. At the top of the pen, a Fact is created. A random fact is then fetched from a public API and a Fact is expected as a response. This data is passed to a function to create a block quote with the fact, the source, and the URL to the source.

5. Interfaces

Besides types TypeScript also allows us to define interfaces. The two features are very similar to each other. This thread has a lot of information on the differences and similarities.

You are able to make interfaces in TypeScript and require classes to implement them by simply stating it on the class level. This is often better than inheritance and allows to keep many classes in line with one simple step.

Because everything in TypeScript is type-checked you can be rest assured that TypeScript will tell you whenever you make a mistake while refactoring code.

For example, a good use case would be implementing the Observer Pattern. This requires the Subject to have a notify, attach and detach method, and the Observer to have an update method.

It would be so much easier to make mistakes implementing this pattern without an interface requiring the methods to be implemented.

For more info on implementing this Design Pattern in TypeScript (with interfaces) take a look at my article on this pattern.

6. Access Modifiers

You’re able to mark properties and methods of a class as public, protected or private. This makes sure that you’re only exposing the parts of classes that should actually be exposed.

If a class has an internal function that encapsulates some logic you might not want it to be used outside of the class, also you don’t want your autocomplete to suggest this method every time an instance of a class is used.

1. Public—public properties and methods are available everywhere an instance of a class is used. They can be read or invoked freely and are displayed by your editor’s auto-complete function.
2. Protected — protected properties and methods are only available within the containing class and classes that inherit from the containing class.
3. Private — private properties and methods are only available within the containing class. Not even direct children are available to read or invoke these methods or properties.

PS: JavaScript supports private methods/properties as well now with the #variableName notation.

7. Safer Refactoring

This is an additional benefit of type-checking but is so valuable that I consider it worth its own section.

Because everything in TypeScript is type-checked you can rest assured that TypeScript will tell you whenever you make a mistake while refactoring code.

For example, if an API response has changed and no longer receives a property. This can be removed from the custom type and TypeScript will throw errors everywhere this property is referenced, this makes it quick and simple to catch all references to pieces of code.

Getting Started With TypeScript

If I’ve piqued your interest and you’re thinking of trying out TypeScript. It’s very simple to set up. I would recommend you take a look at my article on How to set up a TypeScript Starter project. This covers the installation of TypeScript in detail among other things.

Conclusion

TypeScript is an amazing tool suitable for most projects. If you are hesitant to try it out, take my word that it’s not as daunting as it sounds and more useful than you might initially think.

If you made it all the way down here, I hope you enjoyed my article, please leave a clap if you did, or if you completely disagree leave a comment and let’s discuss our views.

If you like my content and want to support my efforts, consider becoming a Medium subscriber through my affiliate link. It will cost you nothing extra, but Medium will give parts of the proceeds to me for referring you.

And if you want, you can connect with me on LinkedIn or Twitter!