Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

TypeScript Seminar

3 763 vues

Publié le

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

Publié dans : Logiciels
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

TypeScript Seminar

  1. 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. 2. © 2015 Haim Michael 20150807 Life Michael Introduction  Snowboarding. Learning. Coding. Teaching. More than 16 years of Practical Experience. LifeMichael.com
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. © 2015 Haim Michael 20150807 Introduction LifeMichael.com
  13. 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. 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. 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. 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. 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. 18. © 2015 Haim Michael 20150807 Jump Start LifeMichael.com
  19. 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. 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. 21. © 2015 Haim Michael 20150807 Enabling the TypeScript Compiler LifeMichael.com
  22. 22. © 2015 Haim Michael 20150807 The TypeScript File  We write our code in TypeScript in a file with the 'ts' extension. LifeMichael.com
  23. 23. © 2015 Haim Michael 20150807 The TypeScript File LifeMichael.com
  24. 24. © 2015 Haim Michael 20150807 The TypeScript File LifeMichael.com
  25. 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. 26. © 2015 Haim Michael 20150807 The HTML Document LifeMichael.com
  27. 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. 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. 29. © 2015 Haim Michael 20150807 Code Sample LifeMichael.com
  30. 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. 31. © 2015 Haim Michael 20150807 Visual Studio LifeMichael.com
  32. 32. © 2015 Haim Michael 20150807 Basics LifeMichael.com
  33. 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. 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. 35. © 2015 Haim Michael 20150807 JavaScript Supported LifeMichael.com
  36. 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. 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. 38. © 2015 Haim Michael 20150807 Types LifeMichael.com
  39. 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. 40. © 2015 Haim Michael 20150807 Automatic Type Inferring LifeMichael.com
  41. 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. 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. 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. 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. 45. © 2015 Haim Michael 20150807 Operators  TypeScript supports all JavaScript operators. With some of them there will be a special meaning. LifeMichael.com
  46. 46. © 2015 Haim Michael 20150807 The ++ -- Operators  The ++ and -- operators apply to variables of the types any, numbers or enum. LifeMichael.com
  47. 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. 48. © 2015 Haim Michael 20150807 The ++ -- Operators LifeMichael.com
  49. 49. © 2015 Haim Michael 20150807 The Binary Operators  TypeScript supports the following common binary operators: - + * / % << >> >>> & ^ | LifeMichael.com
  50. 50. © 2015 Haim Michael 20150807 The Bitwise Operators  TypeScript supports the following common bitwise operators: & | ^ << >> >>> ~ LifeMichael.com
  51. 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. 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. 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. 54. © 2015 Haim Michael 20150807 Types LifeMichael.com
  55. 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. 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. 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. 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. 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. 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. 61. © 2015 Haim Michael 20150807 Functions LifeMichael.com
  62. 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. 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. 64. © 2015 Haim Michael 20150807 Introduction LifeMichael.com
  65. 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. 66. © 2015 Haim Michael 20150807 The void Type LifeMichael.com
  67. 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. 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. 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. 70. © 2015 Haim Michael 20150807 Optional Parameters LifeMichael.com
  71. 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. 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. 73. © 2015 Haim Michael 20150807 Default Parameters LifeMichael.com
  74. 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. 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. 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. 77. © 2015 Haim Michael 20150807 Rest Parameters LifeMichael.com
  78. 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. 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. 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. 81. © 2015 Haim Michael 20150807 Overloading Functions LifeMichael.com
  82. 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. 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. 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. 85. © 2015 Haim Michael 20150807 Specialized Overload Signature LifeMichael.com
  86. 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. 87. © 2015 Haim Michael 20150807 Arrow Functions LifeMichael.com
  88. 88. © 2015 Haim Michael 20150807 Arrays LifeMichael.com
  89. 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. 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. 91. © 2015 Haim Michael 20150807 Simple Array LifeMichael.com
  92. 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. 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. 94. © 2015 Haim Michael 20150807 The Array Class LifeMichael.com
  95. 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. 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. 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. 98. © 2015 Haim Michael 20150807 Arrays Sorting LifeMichael.comLifeMichael.com
  99. 99. © 2015 Haim Michael 20150807 Classes LifeMichael.com
  100. 100. © 2015 Haim Michael 20150807 Introduction  TypeScript supports many of the object oriented programming features we know from other programming languages. LifeMichael.com
  101. 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. 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. 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. 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. 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. 106. © 2015 Haim Michael 20150807 The Constructor LifeMichael.com
  107. 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. 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. 109. © 2015 Haim Michael 20150807 The Constructor LifeMichael.com
  110. 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. 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. 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. 113. © 2015 Haim Michael 20150807 Access Modifiers LifeMichael.com
  114. 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. 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. 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. 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. 118. © 2015 Haim Michael 20150807 Static Variables and Methods LifeMichael.com
  119. 119. © 2015 Haim Michael 20150807 Inheritance LifeMichael.com
  120. 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. 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. 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. 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. 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. 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. 126. © 2015 Haim Michael 20150807 The super Keyword LifeMichael.com
  127. 127. © 2015 Haim Michael 20150807 Generics LifeMichael.com
  128. 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. 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. 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. 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. 132. © 2015 Haim Michael 20150807 Generics Class LifeMichael.com
  133. 133. © 2015 Haim Michael 20150807 Generic Function  Whenever we call a generic function we should specify the missing type(s). LifeMichael.com
  134. 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. 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. 136. © 2015 Haim Michael 20150807 Generic Function LifeMichael.com
  137. 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. 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. 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. 140. © 2015 Haim Michael 20150807 Generic Function LifeMichael.com
  141. 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. 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. 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. 144. © 2015 Haim Michael 20150807 Generic Constraints LifeMichael.com
  145. 145. © 2015 Haim Michael 20150807 Interfaces LifeMichael.com
  146. 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. 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. 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. 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. 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. 151. © 2015 Haim Michael 20150807 Abstract Type LifeMichael.com
  152. 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. 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. 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. 155. © 2015 Haim Michael 20150807 Structure Definition LifeMichael.com
  156. 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. 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. 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. 159. © 2015 Haim Michael 20150807 Structure Definition LifeMichael.com
  160. 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. 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. 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. 163. © 2015 Haim Michael 20150807 Optional Properties LifeMichael.com
  164. 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. 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. 166. © 2015 Haim Michael 20150807 Describing Function Type LifeMichael.com
  167. 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. 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. 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. 170. © 2015 Haim Michael 20150807 Describing Array Types LifeMichael.com
  171. 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. 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. 173. © 2015 Haim Michael 20150807 Enum LifeMichael.com
  174. 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. 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. 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. 177. © 2015 Haim Michael 20150807 Exceptions LifeMichael.com
  178. 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. 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. 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. 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. 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. 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. 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. 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. 186. © 2015 Haim Michael 20150807 Sample LifeMichael.com
  187. 187. © 2015 Haim Michael 20150807 Modules LifeMichael.com
  188. 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. 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. 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. 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. 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. 193. © 2015 Haim Michael 20150807 The export Statement LifeMichael.com
  194. 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. 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. 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. 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. 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. 199. © 2015 Haim Michael 20150807 Separated Files LifeMichael.com
  200. 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. 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. 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. 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. 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. 205. © 2015 Haim Michael 20150807 Runtime LifeMichael.com
  206. 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. 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. 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. 209. © 2015 Haim Michael 20150807 Variables Scope LifeMichael.com
  210. 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. 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. 212. © 2015 Haim Michael 20150807 The let Keyword LifeMichael.com
  213. 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. 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. 215. © 2015 Haim Michael 20150807 One Single Thread LifeMichael.com
  216. 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. 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. 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. 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);

×