Nona Blog

Why Typescript?

ES6 has added many much-needed features to the language but the biggest problem that persists with Javascript is how poorly it looks after your types. Like most of the problems with the language, it’s a result of its origins as a beginner-friendly, easy-to-learn scripting language.

What’s wrong with Javascript?

ES6 has added many much-needed features to the language but the biggest problem that persists with Javascript is how poorly it looks after your types. Like most of the problems with the language, it’s a result of its origins as a beginner-friendly, easy-to-learn scripting language.

I’m a big fan of dynamic languages, like Ruby and Elixir, but when I’m using them I know that the interpreter will strongly check types and not allow non-sensical code to continue running.

What is Typescript?

Typescript is ES6 with a few additional, but key, features:

  1. Type annotations
  2. Interfaces

Why should we use it?

Types are documentation

// Here I'm able to convey that I expect state parameter to be 
// a boolean and not a string so anyone using my code will be
// immediately alerted that they are not using the code in the 
// way it was designed.
const typeAnnotation = (state: boolean, message: string) => {};

// So this would not compile
typeAnnotation('COMPLETE', 'Finally, done!');

// The type system infers the type if possible. So
let myName: string = "James";
// can be
let myName = "James";
// That's right, I'm looking at you Java

You’re not locked in

Typescript is a strict superset of Javascript and compiles down to really clean code. If you decide to move away from Typescript in the future, you can compile your codebase and move forward with that with very minimal additional work.

We’re all processing our Javascript before running it anyway

If you’re still writing ES5 and not reaping the benefits of ES6/7/Next/whatever we’re calling it now, you have my condolences — but most of us are running our Javascript source through some kind of transpilation process already.

You can think about the Typescript compiler as an incredibly powerful linter and it’s not going to add a massive amount of additional configuration to your existing setup.

Interfaces let you remove data clumps

Interfaces let you remove data clumps

// We often pass related data around as a combination of variables
Blog.publish(title, author, content);
Blog.translate(title, content);

// Boo! We're not being consistent and if we need to change the interface 
// for this object in the future we potentially need to update it all
// over the codebase.

// Interfaces can help clear that up
interface BlogPost {
  title: string,
  author: string,
  content: string
}

const post = {
  title: "Why Typescript",
  author: "James Gareth Smith",
  content: "tl;dr Typescript rocks!"
}


Blog.publish(post);
Blog.translate(post);

This works better than just wrapping your parameter in a POJO because we can ensure that the object being passed around has the fields you’re looking for at compile time, rather than adding a bunch of error-checking code to guard at runtime.

It makes the tooling better

Giving tools an idea of the types you’re working with allows them to offer much deeper insight and help with your code. For example the Typescript Intellisense service in Visual Studio Code does a much better job at code completion, hinting and type definitions of code you’re calling into.

How do you get started?

Well, if you’re like me, you’ll start by reading the manual. Make sure you know what is Typescript and what is plain old ES6 and you’ll be off to a good start.

James Smith

James Smith

Senior Fullstack Developer - Nona

Add comment