Education
Last updated onJul 10, 2024
Last updated onJul 10, 2024
Debugging and troubleshooting is the most annoying part of software development but TypeScript handles the inadequacies with grace. That’s why almost 60% of JavaScript developers use it and 22% of them wish to try it.
TypeScript which is often referred to as the superset of JavaScript has slowly gained the attention of many software organizations. After witnessing its benefits, software developers are incorporating the language into their tech stack.
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.
It is a strict syntactical superset of JavaScript and adds optional static typing to the language. It allows developers to specify the variable type, function parameter, returned values, and object properties. The language compiles into JavaScript and the compiled output is pretty neat and readable that can be used wherever you want. The syntax has few similarities with the C#.
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
In JavaScript, the fundamental way that we group and pass around data is through objects. In TypeScript, we represent those through object types.
Syntax:
For Example:
Tuple Type
A tuple is a special-cased array with known types at specific indexes.
Union Type
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.
Intersection Type
The type combines multiple types into one(A way to merge or extend types).
Syntax:
For Example:
Type Indexing
A way to extract and name from a subset of a type.
Type From Value
Reuse the type from an existing JavaScript runtime value via the typeof operator.
Type From Function Return
Reuse the return value from a function as a type.
Mapped Types
Acts like a map statement for the type system, allowing an input type to change the structure of the new type.
Conditional Types
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.
Common syntax
Generics
Declaring a type which can change in your interface.
One can constrain what types are accepted into the generic parameter via the extends keyword.
Overloads
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.
The prefix private is a type-only addition and has no effect at runtime. So, when a transpiler converts TypeScript code to JavaScript, the private keyword is removed.
Private fields:
#private which is runtime private and has enforcement inside the JavaScript engine that is only accessible inside the class. The private fields remain private at runtime even after the TypeScript code gets converted to JavaScript by the transpiler.
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
Generics
Used to declare the type that can be changed in the class method.
Parameter properties
A specific extension to classes automatically set an instance field to the input parameter.
Abstract classes
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.
Static members
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.
Though there are multiple ways to define functions that affect how TypeScript narrows types, most of the time it has been seen that CFA works inside the natural JavaScript boolean logic, but there are ways to define your own functions which affect how TypeScript narrows types.
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
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.
Most JavaScript developers are already in the affair with TypeScript as it is more reliable and easy to refactor. The above cheat sheet gives you quick access to all the TypeScript 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. The platform already supports JavaScript and now it goes versatile in app development with the support for TypeScript.
Want to explore more about the amazing platform and its features?
Visit DhiWise today and sign up to experience the perks of cleaner, customizable, and faster app development.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
