TypeScript

Basic Types

Boolean

Number

String

Array

Enum

Any

Void

Basic Types(1)

TypeScriptJavaScript

Boolean var isDone: boolean = false; var isDone = false;

Number var height: number = 6; var height = 6;

String var name: string = "bob"; var name = "bob";name = 'smith'; name = 'smith';

Array type of the elements followed by '[]'

var list:number[] = [1, 2, 3]; var list = [1, 2, 3];

Array<elemType>

var list:Array<number> = [1, 2, 3]; *JS With Type Annotation

Basic Types(2)

Enum 1 enum Color {Red, Green, Blue};var c: Color = Color.Green;

Enum 2 enum Color {Red = 1, Green, Blue};var c: Color = Color.Green;

Enum 3 enum Color {Red = 1, Green = 2, Blue = 4};var c: Color = Color.Green;

from a numeric value to the name of that value

enum Color {Red = 1, Green, Blue};var colorName: string = Color[2];

Basic Types(3)

Enum var Color;enum Color {Red, Green, Blue}; (function (Color) {

Color[Color[“Red”] = 0] = “Red”;Color[Color[“Green”] = 1] = “Green”;Color[Color[“Blue”] = 2] = “Blue”;})(Color || (Color = {}));1. Color[Color[“Red”] = 0] =

“Red”;

Color[“Red”] = 0;Color[0] = “Red”;

2. immediately executing function(function (Color) {...})();

var a = function(Color){...};a(Color || (Color = {}));3. var Color = {};

(function (Color) {...})(Color);

Basic Types(4)

Any Allow you to gradually opt-in and opt-out of type-checking during compilation.

var notSure: any = 4;notSure = "maybe a string instead";notSure = false; // okay, definitely a boolean

var list:any[] = [1, true, "free"];list[1] = 100;

Void function warnUser(): void { alert("This is my warning message");

}

Interfaces(1)One of TypeScript's core principles is that type-checking focuses on the 'shape' that values have. This is

sometimes called "duck typing" or "structural subtyping".

Start With...

using an interface

function printLabel(labelledObj: {label: string}) { console.log(labelledObj.label);}

var myObj = {size: 10, label: "Size 10 Object"};printLabel(myObj);

interface LabelledValue { label: string;}function printLabel(labelledObj: LabelledValue) {console.log(labelledObj.label);}

(JS) function printLabel(labelledObj) { console.log(labelledObj.label);}

Interfaces(2)

Optional Properties

function createSquare(config: SquareConfig): {color: string; area: number} { var newSquare = {color: "white", area: 100}; if (config.color) { newSquare.color = config.color; } if (config.width) { newSquare.area = config.width * config.width; } return newSquare;}

var mySquare = createSquare({color: "black"});

interface SquareConfig { color?: string; width?: number;}

Interfaces(3)

Optional Properties(JS)

function createSquare(config: SquareConfig): {color: string; area: number} { var newSquare = {color: "white", area: 100}; if (config.color) { newSquare.color = config.color; } if (config.width) { newSquare.area = config.width * config.width; } return newSquare;}

var mySquare = createSquare({color: "black"});

interface SquareConfig { color?: string; width?: number;}

Interfaces(3)

Function Types

var mySearch: SearchFunc;

mySearch = function(source: string, subString: string) { var result = source.search(subString); if (result == -1) { return false; } else { return true; }}

//mySearch = function(src: string, sub: string) {// var result = src.search(sub);

interface SearchFunc { (source: string, subString: string): boolean;}

Interfaces(4)

Array Types

Dictionary

interface StringArray { [index: number]: string;}

var myArray: StringArray;myArray = ["Bob", "Fred"];

interface Dictionary { [index: string]: string; length: number;

// error, the type of 'length' is not a subtype of the indexer owner: string;

}

var dic: Dictionary;dic.length: return a number=> dic[“length”]

Interfaces(5)

Class Types - Implementing an interface

interface ClockInterface { currentTime: Date;}

class Clock implements ClockInterface { currentTime: Date; constructor(h: number, m: number) { }}

var Clock = (function() { function Clock(h, m) { } return Clock;})();

var a = function Clock(h, m) { };var b = function() { return a; };var Clock = b();

Interfaces(6)

Class Types - Implementing an interface

interface ClockInterface { currentTime: Date; setTime(d: Date);}

class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { }}

var Clock = (function() { function Clock(h, m) { } Clock.prototype.setTime = function(d) { this.currentTime = d; }; return Clock;})();

Interfaces(7)

Class Types - Difference between static/instance side of class

You may notice that if you create an interface with a construct signature and try to create a class that implements this interface you get an error:This is because when a class implements an interface, only the instance side of the class is checked. Since the constructor sits in the static side, it is not included in this check.Instead, you would need to work with the 'static' side of the class directly.

interface ClockInterface { new (hour: number, minute: number);}

//Class ‘Clock’ incorrectly implements interface ‘ClockInterface’class Clock implements ClockInterface { currentTime: Date; constructor(h: number, m: number) { }}

interface ClockStatic { new (hour: number, minute: number);}

class Clock { currentTime: Date; constructor(h: number, m: number) { }}

var cs: ClockStatic = Clock;var newClock = new cs(7, 30);

Interfaces(8)

Extending Interfaces

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

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;var square = {};

square.color = "blue";square.sideLength = 10;square.penWidth = 5.0;

Interfaces(8)

Class Types - Hybrid Typesinterface Counter { (start: number): string; interval: number; reset(): void;}var c: Counter; //undefinedc(10);c.reset();c.interval = 5.0;

Classes(1)

Classes

class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; }}var greeter = new Greeter("world");

var Greeter = (function() { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function() { return "Hello, " + this.greeting; }}var greeter = new Greeter("world");

Classes(2)

Inheritance

var sam = new Snake("Sammy");var tom: Animal = new Horse("Tommy");

sam.move();tom.move(34);

class Animal { name:string; constructor(theName: string) { this.name = theName; } move(meters: number = 0) { alert(this.name + " moved " + meters + "m."); }}class Snake extends Animal {

constructor(name: string) { super(name); } move(meters = 5) { alert("Slithering..."); super.move(meters); }}class Horse extends Animal { constructor(name: string) { super(name); } move(meters = 45) { alert("Galloping..."); super.move(meters); }}

Classes(3)

Inheritance(JS) var Animal = (function() { function Animal(theName) { this.name = theName; } Amimal.prototype.move = function(meters) { if (meters === void 0) { meters = 0; } alert(this.name + " moved " + meters + "m."); }; return Animal;})();

var Snake = (function(_supper) { __extends(Snake, _super); function Snake(name) { _super.call(this, name); } Amimal.prototype.move = function(meters) { if (meters === void 0) { meters = 5; } alert("Slithering...”); _super.prototype.move.call(this, meters); }; return Snake;})(Animal);

Classes(4)

Private/Public modifiers - Public by default

class Animal { private name:string; constructor(theName: string) { this.name = theName; } move(meters: number) { alert(this.name + " moved " + meters + "m."); }}

Classes(5)

Private/Public modifiers - Understanding privateFor two types to be considered compatible, if one of them has a private member, then the other must have a private member that originated in the same declaration.

class Animal { private name:string; constructor(theName: string) { this.name = theName; }}class Rhino extends Animal {

constructor() { super("Rhino"); }}

class Employee { private name:string; constructor(theName: string) { this.name = theName; }}

var animal = new Animal("Goat");var rhino = new Rhino();var employee = new Employee("Bob");

animal = rhino;animal = employee;

//error: Animal and Employee are not compatible

Classes(6)

Private/Public modifiers - Parameter propertiesUsing 'private' in this way creates and initializes a private member, and similarly for 'public'.

class Animal { constructor(private name: string) { } move(meters: number) { alert(this.name + " moved " + meters + "m."); }}

Classes(7)

Without Accessors(get/set)

class Employee { fullName: string;}

var employee = new Employee();employee.fullName = "Bob Smith";if (employee.fullName) { alert(employee.fullName);}

var Employee = (function () { function Employee() { } return Employee;})();

var employee = new Employee();employee.fullName = "Bob Smith";if (employee.fullName) { alert(employee.fullName);}

Classes(8)

With Accessors(get/set)

var passcode = "passcode";class Employee { private _fullName: string; get fullName(): string { return this._fullName; } set fullName(newName: string) { if (passcode && passcode == "passcode") { this._fullName = newName; } else { alert("Error!"); } }}var employee = new Employee();employee.fullName = "Bob Smith";if (employee.fullName) { alert(employee.fullName);}

var passcode = "passcode";var Employee = (function () { function Employee() { }Object.defineProperty(Employee.prototype, "fullName", { get: function () { return this._fullName; }, set: function (newName) { if (passcode && passcode == "passcode") { this._fullName = newName; } else { alert("Error!"); } }, enumerable: true, configurable: true }); return Employee;})();

Classes(9)

Static Properties

class Grid { static origin = {x: 0, y: 0}; calculateDistanceFromOrigin(point: {x: number; y: number;}) { var xDist = (point.x - Grid.origin.x); var yDist = (point.y - Grid.origin.y); return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale; } constructor (public scale: number) { }}

var Grid = (function () { function Grid(scale) { this.scale = scale; } Grid.prototype.calculateDistanceFromOrigin = function (point) { var xDist = (point.x - Grid.origin.x); var yDist = (point.y - Grid.origin.y); return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale; }; Grid.origin = { x: 0, y: 0 }; return Grid;})();

Classes(10)

Advanced Techniques - Constructor functions

class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; }}var greeter: Greeter;greeter = new Greeter("world");alert(greeter.greet());

var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter;})();var greeter;greeter = new Greeter("world");alert(greeter.greet());

Classes(11)

Advanced Techniques - Constructor functions

class Greeter { static standardGreeting = "Hello, there"; greeting: string; greet() { if (this.greeting) { return "Hello, " + this.greeting; } else { return Greeter.standardGreeting; } }}

var greeter2:Greeter = new greeterMaker();alert(greeter2.greet());

var greeterMaker: typeof Greeter = Greeter;greeterMaker.standardGreeting = "Hey there!";

var greeter1: Greeter;greeter1 = new Greeter();alert(greeter1.greet());

Classes(12)

Advanced Techniques - Using a class as an interface

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

interface Point3d extends Point { z: number;}

var point3d: Point3d = {x: 1, y: 2, z: 3};

End