The Case for TypeScript

Companion slides for the TypeScript Angular 1.X Demo Project
or an alternate TypeScript React Demo Project

Created by Daniel Abraham

TypeScript is Familiar

If you renamed index.js to index.ts, then it should transpile right back into index.js, provided it's error free.

That's because TypeScript is a so-called superset of JavaScript, intended to extend the language, rather than replace it.

More than a Transpiler

TypeScript has bundled services, designed to run in the background of your favorite IDE, thereby enhancing productivity.

TypeScript driven IDE's feature enhancements such as intellisense, validation, refactoring, code completion, JsDoc comments, and early adoption of language improvements.

TypeScript is Flexible

TypeScript uses Structural Typing, also know as Duck Typing, rather than Strong Typing ( if it looks like a duck, walks like… )

interface IHasLabel {
  label: string;
}

function sayLabel(isLabeled: IHasLabel) {
  alert(isLabeled.label);
}

// This pojo is a valid type of IHasLabel, because of it's structure
var daffyDuck = {
  label: "Daffy Duck",
  IQ: NaN
};

sayLabel(daffyDuck);
        

TypeScript can Scale

TypeScript addresses some of the biggest challenges in developing massive JavaScript projects, by supporting type interfaces that describe an application's complex data structures.

// ITree, with property of IBranch      // IBranch, with property of IGoesOnForever
interface ITree {                       interface IBranch {
  treeId: string;                         /** partial url */
  loaded: boolean;                        stub: string;
  nodes: any[];                           route: string;
  root: {                                 type: string;
    branch: IBranch;                      name: string;
    label: string;                        /** service is marked optional (?) */
    data: any;                            service?: IGoesOnForever;
  }                                     }
}
        

TypeScript has Generics

The simple cache service shown here, has the addition of a generic type argument to help define the promised return data.

// Simple low level cache used for fetching data
export class CacheService {
  static cache = {};
  constructor(private $http, private $q) { }

  public get<T>(path: string, force?: boolean): angular.IPromise<T> {
    var deferred = this.$q.defer();

    // if data is cached, promise is resolved now
    if (!force && CacheService.cache.hasOwnProperty(path)) {
      deferred.resolve(CacheService.cache[path]);
      return deferred.promise;
    };
    ...
        

Why Use TypeScript?

Calling the aformentioned cache service with a well known type, will describe the data returned and conserve cognitive resources.

// Fetching data of type ITree from the cache service
export class CacheConsumer {
    constructor(private cacheService: CacheService) {
        var dataPromise = cacheService.get<ITree>("/data/tree");

        dataPromise.then(function (tree) {
            console.log(tree.root.branch.stub);
        })
    }
}



 
        

TypeScript is Popular

TypeScript's declaration syntax is being used to describe thousands of JavaScript libraries that did not originate from TypeScript.

This very popular GitHub project has over 1700 contributors and averages about 100 commits per week.

http://definitelytyped.org/

TypeScript is Relevant

The TypeScript compiler is completely written in TypeScript, and has been open source from day 1 (early 2012).

It's community driven, actively supported, and backed by Microsoft, along with their top language experts.

https://github.com/Microsoft/TypeScript

TypeScript has Tooling

Another amazing open source project originating from Microsoft, is their Visual Studio Code IDE (VSCode for short).

It's based on the GitHub Electron Shell, the basis for their Atom Editor, so it runs on all 3 major platforms.

https://code.visualstudio.com/
https://github.com/Microsoft/vscode

The End

This introduction is over, but the demo project below can be used to play with some of the concepts presented here.

Just make sure your IDE supports TypeScript enhancements, or simply download VSCode if in doubt.

https://github.com/djabraham/ts-ng
https://github.com/djabraham/ts-react

https://code.visualstudio.com/