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
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
❏ 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 −
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
❏ 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.
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 −
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 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.
1. Client Side - RequireJs
2. 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/
![❑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/](https://image.slidesharecdn.com/type-script-fundamentals-250506022110-3b752e64/85/Type-Script-Fundamentals-Type-Script-Fundamentals-8-320.jpg)
![❑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 −
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/](https://image.slidesharecdn.com/type-script-fundamentals-250506022110-3b752e64/85/Type-Script-Fundamentals-Type-Script-Fundamentals-9-320.jpg)
