Table of Contents
- Object-oriented programming support;
- Dynamic typing;
- Lightweight interpretation;
- Platform independence;
- Async processing;
- Client-side validation.
TypeScript: what is it and when is it used?
- Static typing and annotations;
- JS libraries support;
- Compatibility with any device, browser, or OS;
- ES6 features support (ECMAScript);
- Modules support;
- Generics support;
- Full-featured IDE support.
Must-have types of TypeScript
- Enum: provides a named set of constant values, which can be used to model real-world concepts, such as days of the week;
- Any: represents a value of any type. It can be used to type variables dynamically, but it is often considered a last resort, as it reduces the benefits of TypeScript’s type checking;
- Void: represents the absence of a value typically used as the return type of functions that do not return a value;
- Never: represents a value that never occurs. It is typically used as the return type of function that throws exceptions or does not return;
- Unknown type: a variable type is not known. It has to be checked by a developer before it is used.
Developers can use union types when a value can be of more than one type. For example, when a property is a string or a number. The union type allows the TypeScript compiler to track whether the code always takes the right value. It checks type compatibility and generates type information during runtime. No matter what will be received (e.g., a string, number, or object), we can ensure that each case will be handled without unit testing.
Type aliases create a new name to refer to that type that can be reused throughout code, instead of writing it by hand. Unlike type unions, where explicit type information is used repeatedly, it’s a convenient way to simplify complex or repetitive types and improve code readability.
TypeScript has in-built support for interfaces. An interface defines the specification of an object. It describes the contract that states what data structure should be used but doesn’t specify how it will be done. As you’ve already realized, interfaces help define a concrete plan for implementing an object. Using interfaces correctly can improve the performance of code you write.
Utility types are constructed to work with base TypeScript types. This is a handy tool for simplifying complicated type descriptions or changing existing ones. These types use generics, which allow developers to customize the results of their work. As a result, developers can save effort and make their code concise, which means less error-prone. So, let’s take a look at simple but powerful utility types:
- Pick: creates a new type based on an existing type;
- Omit: creates a new type by excluding one or multiple properties from a type (opposed to Pick);
- Partial: creates a type with all properties set to optional;
- Require: creates a type with all properties of Type set to required (opposed to Partial);
- Readonly: create a type with all properties set to read-only;
- Record: constructs an object type of property keys from keys and the value of type;
- Return: constructs a type from the return type of function type.
In a nutshell, developers should use it to avoid hard-coding types. Besides the above, many other types of TypeScript documentation assist developers to write cleaner code.
Now let’s return to a controversial question: which is better? For that, let’s take a deep look at the pros and cons of both languages.
- Speed: it is not necessary to compile the code every time, which speeds up the development and debugging significantly. Also, client-side scripts run faster due to client-server connections and lower server load;
- Server load: as JS runs on the client-side, it is possible to validate the data on the browser itself, rather than send the data to a server;
- Compatibility: the language is supported by a wide range of browsers and platforms;
- Enhanced functionality: third-party extensions allow developers to add snippets of predefined code to their own code, thus saving the development time and resources.
- Security: there is no 100% guarantee of code security since it is possible to download a library with malicious scripts or to remove/modify it;
- Difficult bug discovery: the lack of a strict type makes it more difficult to detect errors at the early stage.
Benefits and drawbacks of TypeScript
- Static type-checking: helps type-checking during the compilation time. Thus, a developer can detect errors while writing code without running the script;
- Fast updates: regular upgrades are required to keep the code maintainable. TypeScript makes it easier to update or refactor the apps;
- Compatibility: the language runs smoothly on any device, platform, or browser;
- Decorators: with this feature, you can add new behavior, existing objects, or functions without modifying the source code;
- Generic types: this feature allows creating ‘type variables’ which can be used to create classes, functions, type aliases with no need to specify the type explicitly. Thus, generics make it easier to write reusable code;
- Readability: by adding strict types and other elements, the code becomes more readable for developers;
- Rich IDE support: TypeScript is supported by many IDEs, including Visual Studio and WebStorm.
In light of the TS benefits, let’s consider scenarios where it is not the right fit – in other words, its drawbacks:
- Steep learning curve: developers still need to invest a lot of time and effort to learn various TS types and their specific features;
- Long compilation: TS files must be compiled before they are run and, as a result, the compilation takes a long time;
- Bloated code: enhanced code readability means writing more code, which can slow down the development and lead to bloated code;
- False sense of security: despite common beliefs, the TypeScript compiler may miss some errors, so developers need to double-check their code.
|Strongly typed with static typing
|Loosely typed with dynamic typing only
|Used to develop complex and large projects
|Used to create simple and quick websites and scripts
|During development, it identifies possible compilation errors
The compilation isn’t required
|Utilizes terms like interfaces and types to describe the data
|No such terms
It is easy to learn and is flexible for writing web scripts
|Easy support of new features in many browsers, even ES3-compatible ones
|A specific browser version supports only a particular set of features
|A program uses specific syntax based on JS. But it also has type annotations, interfaces, classes, and other features
|A program contains syntax based on ECMA specifications
|Slack, Asana, Typeform, Canva
|Facebook, Netflix, Microsoft, and Uber