Angular 2 Development with TypeScript: Why TypeScript?

[Bear Bibeault]

In another topic you wrote:

Yakov Fain wrote:Typescript makes you more productive.

This is a debate that's currently going on in my company (as I'm sure in many others as well) and it's like:

So, from your standpoint: why TypeScript?

[Daniel Trebbien]

Hello Bear,

That's a good question. I am sure that Yakov Fain and Anton Moiseev will reply with their knowledgeable opinion, which I look forward to reading. I am replying because I would like to offer my opinion as a novice experimenter with TypeScript.

I have years of experience developing JavaScript code. The very capable team that I worked with utilized a consistent set of programming conventions that helped to reduce confusion about what the types of variables were (such as adding comments to specify the types of every parameter to a function), but programming conventions can only go so far. If you are working on a lengthy function with numerous local variables, it is easy to forget what the types of locals and parameters are. This makes it easy to erroneously attempt to access nonexistent properties, or call nonexistent methods, or pass objects of the wrong type to other functions. Many of these errors were caught in local development or by unit tests or code review, but not always. And even if caught, there was a certain amount of time wasted. These seconds and minutes of wasted time quickly add up!

Developing TypeScript in Visual Studio Code, Visual Studio Intellisense is able to show me exactly what properties and methods are available on an object, because Visual Studio knows the type of the object. JavaScript IDEs have similar autocompletion features; however, the JavaScript IDE cannot know the types of objects in every case, so either the IDE makes a guess or does not display any hints.

In addition to Intellisense, Visual Studio Code is able to mark syntactically-valid, but erroneous code with squiggly red underline. This is something that IDEs for dynamically-typed languages are not able to do.

Almost a year ago, I saw a humorous tweet from Joe Fabisevich that I think is relevant here:

There are two kinds of programmers. Those who believe in static typing, and those who haven’t been hurt enough by dynamic typing yet.

Daniel

[Yakov Fain]

Why write Angular apps in TypeScript?

You can write your applications in ES6 (and even in ES5), but we use TypeScript as a substantially more productive way for writing JavaScript, and here’s why:

* TypeScript supports types. This allows the TypeScript compiler to help developers by finding and fixing lots of errors during development before even running the app.

* Great IDE support is one of TypeScript’s main advantages. If you make a mistake in a function or a variable name, it’s displayed in red. If you pass the wrong number of parameters (or wrong types) to a function, the wrong ones show in red. IDEs also offer great context-sensitive help. TypeScript code can be refactored by IDEs, whereas JavaScript has to be refactored manually. If you need to explore a new library, just install its type definitions file, and the IDE will prompt you with available APIs, so you don’t need to read its documentation elsewhere.

* Angular is bundled with type definitions files, so IDEs perform type checking while using the Angular API and they offer context-sensitive help right out of the box.

* TypeScript follows the ECMAScript 6 standard and adds to it types, interfaces, decorators, class member variables (fields), generics, and the keywords `public` and `private`. Future releases of TypeScript will support the missing ES6 features and implement the features of ES7 (see the TypeScript “Roadmap” on GitHub at http://mng.bz/Ri29).

* TypeScript interfaces allow you to declare custom types that will be used in your application. Interfaces help in preventing compile-time errors caused by using objects of the wrong types in your application.

* The generated JavaScript code is easy to read, and it looks like hand-written code.

* You can debug your TypeScript code in the browser (with the help of source maps)

* Angular Team recommends TypeScript and the framework itself (as well as RxJS 5) is written in TypeScript. Most of the code samples in the blogs, StackOverflow, and in the Angular documentation are given in TypeScript.

Regards
Yakov

[Sai Hegde]

Nice, this discussion gives me more tools in my arsenal when I go to the design meetings for our next UI project.

[Juan Alfonso]

Good args Yakov!, from my experience TypeScript helps a lot to organize the code, to make it more readable and also help teams to establish a nice way to write code