Angular Apps in TypeScript or Dart?
Tags: typescript, dart, angular
Published: 2017-12-05 18:45:03

---
title: Angular Apps in TypeScript or Dart?
published: true
description: Should your next Angular project be written in TypeScript or Dart?
tags: #typescript, #dart, #angular
---

_Edit: if you are new to TypeScript syntax, you might find [this](https://dev.to/abelagoi/learn-the-basis-of-typescript-to-start-writingangular-87i) article by @abelagoi helpful. If you're new to Dart, I'll try to write something about Dart since [nobody else](https://dev.to/t/dart) has written about it yet :)_

_Edit2: [Dart for Beginners](https://dev.to/jvarness/dart-for-beginners-bc3)_

In a never-ending struggle to determine [which language that compiles into JS is best](https://github.com/jashkenas/coffeescript/wiki/list-of-languages-that-compile-to-js), Google makes everything even more confusing by offering many ways to write Angular apps. The two main ways you can write Angular apps is in either [TypeScript](https://github.com/angular/angular) or [Dart](https://github.com/dart-lang/angular).

That being said... What should you use? Let's compare what developing the Tour of Heroes application is like in [TypeScript](https://angular.io/tutorial) as well as in [Dart](https://webdev.dartlang.org/angular/tutorial).

## The Languages

[TypeScript](https://www.typescriptlang.org/) is a typed superset of JavaScript that is built and maintained by Microsoft. You can think of it as JavaScript but with proper types. In TypeScript, you can define interfaces, create classes, all while having first-class support for accessing your favorite JavaScript libraries. You can **write JavaScript** in your TypeScript code and it will **work as expected**.

This is extremely important because if you have a favorite NPM library that you want to keep using, you can write the code in TypeScript exactly as you would in JavaScript and **everything works smoothly**.

[Dart](https://www.dartlang.org/) is a strongly typed language (required as of [Dart 2.0](https://www.dartlang.org/dart-2.0#strong-mode-and-static-typing)) created and maintained by Google, with first-hand [asynchronous support](https://www.dartlang.org/guides/language/language-tour#asynchrony-support). It can be compiled into JavaScript, but there are some [quirks](https://www.dartlang.org/guides/language/language-tour#booleans) that you need to be aware of, and unlike TypeScript, support for calling JavaScript libraries happens through [interoperability](https://api.dartlang.org/stable/1.24.2/dart-js/dart-js-library.html) libraries built into Dart.

If you have a favorite NPM library that you love and you want to keep using it for your Angular application, you might be tempted to just use TypeScript instead. I personally wouldn't blame you, as interop'ing between Dart and JavaScript doesn't sound particularly great.

However, the Dart Language comes packaged with [pub](https://pub.dartlang.org/), which allows you download reusable packages from a centralized repo, just like NPM. Packages in pub are categorized to show you that the library will work with web, Flutter, or server/command line development, so if you see a library that only works for [Flutter](https://flutter.io/), you probably don't want to use it, nor could you (I might make another post about Flutter later, but we'll see).

## Creating a Project

Both the Dart version of Angular and the TypeScript version of Angular offer command line interfaces, and it's pretty easy to make a new project.

For Typescript, use NPM:

```bash
$ npm install -g @angular/cli
$ ng new my-angular-project
```

For Dart, use pub:

```bash
$ pub global activate angular_cli
$ ngdart new my_angular_project
```

Notice that for the Dart the project name uses underscores instead of hyphens. It is considered a convention to use underscores when naming a Dart package or project.

One other thing you might notice is that if you type `ng --help` vs `ngdart --help`, `ng` has a laundry list of things that it can do, whereas `ngdart` has three commands available: `help`, `generate`, and `new`.

When a project first gets created, you'll notice a lot of distinct differences between the TypeScript and the Dart projects. In TypeScript, you'll notice there is a `src/` folder and an `e2e/` folder, where your project source and end-to-end tests exist respectively. In Dart, you'll instead have a `web/` folder containing a small amount of HTML necessary for your project to run, and a `lib/` folder where all of your Dart source exists. For Dart projects, having all of the Dart source in the `lib/` folder is a common practice.

To start the project in TypeScript you can type:

```
$ ng serve
```

To start the project in Dart you can type:

```
$ pub serve
```

## Writing Code

I've pretty much made it through a lot of the Tour of Heroes tutorials in [TypeScript](https://github.com/jvarness/angular-hello) as well as in [Dart](https://github.com/jvarness/jvarness_hello_ngdart).

If you're looking through the two codebases, one of the things you might notice is that in TypeScript, Angular has support for [modules](https://github.com/jvarness/angular-hello/blob/master/src/app/app.module.ts), which helps drive a lot of dependency injection/inversion within an Angular project, and Dart does not. I personally didn't find this to be too cumbersome because a lot of DI principles can be achieved in Angular Dart by using directives and providers, but the modules in TypeScript do help keep your code concise, and it helps to separate responsibilities. You might notice that in the Dart codebase, my [`AppComponent`](https://github.com/jvarness/jvarness_hello_ngdart/blob/master/lib/app_component.dart) pretty much acts as the `AppModule` linked above. It has to handle route configuration and be aware of a couple of different providers and directives that it wouldn't otherwise need to be aware of.

Fortunately though, the Angular Dart team is working on getting [dependency injection added](https://github.com/dart-lang/angular/projects/4) to version 5.0 of Angular Dart. Again, a lack of DI support isn't convenient, but it doesn't stop you from writing code.

One thing you might notice as well is that the code between the two codebases has some striking similarities. Looking at just the `HeroDetailComponent` in each project, you might notice only a few differences between the [TypeScript](https://github.com/jvarness/angular-hello/blob/master/src/app/hero-detail.component.ts) version and the [Dart](https://github.com/jvarness/jvarness_hello_ngdart/blob/master/lib/src/hero_detail_component.dart) version. It's mostly differences in syntax at this point. 

For example, the constructor for this component in Dart looks like this:

```dart
HeroDetailComponent(this._heroService, this._routeParams, this._location);
```

Whereas in TypeScript it looks like:

```typescript
constructor(
    private heroService : HeroService,
    private route: ActivatedRoute,
    private location: Location
  ) {}

```

The main difference here is that TypeScript has keywords to tell you what is private. In Dart, if a member is prefixed with `_`, it's a private field.

Another thing you might notice is that with regard to methods, the TypeScript methods look pretty simple:

```typescript
  ngOnInit() : void {
    this.route.params
      .switchMap((params : Params) => this.heroService.getHero(+params['id']))
      .subscribe(hero => this.hero = hero);
  }

  goBack() : void {
    this.location.back();
  }

  saveHero(): void {
    this.heroService.updateHero(this.hero).then(() => this.goBack());
  }
``` 

Each method returns void. In Dart, since all of the methods within the component are asynchronous, Dart requires a little more syntax:

```dart
  @override
  Future<Null> ngOnInit() async {
    int id = int.parse(_routeParams.get('id') ?? '', onError: (_) => null);
    if (id != null) hero = await _heroService.getHero(id);
  }

  void goBack() => _location.back();

  Future<Null> save() async {
    await _heroService.update(hero);
    goBack();
  }
```

In Dart, when you have an asynchronous method defined, you cannot return `void`. Instead, the way that you would define a `void` async method in Dart is to make it return `Future<Null>`. This just tells consumers that while this method is an async method, it doesn't return anything.

## Application Look and Feel

I honestly couldn't tell you the difference between the two. Both applications work the same way.

In TypeScript:

![ts](https://thepracticaldev.s3.amazonaws.com/i/27wpbk6mpzuks244um6z.png)

In Dart:

![dart](https://thepracticaldev.s3.amazonaws.com/i/x6lvcrg8i5h55903rhd1.png)

The differences are shocking, I know.

The tooling within the Dart application made me forget all the cool tools that I had in TypeScript, with the exception that I wasn't able to put a delay in my services to mimic a real environment. Whenever I tried, I kept getting an exception and just gave up trying to make the app feel real.

_Edit 3: I actually got it to work eventually. The issue was that I wasn't using [`Future.delayed`](https://api.dartlang.org/stable/1.24.2/dart-async/Future/Future.delayed.html) properly. I was just putting my mock heroes list in as the second param rather than using a closure or function like they suggested in the [tutorial](https://webdev.dartlang.org/angular/tutorial/toh-pt4#appendix-take-it-slow)._

In both instances, I was able to change code, save, and reload the apps with my changes being reflected without having to start or stop the server. I felt like I had enough resources and libraries at my disposal to accomplish what I needed to (granted, it was a tutorial where all the libraries have already been developed, but ya know...).

## Overall

Honestly, I don't really see much of a difference face-up just doing the tutorials. I would say that if you have a lot of existing JS libraries that you like using and want to continue using for your Angular app, you should use TypeScript. If you want to learn something new and you don't like JavaScript, don't be afraid to write your app in Dart.

I hope that you enjoyed this overview of Angular Development using Dart and TypeScript. Have you made an app in Dart or TypeScript? What did you like about either? Let us know!