1 / 14

Type Script Fundamentals PDF Tutorial for Programmers

This PPT is all about the fundamentals on Type Script. For This is the best tutorial for the programmers who wants to learn on Type Script.

ifourtechnolab
Télécharger la présentation

Type Script Fundamentals PDF Tutorial for Programmers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/

More Related