TypeScript

Enhancing JavaScript



Presented on 01/19/2016
by John Louros

back in 1994

NetScape 1.0

Internet Explorer 1.0

the origin of JavaScript

  • developed by Brendan Eich while working for Netscape
  • first version was completed in ten days in order to accommodate the Navigator 2.0 Beta release schedule
  • first release Netscape Navigator 2.0 (Sep/1995)
  • through to incorporate logic and action to HTML
  • main focus on simplicity, to be reachable for "non-experts"
  • Mocha -> LiveScript -> JavaScript

JavaScript != Java

standardization

  • submitted by Netscape in November 1996
  • first edition published in June 1997. ECMA-262 specification
  • 2nd edition published one year later
  • 3rd edition published in December 1999
  • 4th was never completed, 5th release in December of 2009
  • currently the standard is 6, released in June 2015
  • http://www.ecmascript.org/

evolution of the Web

boom of Web 2.0

what's good about JavaScript

  • enhancing web pages
  • data entry validation
  • single page applications
  • unburdening busy servers
  • it's everywhere
  • flexibility (small learning curve)
  • huge amount of libraries (options)

what's not so good about JavaScript

  • design errors
  • lousy and inconsistent implementations
  • bad books
  • challenging to manage on large projects
  • it's everywhere
  • flexibility (a lot of crappy code)
  • huge amount of libraries (lack of leadership)

the good parts

not pretty

not the most reliable community

way too many libraries

completely out of control

debugging JavaScript

it's here to stay

“any application that can be written in JavaScript, will eventually be written in JavaScript”
Jeff Atwood

“JavaScript is assembly language for the web”
Scott Hanselman

full stack development

productivity tools

installing TypeScript

compiling TypeScript

  • setup in Visual Studio project options
  • > tsc hello.ts
  • using tsconfig.json
  • * demo time *

using Types


// anybody can guess the value of 'msg'?
var msg = "The inning is: " + inning;
					

var inning = {
    label: "Fifth",
    count: 5
}
// still acceptable
var msg = "The inning is: " + inning;
					

"The inning is: [object Object]"

your code already has types


// JavaScript
var isBatting = false;
var inning = 6;
var teamName = "Red Sox";
var runsRecord = [1,6,3];
					


// TypeScript
var isBatting: boolean = false;
var inning: number = 6;
var teamName: string = "Red Sox";
var runsRecord: number[] = [1,6,3];
var anotherArray:Array<number> = [1,2,3];
					

JS types are just pretending to be any type


var isBatting: any = false;
var inning: any = 6;
var teamName: any = "Red Sox";
var runsRecord: any[] = [1,6,3];
					


var isBatting: boolean = <any> false;
var inning: number = <any> false;
var teamName: string = <any> false;
var runsRecord: number[] = <any> false;
					

example


var pitch = function(effect) {
    if(effect == "fastball")
        return 170.5;
    else
        return 123.9; 
}
					


var pitch = function(effect: string) : number {
    if(effect == "fastball")
        return 170.5;
    else
        return 123.9; 
}
					

implicit conversions are evil


// JavaScript WTF moment
(0 == []) == true
(!!0 == !![]) == false
0 + [] = "0"
					

arrow expressions


(x) => { return Math.sin(x); }
(x) =>  Math.sin(x);
x => { return Math.sin(x); }
x =>  Math.sin(x);
					


var messenger = {
    message: "Hello World",
    start: function() {
        setTimeout(() => { alert(this.message); }, 3000);
    }
};
					

classes


class Player {
    jerseyName: string;
    currentPosition: string;
    constructor(jerseyName: string, fielding: string) {
        this.jerseyName = jerseyName;
        this.currentPosition = fielding;
    }
    throw(ball) { console.log("throwing"); }
}
var jeffFrancis = new Player("FRANCIS", "P");
					

class Person {
    firstName: string;
    lastName: string;
}
class Player extends Person {
    jerseyName: string;
    currentPosition: string;
    constructor(jerseyName: string, fielding: string) {
        super();
        this.jerseyName = jerseyName;
        this.currentPosition = fielding;
    }
    throw(ball) { console.log("throwing"); }
}
    var jeffFrancis = new Player("FRANCIS", "P");
					

interfaces


// looks strange...
function printLabel(labelledObj: {label: string}) {
  console.log(labelledObj.label);
}
var myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
					


// much better
interface LabelledValue {
  label: string;
}
function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}
var myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
					

extend interface


interface Shape {
    color: string;
}
interface PenStroke {
    penWidth: number;
}
interface Square extends Shape, PenStroke {
    sideLength: number;
}
var square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;
					

modules


module Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
    var lettersRegexp = /^[A-Za-z]+$/;
    var numberRegexp = /^[0-9]+$/;
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return lettersRegexp.test(s);
        }
    }
    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
}
					

TypeScript definitions

Final demo

follow up

questions?

Achievement unlocked


... and thank you for your time!