The slides I was using when delivering a one day seminar for learning the TypeScript programming language. The seminar was delivered as part of the Expert Days 4 days conference that took place in 12/2015 in Israel. More information about the Front End Development course I deliver can be found at fed.course.lifemichael.com

1. TypeScript Seminar
www.lifemichael.com
All logos, trademarks and brand names used in this presentation belong to their respective owners. Haim Michael and Life
Michael are independent and not related, affiliated or connected with any of these respective owners or their technologies.
LifeMichael.com

2. © 2015 Haim Michael 20150807
Life Michael Introduction
 Snowboarding. Learning. Coding. Teaching. More than 16
years of Practical Experience.
LifeMichael.com

3. © 2015 Haim Michael 20150807
Life 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.com

4. © 2015 Haim Michael 20150807
Life Michael Introduction
 Huge Professional Practical Experience in Software
Development both for the Server Side (Java EE) and for
mobile telephones.
http://blog.lifemichael.com
Mainly During The Years 2001-2007
LifeMichael.com

5. © 2015 Haim Michael 20150807
Life Michael Introduction
 Delivering Academic Advanced Courses in Computer
Science.
 Delivering Professional Courses in Software Development
Companies World Wide.
LifeMichael.com

6. © 2015 Haim Michael 20150807
Life Michael Introduction
 Developing One of The Biggest Free Online Courses
Website for Software Development.
http://abelski.lifemichael.com
* More Than 200 Courses
* Thousands of Video Clips
* Thousands of Assignments
* Continuously Developed
LifeMichael.com

7. © 2015 Haim Michael 20150807
Life Michael Introduction
 Developing Online Free Tutorials + Videos in Hebrew for
Various Programming Languages.
http://books.lifemichael.com
LifeMichael.com

8. © 2015 Haim Michael 20150807
Life Michael Introduction
 Delivering Advanced Professional Courses
in Cooperation with Holon Institute of Technology.
28 Weeks. Attractive cost of 6800 shekels.
http://hit.lifemichael.com
http://tinyurl.com/lifemichaelhitcourses
HTML5 Cross Platform Mobile Applications Starts on February 25th
, 2016
Android Java Applications Development Starts on March 3rd
, 2016
Software Engineering in PHP Starts on June 15th
, 2016
LifeMichael.com

9. © 2015 Haim Michael 20150807
Life Michael Introduction
 Popular Channel of Professional Video Clips on YouTube.
http://www.youtube.com/lifemichael
* More Than 3 Million Views
* More Than 3000 Video Clips
* More Than 30 Playlists
* More Than 3000 Subscribers
LifeMichael.com

10. © 2015 Haim Michael 20150807
Life Michael Introduction
 Maintaining Free Professional Communities on Facebook,
Linkedin and Google+ for Continuous Professional Update!
http://www.lifemichael.com/en/communities
LifeMichael.com

11. © 2015 Haim Michael 20150807
Life Michael Introduction
 I Enjoy Sharing My Knowledge and Experience. Teaching
is my Passion.
http://speakerpedia.com/speakers/life-michael
http://lanyrd.com/profile/lifemichael
Speakerpedia
LifeMichael.com

12. © 2015 Haim Michael 20150807
Introduction
LifeMichael.com

13. © 2015 Haim Michael 20150807
History
 The TypeScript programming language was developed by
Microsoft. It is an open source programming language.
 The code we write in TypeScript is compiled into
JavaScript, so we can basically use TypeScript wherever
we use JavaScript.
http://www.typescriptlang.org
LifeMichael.com

14. © 2015 Haim Michael 20150807
Superset of JavaScript
 TypeScript is a superset of JavaScript. It includes the
entire JavaScript programming language together with
additional capabilities.
 In general, nearly every code we can write in JavaScript
can be included in code we write in TypeScript.
LifeMichael.com

15. © 2015 Haim Michael 20150807
Typed Superset
 TypeScript adds the capability to code with types.
TypeScript allows us to define new classes and new
interfaces.
 TypeScript allows us to specify the type of each and
every variable and is even capable of interfering the type
by itself.
 TypeScript allows us to use JavaScript as if it was a
strictly type programming language.
LifeMichael.com

16. © 2015 Haim Michael 20150807
Large Applications
 TypeScript provides us with the required capabilities in
order to develop large scale applications using
JavaScript.
LifeMichael.com

17. © 2015 Haim Michael 20150807
Clean JavaScript
 Compiling TypeScript into JavaScript we get a clean
simple ES3 compliant code we can run in any web
browser, in any node.js environment or in any other ES3
compliant environment.
LifeMichael.com

18. © 2015 Haim Michael 20150807
Jump Start
LifeMichael.com

19. © 2015 Haim Michael 20150807
Available IDEs
 The recommended IDEs include PHPStorm, WebStorm
and Visual Studio.
 The WebStorm IDE was developed specifically for
developing the client side (FED). The PHPStorm IDE
was developed specifically for PHP. The PHPStorm IDE
includes the WebStorm IDE. Therefore, the same
guidelines that apply for WebStorm should apply for
PHPStorm.
LifeMichael.com

20. © 2015 Haim Michael 20150807
Enabling the TypeScript Compiler
 In order to develop code in TypeScript using the
PHPStorm or the WebStorm IDE we should first access
the Default Preferences setting window, enable the
TypeSciprt compiler, specifying the node interpreter and
specify the main file we want to compile.
LifeMichael.com

21. © 2015 Haim Michael 20150807
Enabling the TypeScript Compiler
LifeMichael.com

22. © 2015 Haim Michael 20150807
The TypeScript File
 We write our code in TypeScript in a file with the 'ts'
extension.
LifeMichael.com

23. © 2015 Haim Michael 20150807
The TypeScript File
LifeMichael.com

24. © 2015 Haim Michael 20150807
The TypeScript File
LifeMichael.com

25. © 2015 Haim Michael 20150807
The HTML Document
 We should develop HTML5 document that includes a
script element that refers a file with the 'js' extension. Its
name should be the same as the name of the TypeScript
file. The only difference should be the extension. The
extension should be 'js' instead of 'ts'.
LifeMichael.com

26. © 2015 Haim Michael 20150807
The HTML Document
LifeMichael.com

27. © 2015 Haim Michael 20150807
Changes in Code
 We can mark the track changes checkbox and changes
in our code will immediately initiate the compiler.
LifeMichael.com

28. © 2015 Haim Michael 20150807
Code Sample
class Rectangle
{
Constructor( private width:number,
private height:number) {}
area()
{
return this.width*this.height;
}
}
var ob = new Rectangle(3,4);
document.write("area is "+ob.area());
LifeMichael.com

29. © 2015 Haim Michael 20150807
Code Sample
LifeMichael.com

30. © 2015 Haim Michael 20150807
Visual Studio
 Visual Studio support for TypeScript is immediate . We
don't need to set or configure anything.
LifeMichael.com

31. © 2015 Haim Michael 20150807
Visual Studio
LifeMichael.com

32. © 2015 Haim Michael 20150807
Basics
LifeMichael.com

33. © 2015 Haim Michael 20150807
JavaScript Supported
 Writing code in TypeScript we can use the very same
JavaScript we already know. Apart of few cases there
shouldn't be any problem doing so.
 There are few cases in which we will get errors due to
the differences between JavaScript and TypeScript.
 One of the cases in which we get an error is when trying
to treat the variable in our code as if it was a dynamic
type variable (as in JavaScript).
LifeMichael.com

34. © 2015 Haim Michael 20150807
JavaScript Supported
 Unlike other programming languages, when getting error
messages from the TypeScript compiler it will still try to
execute the code.
LifeMichael.com

35. © 2015 Haim Michael 20150807
JavaScript Supported
LifeMichael.com

36. © 2015 Haim Michael 20150807
Variables Scope
 The variables we define are functionally scoped. When
we declare the variables at the top level of our program
then they will be available in the global scope.
 Similarly to JavaScript, when we define a variable
without the var keyword the variable will not be a local
variable. Trying to access it during the very same
function will generate the Could not find symbol
error.
LifeMichael.com

37. © 2015 Haim Michael 20150807
Types
 TypeScript is optionally statically typed programming
language. The types are checked in order to prevent
assignment of invalid values in term of their types. We
can optionally change the variable into a dynamic one.
LifeMichael.com

38. © 2015 Haim Michael 20150807
Types
LifeMichael.com

39. © 2015 Haim Michael 20150807
Automatic Type Inferring
 When assigning a variable, that was just created, with a
value, the TypeScript execution environment
automatically identifies the type and from that moment
on the type of that variable is unchanged.
LifeMichael.com

40. © 2015 Haim Michael 20150807
Automatic Type Inferring
LifeMichael.com

41. © 2015 Haim Michael 20150807
Type Annotation
 The type annotation we can add to a variable we define
should come after the variable identified and should be
preceded by a colon.
LifeMichael.com

42. © 2015 Haim Michael 20150807
Type Annotation
var id:number = 123123;
var name:string = "mosh";
var tall:boolean = true;
var dosomething:
(a:number,b:number)=>number = function(a:number,b:number)
{
return a+b;
}
var names:string[] = ['dave','taly','anat'];
LifeMichael.com

43. © 2015 Haim Michael 20150807
Type Assertion
 When the assignment we try to complete fails due to
typing problem we can override the compiler by forcing a
type assertion.
LifeMichael.com

44. © 2015 Haim Michael 20150807
Type Assertion
class Person
{
id:number;
name:string;
}
class Student extends Person
{
average:number;
}
var a:Person = new Student();
var b:Student = <Student>a;
LifeMichael.com

45. © 2015 Haim Michael 20150807
Operators
 TypeScript supports all JavaScript operators. With some
of them there will be a special meaning.
LifeMichael.com

46. © 2015 Haim Michael 20150807
The ++ -- Operators
 The ++ and -- operators apply to variables of the types
any, numbers or enum.
LifeMichael.com

47. © 2015 Haim Michael 20150807
The ++ -- Operators
enum Day
{
Sunday,
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday
}
var ob:number = Day.Sunday;
ob++;
document.write(Day[ob]);
LifeMichael.com

48. © 2015 Haim Michael 20150807
The ++ -- Operators
LifeMichael.com

49. © 2015 Haim Michael 20150807
The Binary Operators
 TypeScript supports the following common binary
operators:
- + * / % << >> >>> & ^ |
LifeMichael.com

50. © 2015 Haim Michael 20150807
The Bitwise Operators
 TypeScript supports the following common bitwise
operators:
& | ^ << >> >>> ~
LifeMichael.com

51. © 2015 Haim Michael 20150807
The Logical Operators
 TypeScript supports the following common logical
operators:
&& || !
 When converting the following special values into
boolean we will get false.
null "" 0 NaN undefined
 The AND and OR operators are short circuit ones. As
soon as the final result is known the computation stops.
LifeMichael.com

52. © 2015 Haim Michael 20150807
The Control Statements
 TypeScript supports the well known if and if-else,
while, do while and for statements.
LifeMichael.com

53. © 2015 Haim Michael 20150807
The Control Statements
var a: number = 12;
if(a>0)
{
document.write("positive");
}
else
{
document.write("not positive");
}
LifeMichael.com

54. © 2015 Haim Michael 20150807
Types
LifeMichael.com

55. © 2015 Haim Michael 20150807
Optional Static Types
 TypeScript provides us with an automatic type inferring
and specifying. Once the required type is inferred then it
is set permanently.
 The TypeScript compiler performs checks to verify that
each variable we assign with a value is assigned with a
value that matches its type.
LifeMichael.com

56. © 2015 Haim Michael 20150807
Optional Static Types
 We can create a variable with a dynamic type if we specify its
type to be any.
var temp:any = 3;
temp = 'a';
temp = [23,5,23];
temp = true;
temp = new Object();
LifeMichael.com

57. © 2015 Haim Michael 20150807
Structural Typing
 TypeScript is a structural type programming language. It
isn't a nominative one. Programming languages, such as
C, C++ and Java are nominative ones.
 In nominative types programming languages, unless we
specify that a specific class extends another there won't
be any relationship between the two. Unless we specify
that a specific class implements a specific interface there
won't be any connection between the two.
LifeMichael.com

58. © 2015 Haim Michael 20150807
Structural Typing
class Person
{
id:number;
name:string;
details()
{
}
}
class Student extends Person
{
id:number;
name:string;
average:number;
}
var ob:Person = new Student();
LifeMichael.com

59. © 2015 Haim Michael 20150807
Type Inference
 When assigning a variable, that wasn't annotated with a
specific type, with a value the compiler automatically
inference the type.
function printDetails(f)
{
document.write(f('abc'));
}
printDetails(function(str)
{
return "# "+str+" #";
});
LifeMichael.com

60. © 2015 Haim Michael 20150807
Type Erasure
 When compiling the TypeScript code into JavaScript all
of the type annotations are removed.
var a:number = 3;
var b:string = 'abc';
var a = 3;
var b = 'abc';
LifeMichael.com

61. © 2015 Haim Michael 20150807
Functions
LifeMichael.com

62. © 2015 Haim Michael 20150807
Introduction
 When we define a function we can specify the types of
each one of the parameters as well as the type of the
returned value.
LifeMichael.com

63. © 2015 Haim Michael 20150807
Introduction
function sum(a:number,b:number):number
{
var temp:number = a+b;
return temp;
}
var result:number = sum(7,18);
document.write("result="+result);
LifeMichael.com

64. © 2015 Haim Michael 20150807
Introduction
LifeMichael.com

65. © 2015 Haim Michael 20150807
The void Type
 When we define a function that doesn't return any
value we can specify that the type of the returned value
is void.
function doSomething():void
{
document.write("<h1>hola</h1>")
}
doSomething();
LifeMichael.com

66. © 2015 Haim Michael 20150807
The void Type
LifeMichael.com

67. © 2015 Haim Michael 20150807
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.
 Adding the question mark to the name of a parameter
will turn that parameter into an optional one.
LifeMichael.com

68. © 2015 Haim Michael 20150807
Optional Parameters
 The parameters that are not optional are also known as
the required parameters. The required parameters
cannot come after the optional ones.
 The optional parameters should be after any other
required one. They should be the last ones.
LifeMichael.com

69. © 2015 Haim Michael 20150807
Optional Parameters
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);
LifeMichael.com

70. © 2015 Haim Michael 20150807
Optional Parameters
LifeMichael.com

71. © 2015 Haim Michael 20150807
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.
LifeMichael.com

72. © 2015 Haim Michael 20150807
Default Parameters
function dosomething(a,b,step=((b-a)%5))
{
var i=a;
while(a<=b)
{
document.write("<br/>"+a);
a+=step;
}
}
dosomething(1,20);
LifeMichael.com

73. © 2015 Haim Michael 20150807
Default Parameters
LifeMichael.com

74. © 2015 Haim Michael 20150807
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.com

75. © 2015 Haim Michael 20150807
Rest Parameters
 In order to define a rest parameter we just need to prefix
the parameter with three periods.
LifeMichael.com

76. © 2015 Haim Michael 20150807
Rest Parameters
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));
LifeMichael.com

77. © 2015 Haim Michael 20150807
Rest Parameters
LifeMichael.com

78. © 2015 Haim Michael 20150807
Overloading Functions
 Unlike other programming languages that allow each
one of the function versions to have a separated
implementation, in TypeScript we have a single
implementation decorated with the multiple
overloaded versions.
 The implementation signature must define
parameters and a return value compatible with all
signatures. Therefore, we will usually use the type
any when defining the implementation.
LifeMichael.com

79. © 2015 Haim Michael 20150807
Overloading Functions
 The return type of each signature can be different. The
parameters in each signature can different in their types.
The number of parameters can also be different.
 If a signature specifies less parameters comparing with the
implementation signature, then the implementation
signature should make the extra parameters optional,
default or rest.
LifeMichael.com

80. © 2015 Haim Michael 20150807
Overloading Functions
function generate(a:string, b:string, c:string):string;
function generate(a:string, b:number):string;
function generate(a:any, b:any, c?:any):string
{
var result:string="";
if(c===undefined)
{
for(var i:number=0; i<b; i++) {
result = result + a;
}
}
else
{
result = a + b + c;
}
return result;
}
document.write("<br/>"+generate("shalom",3));
LifeMichael.com

81. © 2015 Haim Michael 20150807
Overloading Functions
LifeMichael.com

82. © 2015 Haim Michael 20150807
Specialized Overload Signature
 TypeScript allows us to create overloaded versions
based on string constants.
 There should be at least one nonspecialized signature
and each one of the specialized signatures must return a
subtype of the nonspecialized signature.
 The implementation signature must be compatible with
all signatures.
LifeMichael.com

83. © 2015 Haim Michael 20150807
Specialized Overload Signature
class Shape {}
class Circle extends Shape {}
class Rectangle extends Shape {}
function create(data:'circle'):Circle;
function create(data:'rectangle'):Rectangle;
function create(data:'text'):string;
function create(data:'greeting'):string;
function create(data:'num'):number;
function create(data: string):any
LifeMichael.com

84. © 2015 Haim Michael 20150807
Specialized Overload Signature
function create(data:string):any
{
switch (data)
{
case 'num':
return 10;
case 'circle':
return new Circle();
case 'rectangle':
return new Rectangle();
case 'text':
return "simple text";
case 'greeting':
return "good evening";
default:
return '1';
}
}
var a:any = create('num');
a++;
document.write(a);
LifeMichael.com

85. © 2015 Haim Michael 20150807
Specialized Overload Signature
LifeMichael.com

86. © 2015 Haim Michael 20150807
Arrow Functions
 TypeScript allows us to write lambda expressions, also
known as arrow functions.
var f = (a,b)=> {
var result = a+b;
return result;
};
document.write("f(2,3)="+f(2,3));
LifeMichael.com

87. © 2015 Haim Michael 20150807
Arrow Functions
LifeMichael.com

88. © 2015 Haim Michael 20150807
Arrays
LifeMichael.com

89. © 2015 Haim Michael 20150807
Introduction
 When we define an array in TypeScript we can specify
the exact type that each one of the array values must
match.
 In order to specify an array type we should place square
brackets after the name of the type.
LifeMichael.com

90. © 2015 Haim Michael 20150807
Simple Array
class Rectangle
{
constructor( private width:number,
private height:number) {}
area()
{
return this.width*this.height;
}
}
var rectangles:Rectangle[] = [
new Rectangle(3,4),
new Rectangle(5,7),
new Rectangle(8,2)
];
document.write("<br/>area is "+rectangles[0].area());
LifeMichael.com

91. © 2015 Haim Michael 20150807
Simple Array
LifeMichael.com

92. © 2015 Haim Michael 20150807
The Array Class
 We can alternatively instantiate Array and specify the
type of each value as the Array type annotation.
LifeMichael.com

93. © 2015 Haim Michael 20150807
The Array Class
class Rectangle
{
constructor( private width:number,
private height:number) {}
area()
{
return this.width*this.height;
}
}
var rectangles:Array<Rectangle> = new Array<Rectangle>();
rectangles[0] = new Rectangle(3,4);
rectangles[1] = new Rectangle(5,7);
rectangles[2] = new Rectangle(8,2);
document.write("<br/>area is "+rectangles[2].area());
LifeMichael.com

94. © 2015 Haim Michael 20150807
The Array Class
LifeMichael.com

95. © 2015 Haim Michael 20150807
Arrays Sorting
 We can sort an array by calling the sort function and
pass over the reference for a function that is capable of
receiving two values from those the array holds and
return 0, -1 or 1 accordingly.
LifeMichael.com

96. © 2015 Haim Michael 20150807
Arrays Sorting
class Rectangle
{
constructor( private width:number,
private height:number) {}
area()
{
return this.width*this.height;
}
}
var rectangles:Array<Rectangle> = new Array<Rectangle>();
rectangles[0] = new Rectangle(3,4);
rectangles[1] = new Rectangle(5,7);
rectangles[2] = new Rectangle(8,2);
rectangles[3] = new Rectangle(1,2);
rectangles[4] = new Rectangle(8,12);
LifeMichael.com

97. © 2015 Haim Michael 20150807
Arrays Sorting
rectangles.sort((a,b)=>{
if(a.area()==b.area())
return 0;
else
{
if(a.area()>b.area())
return 1;
else if(a.area()<b.area())
return -1;
}
})
for(var k in rectangles) {
document.write("<br/>"+rectangles[k].area());
}
LifeMichael.com

98. © 2015 Haim Michael 20150807
Arrays Sorting
LifeMichael.comLifeMichael.com

99. © 2015 Haim Michael 20150807
Classes
LifeMichael.com

100. © 2015 Haim Michael 20150807
Introduction
 TypeScript supports many of the object oriented
programming features we know from other
programming languages.
LifeMichael.com

101. © 2015 Haim Michael 20150807
The Constructor
 When we define a new class it automatically has a
constructor. The default one. We can define a new
constructor. When doing so, the default one will be
deleted.
LifeMichael.com

102. © 2015 Haim Michael 20150807
The Constructor
class Rectangle
{
private width:number;
private height:number;
constructor( w:number,
h:number)
{
this.setWidtht(w);
this.setHeight(h);
}
setWidtht(num:number):void
{
if(num>0)
{
this.width = num;
}
}
LifeMichael.com

103. © 2015 Haim Michael 20150807
The Constructor
setHeight(num:number):void
{
if(num>0)
{
this.height = num;
}
}
area()
{
return this.width*this.height;
}
}
LifeMichael.com

104. © 2015 Haim Michael 20150807
The Constructor
var rectangles:Array<Rectangle> =
new Array<Rectangle>();
rectangles[0] = new Rectangle(3,4);
rectangles[1] = new Rectangle(5,7);
rectangles[2] = new Rectangle(8,2);
rectangles[3] = new Rectangle(1,2);
rectangles[4] = new Rectangle(8,12);
LifeMichael.com

105. © 2015 Haim Michael 20150807
The Constructor
rectangles.sort((a,b)=>{
if(a.area()==b.area())
return 0;
else
{
if(a.area()>b.area())
return 1;
else if(a.area()<b.area())
return -1;
}
})
for(var k in rectangles) {
document.write("<br/>"+rectangles[k].area());
}
LifeMichael.com

106. © 2015 Haim Michael 20150807
The Constructor
LifeMichael.com

107. © 2015 Haim Michael 20150807
The Constructor
 When we define a new constructor we can specify each
one of its parameters with an access modifier and by
doing so indirectly define those parameters as instance
variables.
LifeMichael.com

108. © 2015 Haim Michael 20150807
The Constructor
class Rectangle
{
constructor( private width:number,
private height:number) {}
area():number
{
return this.width*this.height;
}
}
var rec = new Rectangle(3,4);
document.write("<br/>area is "+rec.area());
LifeMichael.com

109. © 2015 Haim Michael 20150807
The Constructor
LifeMichael.com

110. © 2015 Haim Michael 20150807
Access Modifiers
 The available access modifiers are private,
public and protected. The public access
modifier is the default one. If we don't specify an
access modifier then it is public.
 When we define a function or a instance variable with
the protected access modifier it will be accessible
from within the very same class in which the function
or the variable were defined as well as from within
subclasses of that class.
LifeMichael.com

111. © 2015 Haim Michael 20150807
Access Modifiers
class Rectangle
{
constructor( protected width:number,
protected height:number) {}
protected area():number
{
return this.width*this.height;
}
}
LifeMichael.com

112. © 2015 Haim Michael 20150807
Access Modifiers
class MagicalRectangle extends Rectangle
{
public printDetails():void
{
document.write("<br/>width="+this.width);
document.write("<br/>height="+this.height);
document.write("<br/>area="+this.area());
}
}
var rec = new MagicalRectangle(30,42);
rec.printDetails();
LifeMichael.com

113. © 2015 Haim Michael 20150807
Access Modifiers
LifeMichael.com

114. © 2015 Haim Michael 20150807
Variables and Methods
 The variables are usually declared before the
constructor. Each variable definition includes three parts.
The optional access modifier, the identifier and the type
annotation.
 The functions are declared without using the function
keyword. We can precede the function name with an
access modifier and we can append the function
declaration with the type of its returned value.
LifeMichael.com

115. © 2015 Haim Michael 20150807
Variables and Methods
class Rectangle
{
private width:number;
Private height:number;
constructor( width:number,
height:number)
{
this.width = width;
this.height = height;
}
protected area():number
{
return this.width*this.height;
}
}
LifeMichael.com

116. © 2015 Haim Michael 20150807
Static Variables and Methods
 We can define static variables and static methods by
adding the static keyword. Accessing static
variables and methods is done using the name of the
class.
LifeMichael.com

117. © 2015 Haim Michael 20150807
Static Variables and Methods
class FinanceUtils
{
public static VAT = 0.18;
public static calculateTax(sum:number):number
{
return 0.25*sum;
}
public static calculateVAT(sum:number):number
{
return FinanceUtils.VAT*sum;
}
}
var price:number = 1020;
document.write("<br/>"+FinanceUtils.calculateVAT(price));
LifeMichael.com

118. © 2015 Haim Michael 20150807
Static Variables and Methods
LifeMichael.com

119. © 2015 Haim Michael 20150807
Inheritance
LifeMichael.com

120. © 2015 Haim Michael 20150807
Introduction
 Using the extends keyword we can define a class that
extends another class.
 Every method and every variable are inherited.
TypeScript doesn't support different types of inheritance.
LifeMichael.com

121. © 2015 Haim Michael 20150807
Inheritance Meaning
 Each and every variable that exists in objects
instantiated from the base class will be in each and
every object instantiated from the new class.
 Each and every method we can invoke on objects
instantiated from the base class will be available for
invocation on each and every object instantiated from
the new class.
LifeMichael.com

122. © 2015 Haim Michael 20150807
The super Keyword
 Using the super keyword we can invoke the constructor
that was defined in the base class from within the
constructor that was defined in the new class.
 Similarly to Java, C# and C++, when instantiating a class
the default constructor in the super class is called as
well. We can use the super keyword in order to invoke
another one instead.
LifeMichael.com

123. © 2015 Haim Michael 20150807
The super Keyword
 Using the super keyword we can invoke a method
version we override. This way we can define a method
that includes the execution of the code that belongs to
the version it overrides.
LifeMichael.com

124. © 2015 Haim Michael 20150807
The super Keyword
class Person
{
private _id:number;
private _name:string;
constructor(id:number, name:string)
{
this._id = id;
this._name = name;
}
details()
{
document.write(" id="+this._id);
document.write(" name="+this._name);
}
}
LifeMichael.com

125. © 2015 Haim Michael 20150807
The super Keyword
class Student extends Person
{
private _average:number;
constructor(id:number,name:string,average:number)
{
this._average = average;
super(id,name);
}
details()
{
super.details();
document.write(" average="+this._average);
}
}
var ob = new Student(123123,"dave",88);
ob.details();
LifeMichael.com

126. © 2015 Haim Michael 20150807
The super Keyword
LifeMichael.com

127. © 2015 Haim Michael 20150807
Generics
LifeMichael.com

128. © 2015 Haim Michael 20150807
Introduction
 Using generics we can define functions and classes
that will be reused in order to work with various
different types.
LifeMichael.com

129. © 2015 Haim Michael 20150807
Generics Class
 Whenever we instantiate a generic class we should
specify the missing type(s) in order to get a new object
specifically with the type(s) we specified.
LifeMichael.com

130. © 2015 Haim Michael 20150807
Generics Class
class MyStack<T>
{
private index:number = 0;
private vec:T[];
constructor(size:number)
{
this.vec = new Array<T>(size);
}
push(ob:T):void
{
this.vec[this.index] = ob;
this.index++;
}
pop():T
{
this.index--;
return this.vec[this.index];
}
}
LifeMichael.com

131. © 2015 Haim Michael 20150807
Generics Class
var stack = new MyStack<string>(10);
stack.push("haifa");
stack.push("jerusalem");
stack.push("rehovot");
var temp = stack.pop();
document.write("<br/>typeof(temp)="+typeof(temp));
document.write("<br/>temp="+temp);
LifeMichael.com

132. © 2015 Haim Michael 20150807
Generics Class
LifeMichael.com

133. © 2015 Haim Michael 20150807
Generic Function
 Whenever we call a generic function we should specify
the missing type(s).
LifeMichael.com

134. © 2015 Haim Michael 20150807
Generic Function
class MyStack<T>
{
private index:number = 0;
private vec:T[];
constructor(size:number)
{
this.vec = new Array<T>(size);
}
push(ob:T):void
{
this.vec[this.index] = ob;
this.index++;
}
pop():T
{
this.index--;
return this.vec[this.index];
}
}
LifeMichael.com

135. © 2015 Haim Michael 20150807
Generic Function
function createStack<T>(size:number):MyStack<T>
{
return new MyStack<T>(size);
}
var stack = createStack<string>(10);
stack.push("haifa");
stack.push("jerusalem");
stack.push("rehovot");
var temp = stack.pop();
document.write("<br/>typeof(temp)="+typeof(temp));
document.write("<br/>temp="+temp);
LifeMichael.com

136. © 2015 Haim Michael 20150807
Generic Function
LifeMichael.com

137. © 2015 Haim Michael 20150807
Generic Function
 We can use the type parameter when defining a
variable that its type is a function with a specific
signature.
function createStack<T>(size:number):MyStack<T>
{
return new MyStack<T>(size);
}
var func: <T>(n:number)=>MyStack<T>;
func = createStack;
var stack = func<string>(10);
LifeMichael.com

138. © 2015 Haim Michael 20150807
Generic Function
class MyStack<T>
{
private index:number = 0;
private vec:T[];
constructor(size:number)
{
this.vec = new Array<T>(size);
}
push(ob:T):void
{
this.vec[this.index] = ob;
this.index++;
}
pop():T
{
this.index--;
return this.vec[this.index];
}
}
LifeMichael.com

139. © 2015 Haim Michael 20150807
Generic Function
function createStack<T>(size:number):MyStack<T>
{
return new MyStack<T>(size);
}
var func: <T>(n:number)=>MyStack<T>;
func = createStack;
var stack = func<string>(10);
stack.push("haifa");
stack.push("jerusalem");
stack.push("rehovot");
var temp = stack.pop();
document.write("<br/>typeof(temp)="+typeof(temp));
document.write("<br/>temp="+temp);
LifeMichael.com

140. © 2015 Haim Michael 20150807
Generic Function
LifeMichael.com

141. © 2015 Haim Michael 20150807
Generic Constraints
 When using the parameter type we can specify
constraints in order to limit the range of possible types.
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;
}
LifeMichael.com

142. © 2015 Haim Michael 20150807
Generic Constraints
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;
}
LifeMichael.com

143. © 2015 Haim Michael 20150807
Generic Constraints
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;
}
}
var students = [new Student(123123,"dave",88),
new Student(234343,"ronen",92),
new Student(34234,"yael",82)];
var avg = calculateAverage(students);
document.write("average is "+avg);
LifeMichael.com

144. © 2015 Haim Michael 20150807
Generic Constraints
LifeMichael.com

145. © 2015 Haim Michael 20150807
Interfaces
LifeMichael.com

146. © 2015 Haim Michael 20150807
Introduction
 TypeScript allows us to define an interface. The
interface we define in TypeScript can be used for
various purposes. We define a new interface using the
interface keyword.
 The interface can include the definition of abstract
methods, properties (instance variables) and event a
constructor.
LifeMichael.com

147. © 2015 Haim Michael 20150807
Abstract Type
 We can define an interface and use it as an abstract type
a concrete class can implement.

148. © 2015 Haim Michael 20150807
Abstract Type
interface IPrintable
{
print():void;
}
function printObjects<T extends Iprintable>
(students:Array<T>):void
{
for(var i:number=0; i<students.length; i++)
{
students[i].print();
}
}
LifeMichael.com

149. © 2015 Haim Michael 20150807
Abstract Type
class Student implements IPrintable
{
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;
}
print():void
{
document.write("<br/>name="+this._name+" id="+
this._id+" average="+this._average);
}
}
LifeMichael.com

150. © 2015 Haim Michael 20150807
Abstract Type
var students = [ new Student(123123,"dave",88),
new Student(234343,"ronen",92),
new Student(34234,"yael",82)];
printObjects(students);
LifeMichael.com

151. © 2015 Haim Michael 20150807
Abstract Type
LifeMichael.com

152. © 2015 Haim Michael 20150807
Structure Definition
 We can define an interface and use it as a structure
other types will be based on.
 When defining a class that implements an interface
that includes variables definition the class will need to
define those variables as well.
LifeMichael.com

153. © 2015 Haim Michael 20150807
Structure Definition
interface ILocation
{
x:number;
y:number;
}
function distance(ob:ILocation):number
{
return Math.sqrt(ob.x*ob.x + ob.y*ob.y);
}
LifeMichael.com

154. © 2015 Haim Michael 20150807
Structure Definition
class House implements ILocation
{
x:number;
y:number;
address:string;
constructor(str:string,x:number,y:number)
{
this.address = str;
this.x = x;
this.y = y;
}
}
var temp = new House("herzel 102, rehovot",3,4);
document.write("distance is "+distance(temp))
LifeMichael.com

155. © 2015 Haim Michael 20150807
Structure Definition
LifeMichael.com

156. © 2015 Haim Michael 20150807
Structure Definition
 We could alternatively specify the requirement in the
function definition for an argument with specific
properties in the following way:
function distance(ob:{x:number,y:number}):number
{
return Math.sqrt(ob.x*ob.x + ob.y*ob.y);
}
LifeMichael.com

157. © 2015 Haim Michael 20150807
Structure Definition
interface ILocation
{
x:number;
y:number;
}
function distance(ob:{x:number,y:number}):number
{
return Math.sqrt(ob.x*ob.x + ob.y*ob.y);
}
LifeMichael.com

158. © 2015 Haim Michael 20150807
Structure Definition
class House implements ILocation
{
x:number;
y:number;
address:string;
constructor(str:string,x:number,y:number)
{
this.address = str;
this.x = x;
this.y = y;
}
}
var temp = new House("herzel 102, rehovot",3,4);
document.write("distance is "+distance(temp))
LifeMichael.com

159. © 2015 Haim Michael 20150807
Structure Definition
LifeMichael.com

160. © 2015 Haim Michael 20150807
Optional Properties
 When we define an interface it is possible to specify
those properties the interface includes their definition
and their implementation isn't required by appending
their name with a question mark.
interface ILocation
{
x?:number;
y?:number;
}
LifeMichael.com

161. © 2015 Haim Michael 20150807
Optional Properties
interface ILocation
{
x?:number;
y?:number;
}
function distance(ob:ILocation):void
{
if(ob.x && ob.y)
{
document.write("distance is " +
Math.sqrt(ob.x * ob.x + ob.y * ob.y));
}
else
{
document.write("it isn't possible to calculate the distance");
}
}
LifeMichael.com

162. © 2015 Haim Michael 20150807
Optional Properties
class Tent implements ILocation
{
address:string;
constructor(str:string)
{
this.address = str;
}
}
var temp = new Tent("herzel 102, rehovot");
document.write("distance is "+distance(temp));
LifeMichael.com

163. © 2015 Haim Michael 20150807
Optional Properties
LifeMichael.com

164. © 2015 Haim Michael 20150807
Describing Function Type
 The interfaces we define in TypeScript are capable of
describing function types.
 In order to describe a function signature using an
interface we should describe that signature within the
body of the interface.
interface CalculateFunction
{
(a:number,b:number):number;
}
LifeMichael.com

165. © 2015 Haim Michael 20150807
Describing Function Type
interface CalculateFunction
{
(a:number,b:number):number;
}
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));
LifeMichael.com

166. © 2015 Haim Michael 20150807
Describing Function Type
LifeMichael.com

167. © 2015 Haim Michael 20150807
Describing Array Types
 We can define an interface in order to describe an array
type in our program.
LifeMichael.com

168. © 2015 Haim Michael 20150807
Describing Array Types
interface RectanglesArray
{
[index: number]: Rectangle;
length:number;
}
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.com

169. © 2015 Haim Michael 20150807
Describing Array Types
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));
LifeMichael.com

170. © 2015 Haim Michael 20150807
Describing Array Types
LifeMichael.com

171. © 2015 Haim Michael 20150807
Interfaces Inheritance
 We can define an interface that extends other
interfaces. Unlike classes inheritance, an interface can
extend multiple other interface.
LifeMichael.com

172. © 2015 Haim Michael 20150807
Interfaces Inheritance
interface IPrintable
{
print():void
}
interface ICompareable
{
compare(other:any)
}
interface IPoint
{
x:number;
y:number;
}
interface Bird extends IPoint,ICompareable,IPrintable {}
LifeMichael.com

173. © 2015 Haim Michael 20150807
Enum
LifeMichael.com

174. © 2015 Haim Michael 20150807
Introduction
 As with many other programming languages, TypeScript
allows us to create a new enum type, as a way for giving
more friendly names to sets of numeric values.
enum Month {January, February, March, April};
var a:Month = Month.January;
var b:Month = Month.February;
document.write("<br/>a="+a);
document.write("<br/>b="+b);
LifeMichael.com

175. © 2015 Haim Michael 20150807
The Numbering
 By default, the numbering starts at 0. We can change
that by setting the value of one of the enum members.
enum Month {January=1, February, March, April};
var a:Month = Month.January;
var b:Month = Month.February;
document.write("<br/>a="+a);
document.write("<br/>b="+b);
LifeMichael.com

176. © 2015 Haim Michael 20150807
The Corresponding Name
 When having a numeric value we can get its
corresponding name in a specific enum by treating the
enum as an array.
enum Month {January=1, February, March, April};
var a:Month = Month.January;
var b:Month = Month.February;
var str:string = Month[3];
document.write(str);
LifeMichael.com

177. © 2015 Haim Michael 20150807
Exceptions
LifeMichael.com

178. © 2015 Haim Michael 20150807
Introduction
 When the code in JavaScript encounters an exception
the details will be printed to the console. They won't be
shown in the web browser.
 We can handle those exceptions using the try & catch
statement.
LifeMichael.com

179. © 2015 Haim Michael 20150807
Exceptions Throwing
 In order to throw an exception we should use the throw
keyword and instantiate the relevant exception class.
function divide(a:number,b:number):number
{
if(b==0)
throw new MathException("you cannot divide by 0!");
return a/b;
}
LifeMichael.com

180. © 2015 Haim Michael 20150807
Custom Exception Type
 We can create a new customized exception type by
defining a new class that implements the Error
interface.
 The new class should include (at the minimum) the
definition for name and message variables.
 It will also be very useful to define the toString()
function.
LifeMichael.com

181. © 2015 Haim Michael 20150807
Custom Exception Type
class MathException implements Error
{
public name:string = "MathException";
constructor(public message:string) {}
toString()
{
return "("+this.name +","+this.message+")";
}
}
LifeMichael.com

182. © 2015 Haim Michael 20150807
The catch Statement
 In order to catch an exception we should use the try
and catch statement.
try
{
document.write("<br/>divide(3,5)="+divide(3,5));
document.write("<br/>divide(7,0)="+divide(7,0));
document.write("<br/>divide(3,5)="+divide(12,5));
}
catch(e)
{
document.write(e.message);
}
LifeMichael.com

183. © 2015 Haim Michael 20150807
The finally Block
 The finally block comes right after the catch statement.
The code we have inside the finally block is executed
no matter whether an exception took place or not.
try
{
document.write("<br/>divide(3,5)="+divide(3,5));
}
catch(e)
{
document.write(e.message);
}
finally
{
}
LifeMichael.com

184. © 2015 Haim Michael 20150807
Sample
class MathException implements Error
{
public name:string = "MathException";
constructor(public message:string) {}
toString()
{
return "("+this.name +","+this.message+")";
}
}
function divide(a:number,b:number):number
{
if(b==0)
throw new MathException("you cannot divide by 0!");
return a/b;
}
LifeMichael.com

185. © 2015 Haim Michael 20150807
Sample
try
{
document.write("<br/>divide(3,5)="+divide(3,5));
document.write("<br/>divide(7,0)="+divide(7,0));
document.write("<br/>divide(3,5)="+divide(12,5));
}
catch(e)
{
document.write("<br/>"+e.message);
}
finally
{
document.write("<br/>finally always works!");
}
LifeMichael.com

186. © 2015 Haim Michael 20150807
Sample
LifeMichael.com

187. © 2015 Haim Michael 20150807
Modules
LifeMichael.com

188. © 2015 Haim Michael 20150807
Introduction
 The module is kind of a new scope that assists us to
cope with functions, variables and classes names
collision.
LifeMichael.com

189. © 2015 Haim Michael 20150807
The module Statement
 Using the module statement we can scope the variables,
functions and classes we want to place together in one
module.
module Finance
{
}
LifeMichael.com

190. © 2015 Haim Michael 20150807
The export Statement
 Using the export statement we can make specific classes,
functions and variables available outside of the module.
module Finance
{
export class Stock
{
...
}
...
}
LifeMichael.com

191. © 2015 Haim Michael 20150807
The export Statement
module MathModule
{
export var PI:number = 3.14;
export function sum(a:number,b:number)
{
return a+b;
}
export class Rectangle
{
constructor(
private width:number,
private height:number) {}
area():number
{
return this.width*this.height;
}
}
}
LifeMichael.com

192. © 2015 Haim Michael 20150807
The export Statement
var circleArea:number = MathModule.PI*3*3;
document.write("<br/>area of circle is "+circleArea);
var rec:MathModule.Rectangle = new MathModule.Rectangle(3,5);
var rectangleArea:number = rec.area();
document.write("<br/>area of rectangle is "+rectangleArea);
var sum:number = MathModule.sum(3,4);
document.write("<br/>sum is "+sum);
LifeMichael.com

193. © 2015 Haim Michael 20150807
The export Statement
LifeMichael.com

194. © 2015 Haim Michael 20150807
Separated Files
 We can define each and every module in a separated file.
When doing so we will need to add a script element for each
one of the JavaScript files.
 When one TypeScript file needs another we should add a
reference to the first.
/// <reference path="math1.ts" />
LifeMichael.com

195. © 2015 Haim Michael 20150807
Separated Files
module MathModule {
export var PI:number = 3.14;
export function sum(a:number, b:number) {
return a + b;
}
export function multiply(a:number, b:number) {
return a * b;
}
}
math1.ts
LifeMichael.com

196. © 2015 Haim Michael 20150807
Separated Files
/// <reference path="math1.ts" />
module MathModule {
export class Rectangle {
constructor(
private width:number,
private height:number){}
area():number
{
return MathModule.multiply(
this.width,this.height);
}
}
}
math2.ts
LifeMichael.com

197. © 2015 Haim Michael 20150807
Separated Files
/// <reference path="math2.ts" />
var temp = MathModule.sum(2,5);
document.writeln("<br/>temp="+temp);
var ob = new MathModule.Rectangle(5,6);
document.writeln("<br/>area="+ob.area());
math3.ts
LifeMichael.com

198. © 2015 Haim Michael 20150807
Separated Files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>demo</h1>
<script src="math1.js"></script>
<script src="math2.js"></script>
<script src="math3.js"></script>
</body>
</html>
mathdemo.html
LifeMichael.com

199. © 2015 Haim Michael 20150807
Separated Files
LifeMichael.com

200. © 2015 Haim Michael 20150807
External Modules
 In external modules, relationships between files are specified
in terms of imports and exports at the file level.
 Any file containing a top-level import or export is considered
an external module.
 When the files are been used as external modules we no
longer use the module keyword. The files themselves
constitute a module and are identified by their filenames.
LifeMichael.com

201. © 2015 Haim Michael 20150807
External Modules
 In external modules the reference tags are replaced with
import statements.
 The import statement has two parts. The name that the
module will be known by in this file and the require
keyword that specifies the path to the required module.
 We use the export keyword in order to specify which
objects are visible outside the module.
LifeMichael.com

202. © 2015 Haim Michael 20150807
External Modules
 We should specify the modules system we want the compiler to
be compatible with. If we intend to use the new module we
develop together with a node.js application then we should use
commonjs and if we plan to use the new module with the
require.js modules system then we should use amd.
tsc --module commonjs Test.ts
tsc --module amd Test.ts
LifeMichael.com

203. © 2015 Haim Michael 20150807
External Modules
class Rectangle
{
private width:number;
private height:number;
constructor(w:number,h:number)
{
this.width = w;
this.height = h;
}
public area():number
{
return this.width*this.height;
}
}
export = Rectangle;
externalmodule.ts
LifeMichael.com

204. © 2015 Haim Michael 20150807
External Modules
import Rectangle = require("./externalmodule");
var temp = new Rectangle(3,4);
document.write("area is "+temp.area());
demo.ts
 We can now use demo.ts module in a project developed in
JavaScript with require.js.
LifeMichael.com

205. © 2015 Haim Michael 20150807
Runtime
LifeMichael.com

206. © 2015 Haim Michael 20150807
Introduction
 The code we write in TypeScript is compiled into
JavaScript, that can be executed on nearly every
platform that supports JavaScript, such as web
browsers and servers.
LifeMichael.com

207. © 2015 Haim Michael 20150807
Variables Scope
 Unlike many other programming languages, both
JavaScript and TypeScript do not support block based
scope. When we define a variable inside a block that
variable scope is not limited for the block. It will be as
any other local variable in that very same function.
LifeMichael.com

208. © 2015 Haim Michael 20150807
Variables Scope
function doSomething()
{
var str:string = "abc";
if(true)
{
var str:string = "fgh";
document.write("<br/>inside block... "+str);
}
document.write("<br/>outside block... "+str);
}
doSomething();
LifeMichael.com

209. © 2015 Haim Michael 20150807
Variables Scope
LifeMichael.com

210. © 2015 Haim Michael 20150807
The let Keyword
 When declaring a variable using the let keyword its
scope will be the block in which it was declared.
LifeMichael.com

211. © 2015 Haim Michael 20150807
The let Keyword
function doSomething()
{
var str:string = "abc";
if(true)
{
let str:string = "fgh";
document.write("<br/>inside block... "+str);
}
document.write("<br/>outside block... "+str);
}
doSomething();
LifeMichael.com

212. © 2015 Haim Michael 20150807
The let Keyword
LifeMichael.com

213. © 2015 Haim Michael 20150807
One Single Thread
 The code we write in TypeScript is executed on one
single thread. The main thread. It is the same thread that
runs the code in JavaScript.
LifeMichael.com

214. © 2015 Haim Michael 20150807
One Single Thread
var start:any = new Date();
setTimeout(function()
{
let end:any = new Date();
let temp:any = (end-start) + " ms";
document.write("time passed is " + temp);
}, 500);
var temp:any = new Date();
while (temp - start < 3000)
{
temp = new Date();
}
LifeMichael.com

215. © 2015 Haim Michael 20150807
One Single Thread
LifeMichael.com

216. © 2015 Haim Michael 20150807
Variables Hoisting
 When we declare a variable using the var or the let
keyword, the declaration is hoisted to the top of the
function it is declared in. When the variable hoisting takes
place, the local variable declaration is moved to the top of
the function at runtime, hiding the global variable of the
same name.
LifeMichael.com

217. © 2015 Haim Michael 20150807
Variables Hoisting
 The assignment remains in the original location. This
results in an undefined value assigned to the new created
local variable when declared.
LifeMichael.com

218. © 2015 Haim Michael 20150807
Variables Hoisting
var temp:string = 'We Love TypeScript!';
document.write("<br/>1.temp="+temp);
function a() {
document.write("<br/>2.temp="+temp);
let temp = 'We Love Scala!';
document.write("<br/>3.temp="+temp);
}
a();
document.write("<br/>4.temp="+temp);
LifeMichael.com

219. © 2015 Haim Michael 20150807
Variables Hoisting
var temp:string = 'We Love TypeScript!';
document.write("<br/>1.temp="+temp);
function a() {
document.write("<br/>2.temp="+temp);
//let temp = 'We Love Scala!';
document.write("<br/>3.temp="+temp);
}
a();
document.write("<br/>4.temp="+temp);