What you will learn from this article:
- Can TypeScript be used both on the frontend and the backend? If so, how?
- How does TypeScript improve code readability and maintenance?
- Is TypeScript suitable for small projects or is it more geared towards larger, more complex codebases?
- How does TypeScript enhance the developer experience in IDEs?
- How Typescript improves project quality?
Let's get started!
Table of Contents
What is Typescript?
TypeScript is used the most by Angular developers, but other frameworks also have great support for it. It is already used by 60% of JS programmers, and 22% want to test it.
Frontend or backend – where is TypeScript used?
Types of TypeScript
In addition to that, we'd like to highlight the expressiveness of TS using the following types:
Any & Unknown
Whereas any as a type can encompass anything unknown is its type-safe equivalent.
While any may be used to represent anything, the unknown is its type-safe equivalent.
The unknown is like any other variable, except it won't allow you to do anything with it unless it's expressly type-checked.
Void is used when there is no value returned, for example, as the return type of functions that return nothing.
Never is the return type for something that should never occur, like a function that will throw an exception.
Intersection & Union Types
Intersection types allow you to combine many basic types into a single type. For instance, a customized type of person with a name: string and a phone number may be created. It's the same as stating, "I'd like my type to be this and that."
Thanks to union types, your type can accept one of the many basic types. You may, for instance, have a search that yields either a string or an undefined response. It's the same as stating, "I'd like my type to be this or that."
What are the advantages of TypeScript?
Optional Static Typing
Early Bug Detection
TypeScript's static reading and interfaces improve code efficiency. In TypeScript, an interface can be used to both describe and execute a type (string, boolean, number...), leading to a much more descriptive codebase. Variable declarations with defined types and explicit categories increase clarity and code stability.
TypeScript also can speed up development with the following features:
- Type Annotation — automatically checks the value for each static type
- Generics — lets you write a generalized form of method
- API Documentation — VS code navigation allows developers to see parameter types automatically and track variables.
- Intellisense — Microsoft developed an instrument for code navigation that offers auto code completion. You can see the properties and parameters by hovering over a method's name.
Although the execution is far from perfect, it is still a valid advantage.
Disadvantages of TypeScript
Of course, nothing in the world is flawless, whether real or digital. This rule applies to TypeScript, and it has a few drawbacks.
The overly complicated typing system
False sense of security
The major downside of TypeScript, in my perspective, is that it might give you a false sense of safety. Yes, the language's ability to verify types and tell us when something is incorrect with our code is a major benefit. However, depending on this too strongly carries a huge risk: some developers mistakenly believe that everything written in TypeScript is bulletproof. It's not the case.
What are the key differences between JS and TS?
The key differences between TS and JS are as follows:
- Designed by Brendan Eich (Netscape) and released in 1995
- A lightweight scripting language that helps create dynamic web page content and is supported by all browsers
- Dynamic typing — weakly typed (no option for static typing)
- Best suited for small projects
- Can be directly used in browsers
- JS libraries work by default
- Designed by Microsoft and released in 2012
- Strongly typed — supports both static and dynamic typing
- Best suited for large web apps
Why TS will not replace JS
TypeScript may save your project from Failure
Programming errors are inevitable. It's often just a typo, and other times it's hurrying to meet a deadline. Assume you're developing a large financial system for your organization that handles employee pay automatically. Isn't it true that such a system should be trustworthy first and probably most important? With TypeScript you can be sure you won’t pass the wrong type of argument to the function since it prevents such errors at the early stage.
Typescript Documents itself
The code in Typescript is self-explanatory. In many circumstances, type definitions put straight in project or library files might take the place of documentation. Consider the following scenario. Let's pretend we have a render item method that takes items as input.
- go through the documentation (if one exists),
- Add console.log(items) to this function's declaration, launch the program, and look at the "items" parameter in the console.
- Try to figure out where the function is utilized and then determine what data is sent via it.
- Check with your coworkers to see whether anyone has recently worked on it.
- Assume that the item's argument is exactly what you believe it is (albeit this isn't the ideal approach).
Typescript gives you great IDE support
Most developers' time is spent on IDEs (integrated development environments, such as WebStorm) or lighter code editors like VSCode. Of course, all code could be typed in a basic notepad, but it would be inconvenient and time-consuming. Developers use iDEs to make our life easier, and our job goes faster.
- Mouse hover support – Simply place your mouse over the area of the code you're interested in to discover what's hidden beneath it.
- Code auto-completion – Code auto-completion in IDEs for static type languages is quicker and more reliable. Because of the code clues, you don't need to dive through the documentation.
Typescript has type inference
Typescript allows you to forget about console.log
Because most of the issues you experience in the IDE or during compilation time, Typescript developed programs are much easier to troubleshoot. Switching to TS might result in less time spent in the browser console.
Typescript works great with Node backend
Typescript improves project quality
Different software projects need the participation of several programmers. All of the factors above contribute to better and simpler project maintenance. When a project's scope expands, and the team grows, developers will appreciate all TypeScript flavors.
The most popular frontend libraries support typescript
If all of the above arguments failed to persuade you to use TypeScript to create the frontend in 2023, I could only point you to the market's "major players." All prominent front-end libraries, such as React, Vue, and Angular, are built-in Typescript and provide Typescript support by default.
As you've seen, TypeScript has both advantages and disadvantages. The downsides of TS are negligible, and the numerous benefits it provides are well worth it. This is why, at Selleo, we utilize TypeScript for most of our software projects.
If you are on the hunt for a reputed, trusted and expert third party program development firm that can build your software on TypeScript, contact us at Selleo.