This article will walk you through the Advanced TypeScript concepts and capabilities. So let’s dive in,
What is TypeScript?
Advantages of TypeScript
Advanced TypeScript cheat sheet
— Control Flow analysis
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:
Higher code stability due to strongly typed variables.
Strong tooling and community support.
Easy to understand and thus best for the growing team of developers.
It improves agility while refactoring and it’s better for the compiler to catch errors than wait until things fail during runtime.
By leveraging the power of TypeScript and Dependency injection we can efficiently avoid bugs through efficient testing and debugging.
With its auto-injection libraries, it makes the source code extremely maintainable and predictable.
With TypeScript, developers can write more clean, type-safe, and testable code with ease.
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.
Think of Type as variables: the type can be created in the same way we create variables.
TypeScript has lots of global types that can be used to perform common tasks.
Common data types:
Built-in type primitives: boolean, string, number, undefined, null, any, unknown, never, void, bigint, symbol.
String: Represents string values like “Hello, world”.
Number: Represents all numbers including integers and floats. For example, 42 and 42.3 are both numbers.
Boolean: Represents boolean values true and false.
Array: Represents an array of numbers, strings, and so on. It can be represented as number, string.
any: The type is used when you don’t want any type checking.
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.
Used for type checking whether the object has a specific structure(shape) or not.
Only contain the declaration of methods and fields but not implementations.
Common built-in JS objects: Date, Error, Array, Map, Set, Regexp, Promise
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.
Interfaces can only describe object shapes.
Interfaces can be extended by declaring it multiple times
In performance-critical types interface comparison checks can be faster.
TypeScript offers full support for the class keyword introduced in ES2015.
Creating a Class Instance
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 and non-static fields with the same name can exist without any error.
Control Flow Analysis
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.
Discriminated unions/algebraic data types:
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:
The Discriminant - Types that have a common literal (or enum) property
The union - A type alias that takes the union of those types
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.
Tracking through the related variables
Reassigning updated types
Type Guards to perform runtime checks
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?
At DhiWise, we believe in empowering developers, no matter which technology or platform they are using. So the developers, who want to start right at the code level can take the advantage of DhiWise functionalities.
That is the reason DhiWise, a multi-technology platform provides a Figma to code plugin that enables developers to quickly convert their Figma design to code(React, Kotlin, Swift, and Flutter).