Quick Reference To TypeScript

Shamim Uddin
8y
9k
0
7

Article

Table of Contents

What is TypeScript
Data Type
Enum
Function
Function Overloading
Class & Object
Constructor
Inheritance
Access Modifiers
Static Functions & Properties
Interface

What is TypeScript?

TypeScript is a superset of JavaScript which is an optional static typing and class based object oriented programming language. There are object oriented programming features like Class, Constructor, Object, Interface and they always support primary data type. OOP concept may be implemented in this language. TypeScript’s code is more readable than JavaScript and it is open source and free. It is developed by Microsoft which announced it in October 2012.

Now, we will create a simple application.

Let’s get started.

Let’s create a new project with Visual Studio 2015 > File > New > Project.

New

Once click OK button, a project with need TypeScript’s reference will be created.

We can see in the above picture, app.css file is CSS file. You can keep your CSS style codes in this file. Let's look at app.ts. It’s a TypeScript file. The ts extension means TypeScript file where you can always keep your TS code.

Create ts file

Right click on your project >>click add>>click JavaScript file and give name as“Welcome.ts”. Now, click OK.

// Class name welcome
class welcome {
element: HTMLElement;
// constructor
constructor(element: HTMLElement) {
this.element = element;
this.element.innerHTML = "Welcome To TypeScript";
}
}
// window onload event, when page open then call this onload event
window.onload = () => {
// get html divcontent
var elh = document.getElementById('divcontent');
// create new object and call constructor with elh paramitter
var _welcomeobj = new welcome(elh);
};

We have created Welcome class. There are element properties and a constructor which take a parameter. This parameter’s type is HTMLElement. When we create instance of welcome class, then it automatically calls the constructor. We have just given div id which is index page. We know how to get div id using JavaScript. For catching div id, we have used document.getElementById. "Welcome To Typescript" has been assigned to the constructor.

Create Index Page

Now, we will create Index.html page for showing our result on browser. Given below is the code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Fisrt TypeScript's Application</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="Welcome.js"></script>
</head>
<body>
<h1>My Fisrt TypeScript's Application</h1>
<div id="divcontent"></div>
</body>
</html>

We have just added Welcome.js reference on index.html page. Because, we have used Welcome.js for our coding, it is our Typescript file.

Finally, we get the result.

result

Data Types in TypeScript

We know that every programming language has basically two data types - primitive and custom. Here, we know the primitive data types include Boolean, Number, String, Any, Array, Enum.

Syntax

Syntax

Create ts file

class DataType
{
// boolean Type
Status: boolean = true; // output ture
// number Type
Amount: number = 100; // output 100
// number always support like decimal,hex,binary,octal
Price: number = 50.5; // output 50.5
// string Type
Subject: string = "TypeScript"; // TypeScript
// any like dynamic type
Value: any = 5;
// we know that when class object will be Created then automatic call constructor,
constructor() {
console.log(this.Status);
console.log(this.Amount);
console.log(this.Price);
console.log(this.Subject);
console.log(this.Value);
}
}
window.onload = () => {
// Create class object
var val = new DataType();
}

Let’s explain the data types.

Boolean

// boolean Type
Status: boolean = true; // output ture

We can see that in the above line, Status variable has bolo type data. If we keep string or number type data in Status variable, then it will show error.

String

Subject: string = "TypeScript"; //output is TypeScript
Name: string = 'Mamun'; //output is Mamun

String is textual data. Double quotes (“) or single quotes(‘) are used in TypeScript for defining the string. String data type shows error without double quotes or single quotes.

Number

Number is a very interesting data type in TypeScript. Number can take the form of:

Decimal
decimal: number = 10;
Hexadecimal
hex: number = 0xf00d;
Binary
binary: number = 001101;
Octal
octal: number = 00744;

Enum

Enum is a helpful addition to the standard set of data types from JavaScript. Data is stored in enum. Enum’s data cannot be modified without enum block. Enums number their members starting from 0, by default, but it can be changed manually.

Create ts file

enum SalaryHead
{
// these are %
Basic = 50,
Houserent = 30,
Medical = 10,
Conveyance = 10
}
class SalaryCal
{
// let gross salary is 50000,Gross Salary will be given from IU in real wrold
Gross: number = 50000;
// Calculate Basic from gross slary
BasicSalary: number = (this.Gross * SalaryHead.Basic) / 100;
// Calculate House Rent from gross slary
Houserent: number = (this.Gross * SalaryHead.Houserent) / 100;
// Calculate Medical from gross slary
Medical: number = (this.Gross * SalaryHead.Medical) / 100;
// Calculate Conveyance from gross slary
Conveyance: number = (this.Gross * SalaryHead.Conveyance) / 100;
// we can not modify enum valu without enum block
// SalaryHead.Basic=60;
constructor() {
// Now we will check sum of salary head and gross are equal.
if ((this.BasicSalary + this.Houserent + this.Medical + this.Conveyance) == this.Gross) {
console.log("Both are equal");
} else {
console.log("Both are not equal");
}
}
}
window.onload = () => {
// Create class object
var val = new SalaryCal();
}

Let’s explain Enum.

Above, we can see that we have declared enum named “SalaryHead” and assigned some enum property. When these properties are needed to be used in our application, just call enum. But enum’s property never changes without enum scope. Now, if enum’s property is called, then we get an assigned value.

Other code

enum Status {
IsDelete,
IsPending,
IsApprove
};

Above is the Status of enum which contains three statuses, IsDelete, IsPending, and IsApprove.

Now, call Status[0]

Output

IsDelete

Function

What is Function?

Group of statements performed together to solve a specific task. Every function should solve a single task.There are some reasons why we use function-

Organization
Re-usability
Testing
Extensibility
Abstraction

The function can be created in both ways, as a named function and as an anonymous function, in Type Script.

Named function without parameters -

function GetFullName(): string
{
return "Toufique Rahman Tshovon";
}
var Name = GetFullName();
console.log(Name);

Let’s explain the code.

GetFullName is a function name which does not use any parameter and returns string. Function and return are keywords. Return keyword returns value.

Output - Toufique Rahman Tshovon

Named function with parameters -

function GetFullName(firstName: string, lastName: string): string
{
return firstName + " " + lastName;
}
var Name = GetFullName("Shamim", "Uddin");
console.log(Name);

Let’s explain this code.

GetFullName is a function name which has taken two parameters- firstName and lastName. Both are string types. firstName and lastName have been concatenated here.

Output: Shamim uddin

Anonymous function without parameter-

var Name = function(): string
{
return "Toufique Rahman Tshovon";
}
console.log(Name());

Let’s explain the code.

There are no method names, but the Name variable holds the function to perform, which has no parameter.

Output: Toufique Rahman Tshovon

Anonymous function with parameter -

var Name = function(firstName: string, lastName: string): string
{
return firstName + " " + lastName;
}
console.log(Name("Shamim", "Uddin"));

Let’s explain the code

There are no method names, but the Name variable holds a function to perform which has two parameters - firstName and lastName, both string type. firstName and lastName are concatenated here.

Default Arguments

function add(firstnumber: number, secondNumber: number = 10): number
{
return firstnumber + secondNumber;
}
console.log(add(10));

Output: 20

Let’s get an explanation about code

We have assigned default argument in secondNumber. if do not pass secondNumber then by default will be assigned 10, but if we pass secondNumber then secondNumber will be assigned like,

function add(firstnumber: number, secondNumber: number = 10): number
{
return firstnumber + secondNumber;
}
console.log(add(10, 30));

Output: 40

Function Overloading

Function overloading or Method overloading is able to create multiple methods of the same name with different signatures or different parameters.

Let’s go.

Given below is the code.

function Add(firstNumber: number, secondNumber: number)
function Add(firstNumber: number, secondNumber: number, thirdNumber:number)
function Add(firstNumber: number, secondNumber: number, thirdNumber:number, forthNumber: number);
function Add(firstNumber ? : number, secondNumber ? : number, thirdNumber ? : number, forthNumber ? : number): number {
var result = 0;
if (firstNumber != undefined && secondNumber != undefined && thirdNumber != undefined && forthNumber != undefined) {
result = firstNumber + secondNumber + thirdNumber + forthNumber;
} else if (firstNumber != undefined && secondNumber != undefined && thirdNumber != undefined) {
result = firstNumber + secondNumber + thirdNumber;
} else if (firstNumber != undefined && secondNumber != undefined) {
result = firstNumber + secondNumber;
}
return result;
}
console.log(Add(1, 2));
console.log(Add(1, 2, 2));
console.log(Add(1, 2, 2, 5));

Let’s explain the code,

function Add(firstNumber: number, secondNumber: number)

Add is a function with two parameters.

function Add(firstNumber: number, secondNumber: number, thirdNumber:number)

Add is a function with three parameters.

function Add(firstNumber: number, secondNumber: number, thirdNumber:number, forthNumber: number);

Add is a function which has four parameters.

There are three methods with same name but they have different number of parameters.

function Add(firstNumber ? : number, secondNumber ? : number, thirdNumber ? : number, forthNumber ? : number): number
{
var result = 0;
if (firstNumber != undefined && secondNumber != undefined && thirdNumber != undefined && forthNumber != undefined) {
result = firstNumber + secondNumber + thirdNumber + forthNumber;
} else if (firstNumber != undefined && secondNumber != undefined && thirdNumber != undefined) {
result = firstNumber + secondNumber + thirdNumber;
} else if (firstNumber != undefined && secondNumber != undefined) {
result = firstNumber + secondNumber;
}
return result;
}

Above, we have implemented our method. The result is a variable which is assigned the value 0 by default.

Class & Object

Class

A class is a template which contains attributes and methods. It is a kind of custom data type which is used to create unlimited objects.

class

Fig: Class structure

There are three sections in the above figure.

Class Name

You have to give a name to the class. Ex- Employee.

Attributes

You have to define class’s attributes. Let class name be Employee. You have to brainstorm for what should be the attributes. Ex- 1. FirstName. 2. LastName.

Method

You have to define what kind of task will you perform using this class. Ex-1. GetFullName() 2. GetReverseName()

Object

Object is an individual instance which is created from specific class.

Fig: Multiple object from class

We can see in the above picture that there is one Employee class and four objects of employee class. Unlimited object can be created. So, when you need to create an object, you can create one.

Let’s go to the code.

class Employee
{
// -----start attributes
public FirstName: string;
public LastName: string;
// -----end attributes
//------start Mehodes
public GetFullName(): string {
return this.FirstName + " " + this.LastName;
}
public GetReverseName(): string {
var fullName = this.GetFullName();
var reverse = '';
for (var i = fullName.length - 1; i >= 0; i--) reverse += fullName[i];
return reverse;
}
//------end Mehodes
}
// Onload event,when page load
window.onload = () => {
var aemployee = new Employee();
aemployee.FirstName = "Toufique";
aemployee.LastName = "Rahman";
var fullName = aemployee.GetFullName();
var reverseName = aemployee.GetReverseName();
document.getElementById('fulName').innerHTML = fullName;
document.getElementById('reverseName').innerHTML = reverseName;
};

Let’s explain the code.

class Employee
Class Name Employee
public FirstName: string;
public LastName: string;
Both lines are class attributes.
public GetFullName(): string {
return this.FirstName + " " + this.LastName;
}
public GetReverseName(): string {
var fullName = this.GetFullName();
var reverse = '';
for (var i = fullName.length - 1; i >= 0; i--) reverse += fullName[i];
return reverse;
}

There are two methods in the above code - GetFullName() and Ger ReverseName().

var aemployee = new Employee();
Object has created which name is aemployee.
aemployee.FirstName = "Toufique";
aemployee.LastName = "Rahman";

Class’s attributes have been assigned as FirstName and LastName.

var fullName = aemployee.GetFullName();
var reverseName = aemployee.GetReverseName();

Two methods have been called and kept in variable.

document.getElementById('fulName').innerHTML = fullName;
document.getElementById('reverseName').innerHTML = reverseName;

These are simple JavaScript codes - get html tag and assign value.

Constructor

Constructor is one kind of special method. It is called by default when we create an object of a class.

Example

Below is the code of Employee class.

class Employee
{
public FirstName: string;
public LastName: string;
constructor(firstName: string, lastName: string) {
this.FirstName = firstNmae;
this.LastName = lastName;
}
public GetFullName(): string {
return this.FirstName + "" + this.LastName;
}
}

Call Employee class

Let get the code explained.

Above, we see that there is a constructor which has two parameters - firstName and lastName. Both parameters are assigned to the FirstName and LastName attributes of Employee class.

Created object of Employee class.

var aemployee = new Employee("Toufique", "Rahman");

Note:

Multiple constructor implementations are not allowed.
If constructor is in class with parameter, then without passing an argument, Object creation is impossible.

Inheritance

Inheritance is one of the basic elements of object oriented programming language. It defines the relationship between different classes and common type. This relationship is called IS-A Relationship.

Fig: Inheritance relationship between two class

Base Class

class PermanentEmployee
{
public FirstName: string;
public LastName: string;
constructor(firstName: string, lastName: string)
{
this.FirstName = firstName;
this.LastName = lastName;
}
public GetFullName(): string
{
return this.FirstName + " " + this.LastName;
}
public GetReverseName(): string
{
var fullName = this.GetFullName();
var reverse = '';
for (var i = fullName.length - 1; i >= 0; i--) reverse += fullName[i];
return reverse;
}
}

Sub Class

class TemporaryEmployee extends PermanentEmployee
{
public JobDuration: string;
constructor(firstName: string, lastName: string) {
super(firstName, lastName);
}
}
var employeeObj = new TemporaryEmployee("Toufique", "Rahman");
var fullName = employeeObj.GetFullName();
var reverseName = employeeObj.GetReverseName();

Let’s explain the code.

Here, Base class is PermanentEmployee.

class PermanentEmployee {

Attributes

public FirstName: string;
public LastName: string;

Constructor has two parameters, firstName and lastName. Both are assigned to attributes.

constructor(firstName: string, lastName: string)
{
this.FirstName = firstName;
this.LastName = lastName;
}

Two methods- GetFullName,

public GetFullName(): string {
return this.FirstName + " " + this.LastName;
}

and GetReverseName,

public GetReverseName(): string
{
var fullName = this.GetFullName();
var reverse = '';
for (var i = fullName.length - 1; i >= 0; i--) reverse += fullName[i];
return reverse;
}

Sub class is TemporaryEmployee.

class TemporaryEmployee extends PermanentEmployee {

Here, TemporaryEmployee class inherits PermanentEmployee class using extends keyword. Now, we can access PermanentEmployee.

Attribute

public JobDuration: string;

Constructor

constructor(firstName: string, lastName: string) { super(firstName, lastName); }

Constructor has taken two parameters. Parameters values are assigned to basic class’s constructor using super keyword.

TemporaryEmployee class’s object is created here.

var employeeObj = new TemporaryEmployee("Toufique", "Rahman");
var fullName = employeeObj.GetFullName();
var reverseName = employeeObj.GetReverseName();

Created object employeeobj, then passed two attributes for constructor.

Interestingly, we can access GetFullName and GetReverseName in sub class (TemporaryEmployee). Initially, these were defined in base class (PermanentEmployee). Now, we can access these in sub class (TemporaryEmployee) also for IS-A Relationship.

Access Modifiers

TypeScript has three type of access modifiers- public, private, and protected.
Access modifiers prevent the misuse of class members (functions and properties).
If we do not use any access modifier, TypeScript sets "public access modifier" to all the class members (functions or properties), by default.

Public Access

If use public access modifier, the members (functions or properties) can be accessed anywhere in the code freely. Like, Base class or Sub Class.

Example

Lets get the code explanation.

class SavingAccount
{
public AccountNo: string;
private Amount: number;
constructor(accountNo: string) {
this.AccountNo = accountNo;
}
public Deposit(amount: number): string {
this.Amount = amount;
return "Deposit Successfully.";
}
public withdraw(amount: number): string {
this.Amount = amount;
return "withdraw Successfully.";
}
public TotalAmount(): number {
return this.Amount;
}
}
var _savingAccount = new SavingAccount("sav0234232");
_savingAccount.Deposit(1000);
_savingAccount.withdraw(500);
_savingAccount.TotalAmount();

All Public members in class have been called by object reference of SavingAccount class, and public members always call sub class.

Private Access

If we use private access modifier, the members can be accessed within self class by its other class members (functions) only.

Example

Let's get it in code.

class SavingAccount
{
public AccountNo: string;
private Amount: number;
constructor(accountNo: string) {
this.AccountNo = accountNo;
}
public Deposit(amount: number): string {
this.Amount = amount;
return "Deposit Successfully.";
}
public withdraw(amount: number): string {
this.Amount = amount;
return "withdraw Successfully.";
}
public TotalAmount(): number {
return this.Amount;
}
}
var _savingAccount = new SavingAccount("sav0234232");

When we call Amount properties which is private properties, we get error.

Access

In the above code, we can see that Amount property is used in TotalAmount Function which is in SavingAccount class. So, we can easily use this Amount property.

Protected Access

If we use protected access modifier, the members can be accessed within sub class. Otherwise, this access modifier cannot be accessed.

Example

class Account {
public AccountNo: string;
protected Amount: number;
constructor(accountNo: string) {
this.AccountNo = accountNo;
}
public Deposit(amount: number): string {
this.Amount = amount;
return "Deposit Successfully.";
}
public withdraw(amount: number): string {
this.Amount = amount;
return "withdraw Successfully.";
}
protected TotalAmount(): number {
return this.Amount;
}
}

When we call protected member of this class by using this class’s object, we get error.

error

Protected is like private.

Sub Class

class SavingAccount extends Account {
constructor(accountNo: string) {
super(accountNo);
}
// Amount propertices is a protected which is base class
public TotalAmount(): number {
return this.Amount;
}
}
var _savingAccount = new SavingAccount("Sav-43434");
_savingAccount.Deposit(1000);
_savingAccount.withdraw(500);

In the above code, we can see that Amount property is used in TotalAmount function which is protected and exists in base class. From the above code, we know that protected member is used within Sub class, otherwise we cannot use this.

Static Function & Properties

Static functions and properties can only be called by their class reference and cannot be called by an object reference. Sometimes, we need to void unnecessary created object; that time, we use Static.

Example

class Calculator
{
public static FirstNumber: number;
public static SecondNumber: number;
public static addTowNumber(): number {
return this.FirstNumber + this.SecondNumber;
}
}
Calculator.FirstNumber = 10;
Calculator.SecondNumber = 30;
Calculator.addTowNumber()

Let’s get the code explained.

In the above code, there are two static properties and one static function .When those properties and functions are called, then we do not have the need of creating objects. Those are called by Class Name.

Like,

Calculator.FirstNumber = 10;
Calculator.SecondNumber = 30;
Calculator.addTowNumber()

Interface

Interface is object oriented syntax which is used to manage application beauty. That means that Class and Method are ready. We just call and we will implement this method by itself. Method’s name will remain same in whole application.

Interface class

interface iGenericFactory {
Save(): void;
Update(): void;
delete(): void
}