Ionic typescript LEARNOVITA

TypeScript Tutorial | A Step-By-Step Guide to Learn

Last updated on 18th Aug 2022, Blog, Tutorials

About author

Manish Pandey (IT DevOps Cloud Senior Engineer )

Manish Pandey is an IT DevOps Cloud Senior Engineer. He has expertise in Trending Domains like Data Science, Artificial Intelligence, Machine Learning, Blockchain, etc. His articles help the learners to get insights about the Domain.

(5.0) | 18578 Ratings 2087

Introduction to Typescript

Before starting with Ionic, it’s essential to own smart information about Angular.

Angular programs are written in matter.

But before staring at matter we’ll additionally take a quick Verify Node JS.

Node Js may be a server environment that runs JavaScript.

The best thanks to run matter is inside the node.

Node includes a package management system called npm, which stands for Node Package Manager.

NPM is that the world’s largest package repository.

It’s the foremost common mechanism to distribute open supply packages.

TypeScript, Angular and Node are created out there via node.

At the foremost basic level, it’s vital to urge a way of what matter is and what the artificial language feels like this can be done best by means that of sensible examples.

it’s suggested that you just attempt the examples during this tutorial before continuing to Ionic.

From the type script web site TypeScript may be a “typed” superset of JavaScript.

It compiles into plain JavaScript.

Ionic uses matter as a result of Angular.

And Angular uses matter. Hence,the requirement to find out matters.

Traditionally, enterprise languages are written in object bound programming languages that are climbable.

The first advantage of exploitation associate degree OOP language is that it will handle quality well.

As applications grow in size and age, they grow complicated.

The artificial language ought to permit building giant programs, whereas still staying standard.

TypeScript, in distinction to JavaScript is Object bound.

JavaScript may be a loosely typewritten language.

This suggests that you just don’t got to specify what reasonably information are hold on in an exceedingly variable earlier.

TypeScript is powerfully typewritten and forces you to specify the sort for variables that you just use.

This static writing is not mandatory.

Code editors like Visual Studio Code supply increased support for matter.

Further, JS files will be saved as matter files.


  • As mentioned on top of, matter is formed out there through node js. If you are doing not have node already put in, you’ll install it from:
  • Once you’ve got node put in, you’ve got node’s package manager out there. matter will be put in using: npm install -g matter
  • “-g” implies that matter is put in globally and may be accessed from any folder.
  • A further note on node ,TypeScript is compiled to JavaScript, and the JavaScript files are executed by node.
  • To be precise, node may be a JavaScript runtime surroundings, very similar to JRE for Java.
  • It contains everything that JavaScript must run.
  • It is engineered on Chrome’s JavaScript V8 Engine.
  • It converts JavaScript to computer code.
  • What will the JavaScript V8 Engine knock off Chrome/ Node Heap – Allocated memory Call Stack – Records wherever within the program we tend to are? that perform is being called?
  • It is single rib, meaning, it does you factor at a time Handles interference Behavior- within the past, the whole browser accustomed “freeze” once there was some process happening.
  • These things are queued in associate degree “Event Loop” till the stack is empty.
  • WebAPIs – It provides libraries similar to Ajax.

Why not write in JS directly?

Each browser has its own JavaScript Engine.

Chrome runs V8, Firefox runscSpiderMonkey, and web human, Chakra.

every has its own compatibility problems.

TypeScript compiles to JavaScript normal ECMAScript.

Browsers are compliant at completely different levels.

Therefore, matter will run on any browser.

TypeScript offers an improved set of tools like Intelligence, Debugging, etc.

Angular and Typescript

Angular two would may be a complete rewrite of AngularJS, that was written in JavaScript.

Microsoft accessorial annotations to matter language, and creating it the language for the event of the Angular two framework itself.

Code Editor/ IDE

Typescript data types

Download and install Visual Studio Code from

The typescript Language With this background, we tend to be smart and urge us to start with matter.

This can be a quick introduction so we all know enough to urge introduction to Angular/ Ionic.

Hello World

Create a replacement folder TypeScriptTutorial

Import the folder into Visual Studio Code.

And create a replacement file (Hello.ts) by right clicking on the folder within the folder and sort console.log(“Hello World”)

Save the file

Open the integrated terminal

Type tsc hullo.ts

You will notice that matter has been compiled into a JavaScript file hullo.js

On the electronic communication run node hello.

The JavaScript engine inside node can run the JavaScript file and print “Hello World” On the console

In addition to doing a “hello world” in matter, you currently savvy to import a folder and make files in matter.

You furthermore may currently savvy to run commands inside the editor.


A variable is employed to store, retrieve and manipulate info in an exceedingly artificial language.

Matter uses the key words let and const to declare variables.

  • let greeting = “hello world”
  • console.log(greeting)
  • const greeting2 = “hello world”
  • console.log(greeting2)

In the pictures higher than, it’s seen that Visual Studio Code flags the variable “a” with a mistake once it’s not initialized and once it’s reassigned a worth.

Variable sorts

TypeScript supports three information sorts. As mentioned earlier victimisation information sorts is elective.

  • Boolean
  • Number
  • String
  • let name : string = “Josh”
  • let age : number = 22
  • let isStudent : boolean = true
  • Variables can be assigned as null or undefined
  • let name : string = null
  • let name : string = undefined
  • Types are checked in compile time


An expression may be a combination of operators and operands.

Operands are often constants, variables or alternative expressions.

a= 12 * b + c;

12, b, c square measure operands within the expression and =,*,+ square measure operators.

TypeScript supports the subsequent operators:

  • Logical operators && (AND), || (OR), ! (NOT)
  • Relational operators >, =, 20?”smaller”:”larger”; can store “smaller” in TypeOf Operator “ volt-ampere a = 12; console.log(typeof a)” can come “number”
  • Bitwise operators & (AND). | (OR), ^ (XOR), ~ ( Not), > (Right Shift), >>> (Right shift with Zero)

Template Strings

A model string may be a string that is confined at intervals with back-tick characters (`).

It will embody expressions at intervals $. matter replaces placeholders with realvalues.

Model strings square measure a much better choice to use in comparison to string concatenation.

  • let name = ‘Josh’;
  • console.log(‘name ‘ + name)
  • let statement = `I am
  • ${name}`
  • console.log(statement)


An array may be an organisation that contains a gaggle of components.

Generally,these components square measure all of identical information kind, like variety or string.

Arrays square measure ordinarily utilized in pc programs to arrange information in order that a connected set of values are often simply sorted or searched.

You can declare associate degree array in two ways:

  • let list1 :number[] = [1,2,3]
  • let list2: Array<number> = [1,2,3]
  • String arrays
  • let list3: Array<string> = [‘1′,’2′,’3’]
  • let list4: Array<string> = [`1
  • ${list2}`,’2′,’3′]
  • console.log(list4)


Any is employed after you don’t seem to be certain what the information kind is.

Once a variable is asserted as “any” it are often assigned any value

  • let a :any;
  • a = “200”;
  • a = 200;
  • a = false;
  • console.log(a)


A tuple is an associate degree array of mounted length.

It permits multiple sorts in a very single array.

  • let student : [string,number] = [‘josh’,2]
  • console.log(student)

Type logical thinking

Type logical thinking happens in kindScript once there’s no specific information kind such and therefore the variable is initialized.

The following can work

  • let a
  • a = true
  • a= 1
  • The following can throw a mistake since the kind is inferred as number;
  • let a = 10
  • a = true

Union of sorts

TypeScript permits multiple sorts for one variable. you’ll be able to succeed this by victimisation of the pipe image within the variable declaration.

This is often ordinarily used once the information keep within the variable isn’t underneath your management.

In comparison to “any”, it permits the next degree of management.

It additionally provides intellisense support.

  • let a :number|string;
  • a=20;
  • a=”zoom”

Are you looking training with Right Jobs?

Contact Us

Popular Courses