This article will walk you through the Advanced TypeScript concepts and capabilities. So let’s dive in,
TypeScript is the strongly typed programming language developed and maintained by Microsoft. In Oct 2012, TypeScript was first introduced by Microsoft after two years of internal development.
If you are a TypeScript user, you might have noticed that “once you start using it, you will stay with it.” Find out why it’s worth using TypeScript for programming:
TypeScript is a simple language and allows developers to express types in terms of other types. However, while performing the basic tasks, having a profound understanding of how TypeScript works are critical for unlocking its advanced functionality.
As we know more about TypeScript, we can utilize this knowledge to write cleaner and testable code. In this section, we are combining all the basic concepts of TypeScript and its advanced features in a single cheatsheet, so here we go.
Object Literal Type
A tuple is a special-cased array with known types at specific indexes.
A union type describes a value that can be one of several types. It allows us to use more than one data type for a variable or a functional parameter.
The type combines multiple types into one(A way to merge or extend types).
A way to extract and name from a subset of a type.
Type From Value
Type From Function Return
Reuse the return value from a function as a type.
Acts like a map statement for the type system, allowing an input type to change the structure of the new type.
It works as an “if statement” inside the type system. Created via generics, and then commonly used to reduce the number of options in a type union.
Template Union Type
A template string can be used to combine and manipulate text inside the type system.
Declaring a type which can change in your interface.
One can constrain what types are accepted into the generic parameter via the extends keyword.
A callable interface can have multiple definitions for different sets of parameters.
Extensions via merging interfaces
Interfaces are merged, so multiple declarations will add new fields to the type definition.
this parameter in the classes
The value of this parameter inside the function depends on how the function is called. This parameter can be used to bind function or arrow function.
We can add ‘this’ parameter to the method definition to statically enforce that the method is called correctly.
Type and Value
A class can be used as both a type and a value.
Here the first Bag is a Type and the second Bag is a Value, so be careful while using class.
The common syntax used in Classes
Used to declare the type that can be changed in the class method.
A specific extension to classes automatically set an instance field to the input parameter.
A class can be declared as not implementable, but as existing to be subclassed in the type system. As can members of the class. The class which extends the abstract class must define all the abstract methods. We cannot create an instance of an abstract class.
A static property and method are shared among all instances of a class. To declare a static property, you use the static keyword. To access a static property, you use the className.propertyName syntax.
Static property and method
Static and non-static fields with the same name can exist without any error.
Static and non-static fields with the same name
Control Flow Analysis is the core TypeScript feature that analyses your code to get the best type interface depending on the variable usage. CFA always takes a union and optimizes your code by reducing the number of types inside the union based on the logic in your code.
Most narrowing comes from expression inside the if statements where different type operators narrow inside the new scope.
typeof operator (for primitives)
instanceof operator (for classes)
“property” in the object (for objects)
type-guard functions (for anything)
Narrowing also occurs on the same line as code, while performing the boolean operations.
Combining string literal types, union types, type guards, and type aliases to build an advanced pattern is called discriminated unions, also known as tagged unions or algebraic data types.
Discriminated Unions are the combination of three things:
In the following example, all the members of the union have the same property name, however, CFA can discriminate on that.
Narrowing types using ‘as const’
const assertion to narrow an object literal type to its element. The prefix ‘as const’ locks all types to their literal versions.
Narrowing types using ‘as const’
Tracking through the related variables
Reassigning updated types
A function with a return type describing the CFA change for a new scope when it is true.
A set of functions that throws an error when something unexpected happens
Following is a function describing CFA changes affecting the current scope, because it throws instead of returning false.
If you find yourself having trouble with some of the concepts discussed above, try reading through the TypeScript Documentation first to make sure you’ve got a solid understanding of all the basic and advanced concepts.
But why are we sharing all this with you?
Want to explore more about the amazing platform and its features?