Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

002. Introducere in type script

271 views

Published on

TypeScript

Published in: Education
  • Be the first to comment

  • Be the first to like this

002. Introducere in type script

  1. 1. • TypeScript este un limbaj de programare liber și deschis, dezvoltat și întreținut de Microsoft. Este o suprasetare strict sintactică a JavaScript-ului și adaugă programarea optimă statică și programarea orientată pe obiecte pe bază de clase a limbajului.
  2. 2. Anders Hejlsberg Arhitectul principal al lui C# și creatorul lui Delphi și al lui Turbo Pascal, a lucrat la dezvoltarea TypeScript. TypeScript poate fi folosit pentru a dezvolta aplicații JavaScript pentru execuția pe partea clientului sau a serverului (Node.js).
  3. 3. Features of TypeScript ITVDN • TypeScript is just JavaScript; • TypeScript supports other JS libraries; • JavaScript is TypeScript; • TypeScript is portable.
  4. 4. Why Use TypeScript? • Compilation • Strong Static Typing • TypeScript supports type definitions for existing JavaScript libraries • TypeScript supports Object Oriented Programming
  5. 5. Components of TypeScript • Language: It comprises of the syntax, keywords, and type annotations. • The TypeScript Compiler: The TypeScript compiler (tsc) converts the instructions written in TypeScript to its JavaScript equivalent. • The TypeScript Language Service: The language service supports the common set of a typical editor operations like statement completions, signature help, code formatting and outlining, colorization, etc.
  6. 6. TypeScript ─ Try it Option Online http://www.typescriptlang.org/play/
  7. 7. The TypeScript Compiler
  8. 8. Installation 1. Node.js and NPM 2. npm install -g typescript 3. Configuration IDE 4. …
  9. 9. A TypeScript program is composed of: • Modules; • Functions; • Variables; • Statements and Expressions; • Comments.
  10. 10. Compile and Execute a TypeScript Program Step 1: Save the file with .ts extension. Step 2: Command Prompt: tsc Test.ts or node Test.js
  11. 11. Compiler Flags
  12. 12. Identifiers in TypeScript
  13. 13. TypeScript – Types
  14. 14. Built-in types
  15. 15. Variable Declaration in TypeScript
  16. 16. TypeScript Variable Scope var global_num=12 //global variable class Numbers { num_val=13; //class variable static sval=10; //static field storeNum():void { var local_num=14; //local variable } } console.log("Global num: "+global_num) console.log(Numbers.sval) //static variable var obj= new Numbers(); console.log("Global num: "+obj.num_val)
  17. 17. TypeScript ─ Operators • Arithmetic operators • Logical operators • Relational operators • Bitwise operators • Assignment operators • Ternary/conditional operator • String operator • Type Operator
  18. 18. Arithmetic Operators
  19. 19. Relational Operators
  20. 20. Logical Operators
  21. 21. Assignment Operators
  22. 22. Conditional Operator (?) Test ? expr1 : expr2 • Test: refers to the conditional expression • expr1:value returned if the condition is true • expr2: value returned if the condition is false var num:number=-2 ; var result= num > 0 ?"positive":"non-positive" console.log(result);
  23. 23. Type Operators var num=12 console.log(typeof num); //output: number
  24. 24. TypeScript ─ Decision Making if(boolean_expression) { // statement(s) will execute if the Boolean expression is true } else { // statement(s) will execute if the Boolean expression is false } var num:number = 12; if (num % 2==0) { console.log("Even"); } else { console.log("Odd"); }
  25. 25. switch(variable_expression) { case constant_expr1: {//statements; break; } case constant_expr2: { //statements; break; } default: { //statements; break; } } var grade = "A"; switch (grade) { case "A": { console.log("Excellent"); break; } case "B": { console.log("Good"); break; } case "C": { console.log("Fair"); break; } case "D": { console.log("Poor"); break; } default: { console.log("Invalid choice"); break; } }
  26. 26. TypeScript ─ Loops
  27. 27. The while Loop while(condition) { // statements if the condition is true } var num:number=5; var factorial:number=1; while(num >=1) { factorial=factorial * num; num--; } console.log("The factorial is "+factorial);
  28. 28. The for Loop for ( initial_count_value; termination-condition; step) { //statements } var num:number= 5; var i:number; var factorial=1; for( i=num; i>=1; i--) { factorial*=i; } console.log(factorial)
  29. 29. The for...in loop for (var val in list) { //statements } var j:any; var n:any=“abc" for(j in n) { console.log(n[j]) }
  30. 30. The do…while loop Do { //statements }wh var n:number=10; do { console.log(n); n--; }while(n>=0);
  31. 31. TypeScript – Functions function function_name() :return_type { //statements return value; } function greet() { return "Hello World"; } function caller() { var msg = greet(); //function greet() invoked console.log(msg); } //invoke function caller();
  32. 32. Parameterized Function function test_param(n1:number,s1:string) { console.log(n1) console.log(s1) } test_param(123,"this is a string")
  33. 33. Rest Parameters function addNumbers(...nums:number[]) { var i; var sum:number=0; for(i=0;i<nums.length;i++) { sum=sum+nums[i]; } console.log("sum of the numbers",sum) } addNumbers(1,2,3) addNumbers(10,10,10,10,10)
  34. 34. Anonymous Function var msg= function() { return "hello world"; } console.log(msg()) ----------------------------------------------------- var res=function(a:number,b:number) { return a*b; }; console.log(res(12,2))
  35. 35. The Function Constructor var res=new Function( [arguments] ) { ... } ------------- var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3); console.log(x);
  36. 36. Lambda Expression It is an anonymous function expression that points to a single line of code. ( [param1, parma2,…param n] )=>statement; ----------------------------- var foo=(x:number)=>10+x console.log(foo(100)) //outputs 110
  37. 37. var display=x=> { console.log("The function got "+x) } display(12)
  38. 38. TypeScript ─ Numbers
  39. 39. TypeScript ─ Strings
  40. 40. TypeScript – Arrays var alphas:string[]; alphas=["1","2","3","4"] console.log(alphas[0]); console.log(alphas[1]); ---------------- var names = new Array("Mary", "Tom", "Jack", "Jill"); for (var i = 0; i < names.length; i++) { console.log(names[i]); }
  41. 41. Array Methods
  42. 42. Array Methods
  43. 43. Interfaces interface LabelledValue { label: string; } Function printLabel (labelledObj: LabelledValue) { console.log(labelledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj);
  44. 44. Optional Properties interface SquareConfig { color?: string; width?: number; }
  45. 45. Readonly properties interface Point { readonly x: number; readonly y: number; } let p1: Point = { x: 10, y: 20 }; p1.x = 5; // error!
  46. 46. Extending Interfaces interface Shape { color: string; } interface Square extends Shape { sideLength: number; } let square = <Square>{}; square.color = "blue"; square.sideLength = 10;
  47. 47. Implementing an interface interface ClockInterface { currentTime: Date; setTime(d: Date); } class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { } }
  48. 48. Classes class Student { fullName: string; constructor(public firstName, public middleInitial, public lastName) { this.fullName = firstName + " " + middleInitial + " " + lastName; } } interface Person { firstName: string; lastName: string; } function greeter(person : Person) { return "Hello, " + person.firstName + " " + person.lastName; } var user = new Student("Jane", "M.", "User"); document.body.innerHTML = greeter(user);
  49. 49. public - по умолчанию private - не может быть доступен вне этого класса protected - аналогично private за исключением того, что члены, объявленные protected, могут быть доступны в подклассах. readonly static - которые видны в классе без создания экземпляра

×