Should I Learn TypeScript? (Benefits & Resources)
In a rush? Skip to TypeScript examples or list of resources.
Being a JavaScript developer is a commitment to always be on the alert.
The learning curve never stops at a precise moment. So you’re always juggling numerous questions in your head.
“Should I learn Vue.js, React... both?”
“What about functional programming? Looks interesting!”
“Is server-side JavaScript any good?“
"Should I learn TypeScript?"
Today I feel like tackling this last question.
We recently played with TypeScript at Snipcart: we're using it to re-write our cart's next version. So, perfect timing to dive into TS on the blog!
This post will cover:
What is TypeScript?
Why should you learn it?
When should you use it?
How can you start learning TypeScript?
I’ve also prepared code examples to demonstrate differences between TypeScript and JavaScript.
Let’s get started!
What is TypeScript?
TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript.
In other words, it's JavaScript that scales.
Psst: if you’re interested in CSS that scales, read this post.
But to truly understand what it means, we first have to backpedal into the evolution of JavaScript. Actually, we have to remember what JS was intended for.
JS started as the language of the browsers, at a time where they were not that powerful. Being a dynamic language—with no “type” system—its aim wasn’t to build large-scale apps.
In the last five to six years though, JavaScript has exploded. It’s used everywhere: from 100-1000000 code lines programs. The problem is, it doesn’t have the scaling abilities of more mature language like C# or Java.
To better understand the state of JavaScript today, try this post.
Some eventually asked: What can we do to make JavaScript scale better?
TypeScript was Anders Hejlsberg and Microsoft's answer.
Created in 2012, it succeeded at two key things:
1. Add the things missing for large-scale app development.
The features that form a safety net for developers—code navigation, statement completion, safe refactoring & error checking before runtime, etc. The static type system lets IDEs reason about the code you’re writing.
2. Stay in the JavaScript ecosystem.
TypeScript works on top of JS. Ultimately your code remains JavaScript and runs everywhere the latter runs. Starting with the same syntax JS developers know and love, TypeScript compiles to clean, simple JavaScript.
It managed to do both well enough to have its initial breakthrough as the core language in Angular 2. It has continuously grown since, within other JS frameworks such as React and Vue.
Why should you learn TypeScript?
Okay, its history might not be enough to convince you that TypeScript is worth learning.
But you should, trust me.
Knowing TypeScript WILL bring many philosophical and technical benefits.
First off, the JavaScript ecosystem is evolving with TypeScript. All the big frontend frameworks are hopping on the TS train, and the whole community is following.
I’m not trying to scare you into learning it here. I'm only exposing the facts. The sooner you master it, the more prepared you’ll be to handle the tools built around it.
TypeScript also comes as JavaScript's answer to strong-typed languages such as C# and Java. Developers working with these, who would’ve never fathomed turning to JavaScript, are starting to look at it with curiosity.
(Fun fact: TypeScript’s creator was himself a core contributor to C#).
It’s not to say that you should be introducing yourself to TypeScript before learning JavaScript though. I’m all about starting with the basics.
On more technical grounds, here’s what TypeScript can add to your programming experience:
→ More predictable code that's easier to debug. JavaScript is often great for the flexibility it gives to users, until the critical point where it becomes unreliable, messy & buggy. TypeScript provides the necessary safety to organize your code and catch errors of all kind before runtime.
→ Great tools enabled by static types. Tools to: upgrade your development experience, by adding code uniformity & quality, and save development time. Tools like: TSLint, tsserver—integrated into most TS-enabled editors, awesome-typescript-loader.
→ The ability to use features from the future, today. TypeScript manages to automatically close the feature gap between versions of JavaScript (using transpilation). Meaning that you can focus on working with the latest, most modern features without worrying if your code will work on old browsers and devices.
→ Harmonious team collaboration on a growing codebase. It unifies code and imposes a structure through well-defined interfaces.
Developers using TypeScript love it.
But don't take my word for it:
When should you absolutely try it?
There are specific types of projects where I’ll just have to stop you and ask:
“Why are you not using TypeScript already?!”
Snipcart was a good example of such a project. Maybe you’ll recognize yourself in our own experience.
When we started rewriting our JavaScript-based shopping cart, we never doubted the fact that TypeScript would be a part of it. Our codebase needed to keep the same level of maintainability over time, which wasn’t always the case until now.
With plain JavaScript, the inevitable maintenance issues can lead to decaying software and hellish development, which we sometimes experienced with our old cart. We, of course, did tests, but ultimately they become time-consuming when you want to cover everything.
This testimony rings a bell? Maybe TypeScript is the solution for you too. Likewise for the following situations:
With large codebases — It once again all comes back to scaling apps. TypeScript won’t suddenly eliminate the need for debugging, but will certainly help avoid common errors.
With teams accustomed to statically-typed languages — In our case, Snipcart’s backend is written in C#, so the migration to TypeScript on the frontend feels natural.
As a replacement for Babel
If you’re working with Angular 2 — TypeScript is core to the framework, so it’s strongly recommended to learn it before using Angular 2.
I think I’ve done everything I could to help you decide on whether it is worth for you to learn TypeScript or not.
It inevitably comes with a learning curve. Developers used to other languages will quickly find some quirks since it's JS-based. But seasoned JS developers can’t escape the learning curve either.
Don’t worry though, I have the resources to help you through this process!
How to get started with TypeScript
I’ll fire up my code editor to offer a better visual demonstration. These examples show features that TypeScript adds to your JS development.
Configuring TypeScript
To start working with TypeScript, you’ll need a tsconfig.json in the root directory of your source files. A good starting point could be this one:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": true,
"strictNullChecks": true
}
}The target property specifies a set of available JavaScript APIs. Specific features can be enabled by using the lib property with a list of lib files to reference. Other compiler options can be specified in your config file to customize how TypeScript will compile your .ts files.
To quickly play around with TypeScript you can install it globally with npm install typescript -g and compile your .ts files using the tsc command: tsc my-code-file.ts
When you’re ready to integrate TypeScript in a full-blown project, there are a few webpack loaders available (ts-loader, awesome-typescript-loader, fork-ts-checker-webpack-plugin). You can also throw TSLint into the mix with a pre-made config like the tslint-config-airbnb that we use.
TS Example 1: Simple class syntax and typing
TypeScript makes it easy to adopt an OOP approach with classes and fully typed members:
class Widget {
elem: HTMLElement;
constructor(elem: HTMLElement) {
this.elem = elem;
}
show() {
this.elem.style.display = 'block';
}
hide() {
this.elem.style.display = 'none';
}
}Inside our IDE, that typing give us autocomplete.
TS Example 2: Async / Await
Code using async / await keywords has become the new standard of asynchronous operations. With typescript, you can use those out-of-the-box whatever version of Javascript you’re targeting:
class Post {/* … */}
async function getPosts(): Promise<Post[]> {
let page = 1;
const posts: Post[] = [];
let data: {posts: Post[], hasMore: boolean};
do {
const result = await fetch('/api/posts?page=' + page);
data = await result.json<{posts: Post[], hasMore: boolean}>();
data.posts.forEach(post => posts.push(post));
page += 1;
} while (data.hasMore);
return posts;
}TS Example 3: Implicit interfaces
Somewhat similar to Golang’s interfaces, you can pass arbitrary types as an interface as long as they provide the same members:
interface EventSource {
addEventListener(ev: string, cb: Function);
removeEventListener(ev: string, cb: Function);
}
function convert(em: Emitter): EventSource {
return {
addEventListener: (ev: string, cb: Function) => em.on(ev, cb),
removeEventListener: (ev: string, cb: Function) => em.off(ev, cb),
};
}Where and how can you learn TypeScript?
Now that you’re thrilled about rockin’ it with TypeScript, I won’t let you hanging without killer resources to sharpen your knowledge.
In the same vein as what we did earlier with Vanilla JS, I’ve put together this list of TypeScript resources to kickstart your learning:
Learn TypeScript - Open source list of resources on GitHub
The list contains free or paid Typescript-related content including books, courses, evergreen resources, noteworthy articles, communities, and newsletters.
🔔 We want to keep it as open and collaborative as possible. So don't hesitate to add valuable stuff with a fork + PR! 🔔
Here’s hoping you find value in there!
Closing thoughts
So, what have we learned here?
First, I want to make sure I’m very clear on one point:
If you’re only starting with JavaScript, don’t bother jumping into TypeScript—for now.
You should take the time to master the JS syntax and feel at ease with the language first. Then again, the projects you’ll work on at time probably won’t ask for the features TypeScript brings.
But once you get to that level, you should go on and experiment with it. You’ll quickly be impressed by the code quality it outputs and the overall maintainability your projects will gain. Plus, when you’ll want to get down & dirty with JS frameworks and others tools crafted by the community, chances are you’ll find TS on your path. Better be prepared!
Again, don’t hesitate to add resources to our GitHub list.
Did I miss something about TypeScript? Maybe you don’t agree with anything I just said, and absolutely hate it? One way or another, drop a comment in the section below and let’s talk about it!
If you've enjoyed this post, please take a second to share it on Twitter. Got comments, questions?
