Type Script Fundamentals PDF Tutorial for Programmers

1. TypeScript Fundamentals iFour Consultancy https://www.ifourtechnolab.com/

2. Index • Introduction • What is TypeScript? • Features of TypeScript • Types • Declaring Variables • Arrow Functions • Interfaces, Classes, Objects, Constructors • Access Modifiers • Properties • Modules https://www.ifourtechnolab.com/

3. Introduction • TypeScript lets you 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 • Enumerations (enums), • classes, • interfaces, • arrays, and • 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 − • Variable names can contain alphabets and numeric digits. • They cannot contain spaces and special characters, except the underscore (_) and the dollar ($) sign. • 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 • Arrow function refers to anonymous functions in programming. • Arrow functions are a concise mechanism to represent anonymous functions. • There are 3 parts to a Arrow function − • Parameters − A function may optionally have parameters • The fat arrow notation/lambda notation (=>) − It is also called as the goes to operator • 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 • A class 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. • Public • Private • Protected https://www.ifourtechnolab.com/

11. Modules • A module is designed with the idea to organize code written in TypeScript. • Modules are broadly divided into − • 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. • 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 Module Syntax (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. • Client Side - RequireJs • Server Side - NodeJs https://www.ifourtechnolab.com/

13. Ambient • Ambient declarations are 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/