Weitere ähnliche Inhalte Ähnlich wie TypeScript Seminar (20) Mehr von Haim Michael (20) Kürzlich hochgeladen (20) TypeScript Seminar1. 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
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
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
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);