logo-footer

TypeScript and its Relevance in 2022

Mariel Lettier

Table of Content

What is TypeScript?
When to use TypeScript?
Why use TypeScript?
TypeScript Basics
TypeScript Frameworks
Popular Frameworks
Testing Frameworks
UI Frameworks
TypeScript Libraries
Learning TypeScript
Conclusion

There are dozens of popular languages out there. Besides its different purposes, developers also have their own preferences. In this article, we’ll focus on one of our favorites: TypeScript. According to Stack Overflow’s 2021 Developer Survey, it ranks seventh on Most Popular Technology and third on Most Loved! Inhere, we’ll cover when to use it, while listing its many available tools and resources. Are you ready to dive in?

What is TypeScript?

TypeScript is an open-source programming language, developed by Microsoft in 2012. As defined on its website, it’s “JavaScript with syntax for types”. Often, it’s referred to as the superset of JavaScript (JS). Furthermore, it’s used to develop JS apps, and also web apps combining it with other tools, such as Angular or Node.JS. As a framework, it contains plain JS code, plus specific keywords and constructs. To achieve this, the code gets translated to JS through compilation. This means that any browser that supports JS can use it.

When to use TypeScript?

When to use TypeScript?

When you have a large codebase

TypeScript’s type checking can make huge differences in reducing errors. This comes in handy both with considerable codebases and big work teams.

In case the jump to JS might cause problems

A transition to TypeScript may be easier than to JS if a team usually work with strong typed languages like C#. Although it’s always a recommended thing to learn JS, it’s not imperative. Also, since TypeScript and C# have similar syntaxes, it’s an even easier transition.

If your chosen framework or library recommends it

Mixing TypeScript with Angular or Redux can help you create amazing products. If you use recommended languages, you can make the most of each tool and improve its performance. Don’t know any projects created with TypeScript? Take a look at our showcase of Wurrly, an amazing educational platform!

Why use TypeScript?

Why use TypeScript?

This programming language has a vast amount of benefits. Here are our top 10 reasons to use TypeScript:

  1. Simplifying JavaScript. This makes codes easier to read and debug.
  2. Open-source. This feature makes it flexible, agile and cost-effective.
  3. Easy to read and understand. Since it’s more explicit, it’s easier to get. This comes handy if you are working with developers who may not work with the same languages.
  4. Powerful type system that prevents bugs. We know that no programming language comes bug-free. But TypeScript’s type system does help to prevent lots of errors. Moreover, type checking can save a lot of time when fixing bugs.
  5. Run everywhere. Since it stems from JS, Typescript can run anywhere JS does.
  6. Large and supportive community. TypeScript has a considerable active community behind it. This translates into a myriad of resources and tools available. Also, countless developers are willing to help whenever a problem arises. On top of that, companies such as Google, Microsoft, and Asana, share their work with the community.
  7. Object-oriented programming concepts. Object-oriented programming keeps your code clean and robust, improving quality and maintainability.
  8. Compatible with most third-party libraries. Being compatible with JS libraries, there were already countless libraries when it launched. Moreover, this language is also compatible with most third-party libraries. This means you can find one for pretty much anything you need.
  9. Compiles to any JavaScript version. Well, at least those still in use, starting with ES3.
  10. Supports static typing. Statically-typed languages have many benefits. These include protection from runtime errors, performance optimization, and IDE assistance.

TypeScript Basics

TypeScript Basics

This framework introduces some new concepts and features to JavaScript. Here are some of the basic concepts to have in mind:

Types

One of the main features that TypeScript introduces are types. As a definition, these represent the properties and functions of a specific value. Also, they get categorized: there are primitive types and object types. On one hand, primitive-types include string, number, boolean, null, undefined, and symbol. Meanwhile, object-types include classes, functions and arrays, among others. The purpose of types is to help detect errors in compilation. Also, they allow you to understand the connections between values and variables. You can find out more about TypeScript types in this tutorial.

Classes

Classes are special functions that mimic the class keyword. As templates, These functions work to create new objects. Although classes are present in JS, TypeScript adds some twists. Some of them include type designations to members and parameters of methods. This allows you to use object-oriented techniques such as abstraction and encapsulation. Classes are great to use when you know you will need to change the state of an object over time. On top of that, they associate behaviors with data, among other things. If you want to learn more about TypeScript classes, you can take a look at this article.

Interfaces

Interfaces name types and define contracts. This works both within your code and any code outside of your project. Also, they make the code easier to read, by defining the properties and types that an object can have. For a full breakdown of TypeScript interfaces, visit this tutorial.

Generics

TypeScript generics let you create reusable components. As a result, components created with generics can work with a variety of data types. Of course, this guarantees more flexibility and scalability. These work like C# or Java’s, as they allow you to make generic functions, classes, interfaces, and methods. If you want to learn how to create generics, you can check out the TypeScript handbook.

TypeScript Frameworks

Given that it stems from JavaScript, there are countless frameworks and libraries that work well with TypeScript. We’d like to give you an overview so you have an idea of the tools available for this programming language. We’ll start with the most popular TypeScript frameworks and then move on to the best TypeScript testing frameworks and the best TypeScript frameworks for UI.

TypeScript Frameworks

Popular TypeScript Frameworks

NestJS

Released in 2018, NestJS is one of the most popular Typescript frameworks available. Also, it’s one of the fastest-growing frameworks in the Node.JS ecosystem. Through NestJS, you can build scalable and efficient Node.JS web apps. This is an extensible, versatile and progressive framework. Furthermore, it includes great documentation, and an application structure supported by Angular.

FeathersJS

FeathersJS is a lightweight web framework released in 2014. Currently, it’s used to create real-time apps and REST APIs. Its features simplify the development of modern web and mobile apps. FeathersJS is a minimalist web framework, so you can use it in a universal way. Among its features, it supports both relational and non-relational databases. Moreover, it also supports authentication.

LoopBack

LoopBack is an extensible open-source Node.JS and TypeScript framework based on Express. In general, it’s used to build APIs and microservices. Within its features, it has ready-to-use built-in models and built-in access level controls. What’s more, it has built-in API explorer and API documentation.

TypeScript Testing Frameworks

Jest

Jest is a JavaScript testing framework focused on simplicity. Not only it works with TypeScript, but also with Babel, Angular, React, and more. Some of Jest functionalities include assertions, coverage analysis, mocking, and parallel testing. This TypeScript testing framework is easy to set up, fast and also does snapshots.

Mocha/Chai

This is an amazing framework/library combo for TypeScript testing. While Mocha is a feature-rich testing framework, Chai is an assertion library. Moreover, Chai is both BDD (behavior-driven), and TDD (test-driven development). Both of them run on Node.JS and in browsers. As for Mocha’s framework, its great benefit is including a test runner. As this framework does not include assertions, pairing it with Chai does the trick. If you need test doubles, you should also look into the Sinon.JS library.

Jasmine

Jasmine is a BDD framework for JavaScript testing. To work, it doesn’t need a DOM nor depends on any other JS framework. As a testing framework, it’s fast and has a clear and easy-to-understand syntax. Also, it’s available for both Node.JS and browsers. Nonetheless, the only thing not built into Jasmine is a test runner. But, in that case, you can use Karma.

TypeScript Frameworks for UI

Angular

We couldn’t fail to mention Angular. In case you don’t know, the open-source framework is completely written with TypeScript. Angular is cross-platform, flexible, and has great performance and full support from Google. Also, it includes great UI components and component libraries. To name a few, there are NGX Bootstrap, Clarity and NG Bootstrap.

React Native

The popular UI framework relies on the learn once, write anywhere paradigm. With React Native, you can create Android and iOS apps, combining it with the beloved React JavaScript library. As a framework, it’s open-source, cross-platform, and focused on UI design.

Vue.JS

Vue.JS is an open-source, progressive JS framework. It’s developer friendly, has a small but super-fast DOM, and has great documentation. Also, it has similarities with both Angular and React. For instance, it uses template syntax and relies on component-based architecture. On top of that, there are also plenty of amazing UI libraries available for Vue.JS. To name a few: Vuetify, Element, and Vue Material.

TypeScript Libraries

We’ve already mentioned Chai for testing and React for UI in the previous section. But, there are quite a few great libraries that work amazingly with TypeScript. Since TypeScript is, in essence, an extended version of JS, all JS libraries are compatible with it. This applies either on their own or by using their extended version. If you want to tackle this language, here are some libraries that will cover different areas.

TypeScript Libraries

jQuery

jQuery is an open-source, free, fast, and feature-rich JS library, created in 2006. It helps with HTML document traversal and manipulation, Ajax, animation, and event handling. Also, over 75% of websites use this library. As a library, it’s lightweight and versatile, and includes an easy-to-use, minimalistic API.

D3.JS

This library gets its primary usage from manipulating data-based documents. D3.JS illustrates graphs on .svg elements, and makes powerful data visualizations possible. These elements are also known as Data-Driven Documents.

TS ToolBelt

This is the largest TypeScript utility library out there. Its features cover over 200 utilities, and it has a programmatic API. Moreover, every week tens of thousands of developers download TS Toolbelt.

Algolia Places

This library’s goal is to address auto-completion, by leveraging the OpenStreetMap database. While providing a modern and clean look, Algolia Places is easy to use and extend. Also, it’s able to combine places with search results.

Anime.JS

As you might have gathered from its name, Anime.JS is an animation library. Within its features, it’s lightweight, and has a simple and powerful API. Moreover, it works with most browsers, like Chrome, Safari, Opera, Firefox.

Go.JS

Go.JS builds diagrams on the web with both JS and TypeScript. As a result, it creates data visualizations, graph editors and drawing tools. Furthermore, it has automatic layouts, extensive tools, and built-in context menus and tooltips. If you want to explore more TypeScript libraries, you can do it here.

Learning TypeScript

Learning TypeScript

Documentation

You can always take a look at the official TypeScript documentation.

Community

If you have any questions or ever need help on one of your TypeScript projects, be sure to get in touch with the TypeScript community through any of these channels.

Handbooks and Tutorials

If you like learning on your own, here are some essentials to get you started:

Online Courses

There are plenty of online courses available if that’s more your speed. Here are some of them:

Videos

If you prefer videos, here are two episodes from Microsoft’s Five Things to give you some background on TypeScript:

Also, you can join the TypeScript Weekly mailing list to receive information, resources, news and tips on TypeScript regularly!

Conclusion

As you can see, there are not only many reasons to learn and use TypeScript. Also, there are countless resources and tools available to work with it. We hope this article has given you enough information to start your journey!


Do you have a project in mind? Are you already working on a business but with a different language? If you're wondering if TypeScript can be the ideal language for it, get in touch with us! Our team will work with you every step of the way to ensure that your product exceeds your expectations.

We are ready
to make your project happen

Let’s talk