Type Script Fundamentals PDF Tutorial for Programmers - PowerPoint PPT Presentation

View by Category
About This Presentation
Title:

Type Script Fundamentals PDF Tutorial for Programmers

Description:

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. – PowerPoint PPT presentation

Number of Views:7

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Type Script Fundamentals PDF Tutorial for Programmers


1
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
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.
  • var name string iFour"
  • var score1 number 50
  • var score2 number 42.50
  • var sum score1 score2

https//www.ifourtechnolab.com/
8
Interfaces, Classes, Objects, Constructors
Syntax interface interface_name
Example interface Person firstName
string, lastName string, sayHi () gt
string customer Person
firstNameiFour", lastNameTechnoLab",
sayHi ()string gtreturn "Hi there"
Syntax class class_name //class scope
Example class Car engine string
//field constructor(enginestring)
//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 (gt) - It
    is also called as the goes to operator
  • Statements - represent the functions 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 )gtstatement

Example var iFour (xnumber)gt 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 classs data members outside its
    defining class.
  1. Public
  2. Private
  3. 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(xy) 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 cant
    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/
About PowerShow.com