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/