Advanced topics in TypeScript

© 1996-2017 All Rights Reserved.
Advanced Topics
in TypeScript
Haim Michael
October 17st
, 2017
All logos, trade marks and brand names used in this presentation belong
to the respective owners.
lifemichael
You can watch the video at
https://youtu.be/lIbConUCkRs
TypeScript

Haim Michael Introduction
● Snowboarding. Learning. Coding. Teaching. More
than 16 years of Practical Experience.
lifemichael

Haim Michael Introduction
● Professional Certifications
Zend Certified Engineer in PHP
Certified Java Professional
Certified Java EE Web Component Developer
OMG Certified UML Professional
● MBA (cum laude) from Tel-Aviv University
Information Systems Management
lifemichael

Introduction
 “TypeScript is a typed superset of JavaScript
that compiles to plain JavaScript.”
www.typescriptlang.org
lifemichael

Fast Evolvement
 TypeScript evolves probably faster than any
other programming language.
12/10/2017 – 2.6rc
31/8/2017 – 2.5
27/6/2017 – 2.4
27/4/2017 – 2.3
22/2/2017 – 2.2
...
lifemichael

The // @ts-ignore Comment
 Using this comment (available as of 2.6) we can
suppress error messages.
lifemichael
if (false) {
//@ts-ignore
console.log("hello");
}

Localized Diagnostic Messages
 As of 2.6, we can add the --locale flag for
getting localized messages.
lifemichael
if (false) {
console.log("hello");
}

Optional catch clause Variable
 As of 2.5, we can avoid specifying a variable in
the catch clause.
lifemichael
let input = "...";
try {
JSON.parse(input);
}
catch {
console.log("invalid json:nn" +
input)
}

Anonymous Class Type
 As of 1.6 we can define a class without
specifying its name. We can write a class
expression, which is a class definition without
specifying its name.
 It is very similar to the possibility to define
anonymous function.
lifemichael

Anonymous Class Type
lifemichael
let Point = class {
Constructor(
public x: number,
public y: number) { }
public length() {
return Math.sqrt(
this.x * this.x + this.y * this.y);
}
};
var p = new Point(3, 4);
console.log(p.length());

Type Alias
 As of 1.4 we can define custom alias for types
that were already defined.
lifemichael
type Calc = ((a:number,b:number)=>number)
var f1:Calc = function(num1,num2){
return num1+num2;
}
var f2:Calc = function(num1,num2){
return num1*num2;
}
var temp = f1(45,5)
console.log(temp)

Type Alias
 As of 1.6 the type alias can be generic.
lifemichael
type Create<T> = (() => T);
var f3:Create<number> = function(){
return 12;
};
var f4:Create<string> = function(){
return "abc";
}
console.log(f4());

Union Types
 As of 1.4 we can combine multiple types into
one.
lifemichael
let destination:string|string[];
destination = "tel-aviv";
destination = ["tel-aviv","haifa","jerusalem"]

Union Types
lifemichael
interface IBook {
id: string;
pages: number;
}
interface INewspaper {
companyId: string;
}
type IPublication = IBook | INewspaper;
let ob: IPublication = {
id: 'ID3241',
pages: 21
};

Union Types
 We can use the same syntax for specifying that
the returned value of a specific function is either
of the first type or the second (or the third.. etc).
Doing so is known as types guarding.
lifemichael

Union Types
lifemichael
class Student{}
class Teacher{}
function getResponsible(n: number):
Student | Teacher {
if (n === 1) {
return new Teacher();
} else {
return new Student();
}
}

Accessors
 TypeScript allows us to define accessors, also
known as properties, in our code.
lifemichael

Accessors
lifemichael
class Rectangle
{
private _width:number;
private _height:number;
constructor(width: number, height: number) {
this._width = width;
this._height = height;
}
get width(): number {
return this._width;
}
set width(value: number) {
if(value>0) {
this._width = value;
}
}

get height(): number {
return this._height;
}
set height(value: number) {
this._height = value;
}
public area():number {
return this.height*this.width;
}
}
var rec:Rectangle = new Rectangle(4,5);
rec.width = 3;
document.write("area is "+rec.area());
Accessors
lifemichael

Optional Parameters
 Unlike JavaScript, when calling a function
passing over arguments the number of
arguments must match the number of the
parameters. If the number of arguments doesn't
match the number of parameters then we shall
get a compilation error.
lifemichael

Optional Parameters
 Adding the question mark to the name of a
parameter will turn that parameter into an
optional one.
 The parameters that are not optional are also
known as the required parameters. The required
parameters cannot come after the optional
ones.
lifemichael

Optional Parameters
 The optional parameters should be after any
other required one. They should be the last
ones.
lifemichael

Optional Parameters
lifemichael
function sum(a,b,c?)
{
var total = 0;
if(c!==undefined)
{
total += c;
}
total += (a+b);
return total;
}
var temp = sum(7,8);
document.write("temp="+temp);

Default Parameters
 When defining a function we can specify default
values for any of its parameters. Doing so, if an
argument is not passed over to the parameter
then the default value we specified will be set
instead.
 The default value we assign a parameter can be
the value of expression evaluated during
runtime.
lifemichael

Default Parameters
lifemichael
function dosomething(a,b,step=((b-a)%5))
{
var i=a;
while(a<=b)
{
document.write("<br/>"+a);
a+=step;
}
}
dosomething(1,20);

Rest Parameters
 The rest parameter is a parameter that when we
call the function we pass over zero or more
arguments of the specified type to it.
 Each function can include one rest parameter at
the most. We cannot have more than that.
 The type of the rest parameter must be the
array type.
lifemichael

Rest Parameters
 In order to define a rest parameter we just need
to prefix the parameter with three periods.
lifemichael
function sum(...numbers: number[]):number
{
var total:number = 0;
for(var i=0; i<numbers.length; i++)
{
total += numbers[i];
}
return total;
}
document.write("<br/>"+sum(2,5,3));

Generics Constraint
 When using the parameter type we can specify
constraints in order to limit the range of possible
types.
lifemichael
function calculateAverage<T extends Student>
(students:Array<T>):number
{
var sum:number = 0;
for(var i:number=0; i<students.length; i++)
{
sum += students[i].average();
}
var result = sum / students.length;
return result;
}

Generics Constraint
lifemichael
class Student
{
private _average:number;
private _id:number;
private _name:string;
constructor(id:number,name:string,average:number)
{
this._average = average;
this._id = id;
this._name = name;
}
average():number
{
return this._average;
}
}

Describing Function Type
 We can use an interface for describing a
function type.
lifemichael
interface CalculateFunction
{
(a:number,b:number):number;
}

Describing Function Type
lifemichael
function sum(a,b)
{
return a+b;
}
function multiply(a,b)
{
return a*b;
}
var f:CalculateFunction;
f=sum;
document.write("<br/>result is "+f(3,4));
f=multiply;
document.write("<br/>result is "+f(3,4));

Describing Array Type
 We can use an interface for describing an array
type.
lifemichael
interface RectanglesArray
{
[index: number]: Rectangle;
length:number;
}

lifemichael
class Rectangle
{
width:number;
height:number;
constructor(w:number, h:number)
{
this.width = w;
this.height = h;
}
area():number
{
return this.width*this.height;
}
}

lifemichael
function calc(vec:RectanglesArray):number
{
var sum:number = 0;
for (var i = 0; i < vec.length; i++)
{
sum+= vec[i].area();
}
return sum;
}
var vec:RectanglesArray;
vec = [new Rectangle(3,4), new
Rectangle(5,4), new
Rectangle(4,2)];
document.write("total areas is "+calc(vec));

Structural Typing
 TypeScript is a structural type programming
language. It isn't a nominative one.
 We can treat an object as if it is of another type
even if it doesn't officially inherit it. It is a
question of whether the structure match... or
not.
lifemichael
f

Structural Typing
lifemichael
class Person
{
id:number;
name:string;
//details()
//{
//}
}
class Manager
{
id:number;
name:string;
salary:number;
}
var ob:Person = new Manager();

lifemichael
Questions & Answers
If you enjoyed my lecture please leave me a comment
at http://speakerpedia.com/speakers/life-michael.
Thanks for your time!
Haim.

Advanced topics in TypeScript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Advanced topics in TypeScript

Similar to Advanced topics in TypeScript (20)

More from Haim Michael

More from Haim Michael (20)

Recently uploaded

Recently uploaded (20)

Advanced topics in TypeScript