All About Typescript
Table of Content
What is TypeScript?
When to use TypeScript?
Why use TypeScript?
— Popular Frameworks
— Testing Frameworks
— UI Frameworks
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?
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?
This programming language has a vast amount of benefits. Here are our top 10 reasons to use TypeScript:
- Open-source. This feature makes it flexible, agile and cost-effective.
- 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.
- 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.
- Run everywhere. Since it stems from JS, Typescript can run anywhere JS does.
- 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.
- Object-oriented programming concepts. Object-oriented programming keeps your code clean and robust, improving quality and maintainability.
- 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.
- Supports static typing. Statically-typed languages have many benefits. These include protection from runtime errors, performance optimization, and IDE assistance.
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 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 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.
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.
Popular TypeScript Frameworks
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 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 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
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.
TypeScript Frameworks for UI
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.
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.
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.
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.
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.
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.
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.
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 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.
You can always take a look at the official TypeScript documentation.
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:
- If you have some JS knowledge, you can take a look at the official TypeScript handbook.
- Basarat Ali Syed wrote a comprehensive book on TypeScript. Currently, it’s translated into several languages.
- You can also check both the TypeScript Tutorial and the Codecademy Tutorial.
- In case you’re willing to make a small investment, you can read
Programming TypeScript. This book’s author is Boris Cherny.
- There is this tutorial for beginners, by Shu Uesugi. Also, there are dozens of articles, by Marius Schulz, on different aspects of TS.
There are plenty of online courses available if that’s more your speed. Here are some of them:
- Understanding TypeScript — Udemy
- TypeScript Masterclass (with free e-Book) — Udemy
- TypeScript Fundamentals — Pluralsight
- Learn TypeScript: The Complete Course for Beginners — Educative
- TypeScript Fast Crash Course — Udemy
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!
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.