TypeScript learning

1. TypeScript

2. Basic Types
Boolean
Number
String
Array
Enum
Any
Void

3. Basic Types(1)
TypeScript
JavaScript
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

4. 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];

5. 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);

6. 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");
}

7. 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);
}

8. 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;
}

9. 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;
}

10. 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;
}

11. 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”]

12. 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();

13. 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;
})();

14. 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);

15. 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;

16. Interfaces(8)
Class Types - Hybrid Types
interface Counter {
(start: number): string;
interval: number;
reset(): void;
}
var c: Counter; //undefined
c(10);
c.reset();
c.interval = 5.0;

17. 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");

18. 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);
}
}

19. 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);

20. 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.");
}
}

21. Classes(5)
Private/Public modifiers - Understanding private
For 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

22. Classes(6)
Private/Public modifiers - Parameter properties
Using '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.");
}
}

23. 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);
}

24. 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;
})();

25. 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;
})();

26. 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());

27. 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());

28. 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};

29. End