Type-Script-Fundamentals Type-Script-Fundamentals

Type-Script-Fundamentals Type-Script-Fundamentals

• 1.
  iFour Consultancy TypeScript Fundamentals https://www.ifourtechnolab.com/
• 2.
  Index ❏ Introduction ❏ Whatis TypeScript? ❏ Features of TypeScript ❏ Types ❏ Declaring Variables ❏ Arrow Functions ❏ Interfaces, Classes, Objects, Constructors ❏ Access Modifiers ❏ Properties ❏ Modules https://www.ifourtechnolab.com/
• 3.
  ❑Introduction ❏ TypeScript letsyou write JavaScript the way you really want to. ❏ TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. ❏ TypeScript is pure object oriented with classes, interfaces and statically typed like C# or Java. ❏ The popular JavaScript framework Angular 2.0 and Above are written in TypeScript. ❏ Mastering TypeScript can help programmers to write object- oriented programs and have them compiled to JavaScript, both on server side and client side. ❏ You should have a good understanding of OOP concepts and basic JavaScript https://www.ifourtechnolab.com/
• 4.
  ❑What is TypeScript? ❏By definition, “TypeScript is JavaScript for application-scale development.” ❏ TypeScript is a strongly typed, object oriented, compiled language. ❏ It was designed by Anders Hejlsberg (designer of C#) at Microsoft. ❏ TypeScript is both a language and a set of tools. ❏ TypeScript is a typed superset of JavaScript compiled to JavaScript. ❏ In other words, TypeScript is JavaScript plus some additional features. https://www.ifourtechnolab.com/
• 5.
  ❑Features of TypeScript ❏TypeScript is just JavaScript. ❏ TypeScript supports other JS libraries. ❏ Compiled TypeScript can be consumed from any JavaScript code. ❏ TypeScript-generated JavaScript can reuse all of the existing JavaScript frameworks, tools, and libraries. ❏ JavaScript is TypeScript. (like .ts / .js) ❏ TypeScript is portable. ❏ TypeScript and ECMAScript https://www.ifourtechnolab.com/
• 6.
  ❑Types ❏ number :Double precision 64-bit floating point values. It can be used to represent both, integers and fractions. ❏ string :Represents a sequence of Unicode characters ❏ boolean :Represents logical values, true and false ❏ void :Used on function return types to represent non-returning functions ❏ null :Represents an intentional absence of an object value. ❏ undefined :Denotes value given to all uninitialized variables ❏ User-defined types include 1. Enumerations (enums), 2. classes, 3. interfaces, 4. arrays, and 5. tuple. https://www.ifourtechnolab.com/
• 7.
  ❑Declaring Variables var name:string = ”iFour"; var score1: number = 50; var score2: number = 42.50 var sum = score1 + score2 Variable Declaration in TypeScript TypeScript variables must follow the JavaScript naming rules − 1. Variable names can contain alphabets and numeric digits. 2. They cannot contain spaces and special characters, except the underscore (_) and the dollar ($) sign. 3. Variable names cannot begin with a digit. https://www.ifourtechnolab.com/
• 8.
  ❑Interfaces, Classes, Objects,Constructors Syntax: interface interface_name { } Example: interface Person { firstName: string, lastName: string, sayHi: () => string } customer: Person = { firstName:“iFour", lastName:“TechnoLab", sayHi: ():string =>{return "Hi there"} } Syntax: class class_name { //class scope } Example: class Car { engine: string; //field constructor(engine:string) { //constructor this.engine = engine } disp():void { //function console.log("Engine is : "+ this.engine) } } var object_name = new class_name([ arguments ]) https://www.ifourtechnolab.com/
• 9.
  ❑Arrow Functions ❏ Arrowfunction refers to anonymous functions in programming. ❏ Arrow functions are a concise mechanism to represent anonymous functions. ❏ There are 3 parts to a Arrow function − 1. Parameters − A function may optionally have parameters 2. The fat arrow notation/lambda notation (=>) − It is also called as the goes to operator 3. Statements − represent the function’s instruction set ❏ It is an anonymous function expression that points to a single line of code. Its syntax is as follows − ( [param1, parma2,…param n] )=>statement; Example var iFour= (x:number)=> { x = 10 + x console.log(x) } iFour(100); https://www.ifourtechnolab.com/
• 10.
  ❑Access Modifiers ❏ Aclass can control the visibility of its data members to members of other classes. ❏ This capability is termed as Data Hiding or Encapsulation. ❏ Object Orientation uses the concept of access modifiers or access specifiers to implement the concept of Encapsulation. ❏ The access specifiers/modifiers define the visibility of a class’s data members outside its defining class. 1. Public 2. Private 3. Protected https://www.ifourtechnolab.com/
• 11.
  ❑Modules ❏ A moduleis designed with the idea to organize code written in TypeScript. ❏ Modules are broadly divided into − 1. Internal Modules - Internal modules came in earlier version of Typescript. - This was used to logically group classes, interfaces, functions into one unit and can be exported in another module. - This logical grouping is named namespace in latest version of TypeScript. 2. External Modules - External modules in TypeScript exists to specify and load dependencies between multiple external js files. - If there is only one js file used, then external modules are not relevant. https://www.ifourtechnolab.com/
• 12.
  ❑Modules Examples Internal ModuleSyntax (Old) Syntax: module iFourModule { export function add(x, y) { console.log(x+y); } } Namespace Syntax (New) Syntax: namespace iFourModule { export function add(x, y) { console.log(x + y);} } JavaScript generated in both cases are same var iFourModule ; (function (iFourModule) { function add(x, y) { console.log(x + y); } iFourModule .add = add; })(iFourModule || (iFourModule = {})); External Module There are two scenarios for loading dependents js files from a single main JavaScript file. 1. Client Side - RequireJs 2. Server Side - NodeJs https://www.ifourtechnolab.com/
• 13.
  ❑Ambient ❏ Ambient declarationsare a way of telling the TypeScript compiler that the actual source code exists elsewhere. ❏ When you are consuming a bunch of third party js libraries like jquery/angularjs/nodejs you can’t rewrite it in TypeScript. ❏ Ensuring typesafety and intellisense while using these libraries will be challenging for a TypeScript programmer. ❏ Ambient declarations help to seamlessly integrate other js libraries into TypeScript. ❏ Defining Ambients Ambient declarations are by convention kept in a type declaration file with following extension (d.ts) Example : iFour.d.ts Syntax declare module Module_Name { } https://www.ifourtechnolab.com/
• 14.
  Thank you https://www.ifourtechnolab.com/