iFour Consultancy

TypeScript Fundamentals

https://www.ifourtechnolab.com/
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/
❑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/
❑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/
❑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/
❑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/
❑Declaring Variables

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
var name: string = ”iFour"; the underscore (_) and the
dollar ($) sign.
var score1: number = 50;
3. Variable names cannot begin
var score2: number = 42.50 with a digit.
var sum = score1 + score2

https://www.ifourtechnolab.com/
❑Interfaces, Classes, Objects, Constructors
Syntax:
Syntax:
interface interface_name {
class class_name {
}
//class scope
}
Example:
Example:
interface Person {
class Car {
firstName: string,
engine: string; //field
lastName: string,
constructor(engine:string) { //constructor
sayHi: () => string
this.engine = engine
}
}
disp():void { //function
customer: Person = {
console.log("Engine is : "+ this.engine)
firstName:“iFour",
}
lastName:“TechnoLab",
}
sayHi: ():string =>{return "Hi there"}
var object_name = new class_name([ arguments ])
}

https://www.ifourtechnolab.com/
❑Arrow Functions

❏ Arrow function refers to anonymous functions in

programming.
❏ Arrow functions are a concise mechanism to represent
anonymous functions. Example
❏ There are 3 parts to a Arrow function −
1. Parameters − A function may optionally have parameters var iFour= (x:number)=> {
2. The fat arrow notation/lambda notation (=>) − It is also called as x = 10 + x
the goes to operator console.log(x)
3. Statements − represent the function’s instruction set }
❏ It is an anonymous function expression that points to a single iFour(100);
line of code. Its syntax is as follows −
( [param1, parma2,…param n] )=>statement;

https://www.ifourtechnolab.com/
❑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/
❑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/
❑Modules Examples
JavaScript generated in both cases are same
Internal Module Syntax (Old)
var iFourModule ;
Syntax: (function (iFourModule) {
module iFourModule { function add(x, y) {
export function add(x, y) { console.log(x + y);
console.log(x+y); }
} iFourModule .add = add;
} })(iFourModule || (iFourModule = {}));

Namespace Syntax (New)

Syntax:
namespace iFourModule { External Module
export function add(x, y) There are two scenarios for loading dependents js files from a single main JavaScript
{ console.log(x + y);} file.
} 1. Client Side - RequireJs
2. Server Side - NodeJs

https://www.ifourtechnolab.com/
❑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/
 Thank you

https://www.ifourtechnolab.com/