TypeScript vs Dart from Tour of Heroes

This page describes how TypeScript differs from Dart. The idea is to use Angular’s Tour of Heroes tutorial example and compare language features.

Ch 2. Hero Editor


In TS you must say which object (“Component”) to import from the package. In Dart, it gets everything by default.


import { Component } from '@angular/core';


import 'package:angular2/core.dart';


In TS, no constructor is required and the object is instantiated from JSON object. In Dart, the shorthand constructor can be used.


export class Hero {
id: number;
name: string;
hero: Hero = {
  id: 1,
  name: 'Windstorm'


class Hero {
  final int id;
  String name;
  Hero(this.id, this.name);
Hero hero = new Hero(1, 'Windstorm');

Multi-line String

In TypeScript, multi-line string are enclosed with single back tick (`). In Dart, multi-line string are enclosed with three single quotes (”’).

Ch 3. Master/Detail

Constants/Final Variables

In TypeScript, it’s a typed JSON structure with const keyword.

const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }

In Dart, it’s a typed List with objects.

final List<Hero> mockHeroes = [
  new Hero(11, 'Mr. Nice'),
  new Hero(12, 'Narco'),
  new Hero(13, 'Bombasto'),
  new Hero(14, 'Celeritas'),
  new Hero(15, 'Magneta'),
  new Hero(16, 'RubberMan'),
  new Hero(17, 'Dynama'),
  new Hero(18, 'Dr IQ'),
  new Hero(19, 'Magma'),
  new Hero(20, 'Tornado')

Looping in template

Angular TypeScript and Dart look exactly the same!

<li *ngFor="let hero of heroes">
  <span class="badge">{{hero.id}}</span> {{hero.name}}

Constant Array/List

Dart uses const keyword in front of the list declaration. TypeScript doesn’t do that.

styles: const [
  .selected {
    background-color: #CFD8DC !important;
    color: white;

Angular Event Binding

TypeScript and Dart version are exactly the same here:

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
  <span class="badge">{{hero.id}}</span> {{hero.name}}

Event Handler

TypeScript definition looks quite normal:

onSelect(hero: Hero): void {
  this.selectedHero = hero;

Dart version is slightly cleaner as the return type of “void” isn’t required. Also, “this” keyword isn’t needed as it’s already in the object’s method, not constructor.

onSelect(Hero hero) {
  selectedHero = hero;
Posted in Programming | Leave a comment

HealthyWalk v1.4 Released

This version includes a new feature that allows users to submit feedbacks or report problems to us.  It also includes a fix to the display problem in Walk History screen.

Posted in General | Leave a comment

HealthyWalk v1.3 Released

This new version allows you to send walk history data via email. The data is saved as CSV file so you can open it with Excel and create your own charts.  Also fixed a bug about refreshing data on the Walk History screen.

Posted in General | Leave a comment

My Graphics 2.4 released

In this release, we have added a new “rainbow remix” color mode.  Select the rainbow box and the graphics will be drawn in many different colors.  What used to be infinite possibilities has now become infinity-squared.  Enjoy!



Posted in General | Leave a comment

HealthyWalk v1.2.1 Released

This new version brought a couple of exciting changes –

1. Health-related information about walking

2. Brand new Settings screen

3. Several bug fixes

Posted in General | Leave a comment

My Graphics 2.3.2 released

This release improves application stability since iOS 7 upgrade.

Posted in General | Leave a comment

HealthyWalk v1.1 released

This release contains several bug fixes.  The app now displays an error if the device is not capable of getting activity data.

Posted in General | Leave a comment

HealthyWalk v1.0 released!

== Free for a limited time! No ads! ==== This app is compatible with iPhone 5S only. ==

It automatically tracks your walking activities every day using the built-in motion sensor in your iPhone 5S. No need to buy any fitness bands. This app just fully unleashes the power of your latest iPhone.

Features include:
– Daily/weekly walking history
– Last 7 day chart
– Personal goal
– Progress reminder
– Up-to-date with news about healthy walking
– Metrics or US Customary unit

Posted in General | Leave a comment

My Graphics v2.3.1 released

This version has now been tested and released for iOS 7.  Enjoy!

Posted in General | Leave a comment

My Graphics v2.3 released

This new version includes a much faster rendering engine especially when it comes to the more complicated spiral patterns.  Enjoy!

Posted in General | Leave a comment