5 good reasons to adopt TypeScript in your frontend JS application.

 1)  Typescript is a superset of JavaScript you can just write JavaScript code which is valid TypeScript (TS) code, you can mix and match but you would lose out not making use of the type system. So you can start straight away.

You might say: “Ok I think it’s worth exploring TS but that’s just for Angular right?”, nope. You can use TS with any JS project including Node or React apps, take a look at these repos from Microsoft:

https://github.com/Microsoft/TypeScript-Node-Starter

https://github.com/Microsoft/TypeScript-React-Starter

In particular for React, I think it help make sense of the Component Architecture it uses. Consider the following snippet from Microsoft

import * as React from "react";

export interface HelloProps { compiler: string; framework: string; }

export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;

In a typical React component you handle "props" passed from "outside". React does not have Dependency Injection: when a component depends on a function or a value from another component, you can pass the function or value in as a `prop`. But the problem is that most of the time you just have this "props" but don'e have a clue what they contain, it's not clear from reading the code at a glance.

In the snippet above you have an interface for the props handled by the Hello component. You can then easily navigate the code to know what that interface represents.

2)   You write less code and more readable. You will be able to better manage a large codebase, and benefit from language Inheritance for better reusable code. Even if you are a JavaScript purist and hate frameworks, but prefer to write your own libraries, you’ll find TS can help you a lot to give a sense to your API design.

3)   Gets some quick feedback with compilation errors. Type safety is obviously the greatest feature of TypeScript, just make the most of it. Just a very basic example:

interface Foo {

        bar: number;

        bas: string;

     }



     let foo = {} as Foo;

     foo.bar = 123;

     foo.bas = "Hello World";



     // later in the codebase:

     foo.bar = 'Hello Stranger'; // Error: You probably misspelled `bas` as  `bar`, cannot assign string to number

     }

"Don't trust names. Trust types. Types don't lie. Types are your friends!"

[Quote: P.I.Soumont - Functional Programming in Java 8]

4)   You can use ES6 features (or even ES7) without having to worry about browser compatibility (see: ES6 browser compatibility table: https://kangax.github.io/compat-table/es6).

As you might know ES6 is a significant update to the JavaScript language  (see “6 reasons Web developers need to learn JavaScript ES6 now”), although some browser are still behind. In fact you set the TypeScript 'transpiler' to target ES5 and forget about most of your browser incompatibilities.

5)  There is some pretty good tooling supporting TS, like Visual Studio Code and WebStorm IDE, so you'll benefit from intelli-sense, code completion. An example below:

So I really hope you'll consider TS in your next JS application. I think it's about time people take it into consideration a bit more especially in the Enterprise environment where developers tends to build custom JS libraries a lot but they often lack of structure / documentation. Static typing wins here because it gives you a bit of help self documenting code with an appropriate function signature.