What is it?

• Introduced in October 2012 by Ander’s Hejlsberg
• Free & Open source language
• It is a “superset of JavaScript”
• Build Plugins for maven, gradle, grunt and gulp
• Rapidly becoming an Industry Standard (Angular)

What is a superset?

It's ES2015!

• Arrow Functions
• Spread
• Block scoping (let & const)
• Classes with constructors, get/set
• Enhanced Object Literals
• Template Strings
• Destructuring
• Iterables and Iterators

• Types
• Decorators (from ES7)
• Generics
• Enums!
• Class Extensions
  • ​Access Modifiers
    • Interfaces
• Namespaces

Plus

Why use TypeScript?

• It's JavaScript, but better...with intellisense and API help
• Built for JavaScript at Scale
• Smaller Transpiled output than ES2015's
• Help's Identify Bugs during design... instead of after deployment
• Easy to configure
• Better overall code readability in large codebases
• Ease of refactoring
• Use new ES6 features in older browsers
• IntelliSense auto suggest in code editors

Design Time Analysis

• Finding bugs earlier in your development process
• Fix a bug in your logic at design time rather than fixing the bug at run time.
  • A compile-time bug will fail every time you run the compiler, but a runtime bug can hide until the exact scenario that triggers it is manually stumbled upon.
• Runtime bugs can slip under a crack in your logic and lurk there (sometimes for months) until discovered.

TS is JavaScript at Scale

• Checks code on the fly at design time
  • Compatible with most editors, via plugins to:
    • Provides custom code completion
    • Error identification via tooltips (with plugin support)
  • Allows you to catch bugs prior to JS build
• Transpiles to ES5
  • Plugs right in where babel is used to transpile ES2015
  • tsc watcher for compiling on save
    • ​You can see the ES5 output live (split-plane)
  • ES5 output is ~HALF the size of Babel’s

TypeScript Transpilation

• Why is it smaller?
  • No type checking required in our code
  • No type checking added into the output

// ES2015
doSomething (smidge) {
  if (smidge instanceOf repo
    && smidge.myProp) {
    let a = smidge.myProp;
  }
  //...
}

// Transpiled ES5
function doSomething (smidge) {
  if (smidge instanceOf repo
    && smidge.myProp) {
    var a = smidge.myProp;
  }
  //...
}

// TypeScript
doSomething (smidge:repo) {
  let a = smidge.myProp;
  ...
}

// Transpiled ES5
function doSomething (smidge) {
  var a = smidge.myProp;
  ...
}

Easy to configure

tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,      // to allow untyped vars 
        "removeComments": true,   
        "preserveConstEnums": true,
        "out": "/build/app.js",
        "sourceMap": true
    }
}

TypeScript Types

var num: number = 123;
function identity(num: number): number {
  return num;
}
identity('string'); // error!


var myNumbers : number[] = [170, 2.6, 2245, 3032, 400];

Void & Any

function initSomething() : void {
    doSomeStuff();
  }
var pointless = initSomething(); // Compiler Error

// if you absolutely have to (don't do it young Jedi!)
var foo : any;
foo = 'Hello!';
foo = true;
foo = 42;

Class Extensions

• Access Modifiers
• Interfaces
• Namespaces

class Person {
    constructor(name) {
        this.name = name;
    }
    greet() {
        return 'My name is ' + this.name;
    }
}

var annabelle = new Person('Annabelle');

console.log(annabelle.greet());
// > My name is Annabelle

Class

ES6

TypeScript

Access Modifiers

// JavaScript Revealing Module Pattern

class EpicRide () extends Chevrolet {
  let myVector = { };
  vectorProperty(vectorMovement) {};

  return {
    direction: myVector;
    drive() {};
  }
}

// TypeScript

class EpicRide () extends Chevrolet {
  private myVector: Vector = { }
  private move(movement: Vector): Void {};

  public direction: myVector;
  public drive() {};
}

Interfaces

interface Point {
  x: number;
  y: number;
}

class Line {
  constructor(start: Point, end: Point) { }
  length(): Number { }
}

var start: Point;
var end: Point;
start.[x, y] = { 13, 3 };
start.y = 3;
end.x = 26
end.y = 6;

var myLine = new Line(start, end);
var myLineLength: Number = myLine.length(); // 13.34

Sandbox

Namespaces

• aka Internal Modules
• Reduce global footprint
• Open to be extended
• No Helper libraries required

// SNI.Utilities
// utilities.ts

import truncate from 'truncate';
import moreText from 'moreText';

namespace Strings {
  export Truncate = truncate;
  export MoreText from moreText;
}

export Config = function(config: object) {
  // Strings default configs are set here.
  truncate.config(config.truncate);
  moreText.config(config.moreText);
  //... additional utility configs here
}

Namespaces

// SNI
// sni.ts

import ads from 'ads'; // from ads team.
import analytics from 'analytics'; // from analytics team.
import video from 'video'; // from video team.
import utilities from 'utilities';

export Ads = ads;
export Analytics = analytics;
export Video = video;
export Utilities = utilities;

export Config = function (config: object) {
  // Default configs are set here.
  utilities.config(config.utilities);
  analytics.config(config.analytics);
  //... additional configs here
}

Namespaces

// app.ts

import SNI from 'sni';
import { config } from 'package.json';

// config all SNI namespace scripts
SNI.Config(config);

// Specific commands for any items in the SNI namespace
SNI.Ads.Start();
SNI.Analytics.Engage();

// Using the namespace truncate utility
let outputString = SNI.Utilities.Strings.Truncate(someValue);