FOR loop to print array

Easy 2 mins tutorial on FOR loop to print array in TypeScript

by with No Comment TypeScript

Learn how to use for loop to print array in TypeScript

In this tutorial, we will learn to use for loop in TypeScript to print array items and all the elements in the array. If you are not aware of creating an array or publishing it, kindly follow the links given below.

Basic of TypeScript: First program in TypeScript

Array in TypeScript: Creating and printing array in TypeScript

To print an array using the for loop, first, you should understand the syntax of FOR loop in TypeScript. Following this, we will see how to use the FOR loop to print an entire array or print a particular element in the array. 

FOR loop to print array
Learn how to use for loop to print array in TypeScript

FOR loop Syntax

for(condition){
	action statement
}

To demonstrate how to create a FOR loop to print an array, first, we need to create an array. Here we are creating an array of students. 

let student_List = [
                        {name:'John', id:12345, class:'Bio'},
                        {name:'Peter', id:12346, class:'Bio'},
                        {name:'Adam', id:12347, class:'IT'}
                        ]

The above statement creates the student list with NAME, ID and CLASS paraments. To print it normally, we can use the console statement. 

console.log(student_List[1])

The above state will print the first student details, along with all the paraments. Now we can see, how to print the array with FOR loop for the same array student_List

for(let x of student_List){
    console.log(x)
}

The above statement will produce a result with all the records and all the details as follows:
{name:’John’, id:12345, class:’Bio’},
{name:’Peter’, id:12346, class:’Bio’},
{name:’Adam’, id:12347, class:’IT’}

To print a particular parameter, i.e., NAME parameter from the above array, use the following code:

for(let x of student_List){
    console.log(x.name)
}

The above statement will produce a result with all the records but with only the NAME parameter. The result is as follows:
John
Peter 
Adam

Now that you have learnt about FOR loop to print array. You can also check our tutorial on Interfaces In TypeScript. Check our Angular with Angular Material Training from Ampersand Academy

Creating and printing array in TypeScript

Easy 2 mins Tutorials in Creating and printing array in TypeScript

by with No Comment TypeScript

Learn Creating and printing array in TypeScript in these quick 2 mins tutorials

In this tutorial, we will learn to create an array using TypeScript. After creating an array, we will be printing the array. If you’re not aware of how to create a variable in TypeScript, you can follow the link mentioned below. It is mandatory to learn the basic initially before learning to create an array. 

First program in TypeScript

Once you have learnt to create essential variables and print them. You’ll be learning how to create an array. Creating an array is similar to creating a variable. The following coding will depict how to create an array variable and pass values to them. 

Open our demo.ts file and clear any existing code which we tried in the last tutorial. Now to create an array, you can use the following code. We are creating an array of employees data.

Creating and printing array in TypeScript
Creating and printing array in TypeScript

let enq_List = [
				{name:"John", id:123, dept:"IT"},
				{name:"Victor", id:124, dept:"Finance"},
				{name:"Doe", id:125, dept:"HR"}
			]

To print the array, we need to call the array name inside the console log. 

console.log(enq_List)

After the console coding, you can follow the same step and convert the file to js and then run the file. 

tsc demo.ts
node demo.js

The output is as follows.

{name:"John", id:123, dept:"IT"}
{name:"Victor", id:124, dept:"Finance"}
{name:"Doe", id:125, dept:"HR"}

Now that you have learnt Creating and printing array in TypeScript. In the next tutorials, we will learn how to access a particular member in an array. Angular with Angular Material Training from Ampersand Academy

First Program in TypeScript

Easy tutorial on creating First program in TypeScript in 2021

by with No Comment TypeScript

Learn how to create the first program in typescript and print it in the command prompt

In this tutorial, we will learn how to create a variable using TypeScript and how to print a variable in TypeScript. We have written this tutorial with the consideration that you have already installed TypeScript, if not, kindly follow the link to install TypeScript in your system.

Getting started with TypeScript

First Program in TypeScript
First Program in TypeScript

Once the TypeScript is installed, you can check the TypeScript version from the command prompt. The coding to check the version is present in the above link.

Now, let’s see how to create a variable and print the variable in TypeScript. By default, we cannot see the output directly from the TypeScript; we will first run the TypeScript file using the command.

tsc filename.ts

The above command will generate the corresponding js file. Once created, we will run the js using the following code.

node filename.js

The above code will create the desired result. We can create a file with extension .ts from any of our code editors such as Brackets, Sublime, Notepad or Visual Code. After creating the ts file, now we can check how to create a variable and print the variable. To create a variable, we will type the following code. 

let name1="John Doe"

The above syntax creates a variable “name1”, and we have assigned the value “John Doe” to it. After creating a variable, we need to print it. To print the variable, we will use the following code. 

console.log(name1)

Now we will go to the command prompt to execute the TypeScript. Open the Command Prompt and navigate to the corresponding directory where you have stored the ts file. Then type 

tsc demo.ts

Please note that demo.ts is the filename we have created for this program. The above command will generate a demo.js file automatically. We can execute only the demo.js file to view the output. You can see the difference in the coding.

var name1 = "John Doe";
console.log(name1);

Now we can run the js file by typing.

node demo.js

The above code will produce the output in the command prompt itself as follows. 

John Doe

Now that you have created the First program in TypeScript, Try practising the first program in TypeScript. In the next tutorial, we will teach how to create an array in TypeScript and print it. Check our Angular with Angular Material Training from Ampersand Academy

Functions in TypeScript

Clear tutorial on Functions in TypeScript in under 2 mins

by with No Comment TypeScript

Learn to write the functions in TypeScript and print it in TypeScript

In this tutorial, we will learn how to write our first function using TypeScript. In the earlier tutorials, we have discussed how to get started with TypeScript, variables, arrays in TypeScript. You can access our previous tutorials from the menu. Now let’s get started with the first function in TypeScript.

Functions in TypeScript has similar usage as that of functions in other programming languages like Java, Python, R and so on. In this tutorial, we will demonstrate how to create a simple function that helps in printing a “Hello” followed by the “Name”  message.

Functions in TypeScript
Functions in TypeScript

Following coding is the basic function syntax. The function starts with the keyword function followed by the function name and after which we have curly braces. Inside the curly braces, we will write the statements.

function name(){}

Now let us create the function which acts as discussed above. 

function greetings(person){
	return "Hello, " + person;
}

Now the function is created. The next step is to input the person name dynamically and print it. The following code will do the task at hand. 

let user = "John Doe";
console.log(greetings(user));

The Output will be as follows.

Hello, John Doe

Now that you have learnt about Getting started with TypeScript. You can also check our tutorial on Interfaces In TypeScript. Check our Angular with Angular Material Training from Ampersand Academy

Interfaces in TypeScript

Quick Read on Interfaces in TypeScript in 2 mins

by with No Comment TypeScript

Learn about Interfaces in Typescript and how to implement TypeScript in 2021

In this tutorial, we will discuss how to implement the interface in TypeScript. Earlier, we discussed the variable, array, functions in TypeScript. If you would like to revisit, you can access it from the menu table on the left or the menu icon if you’re using it from mobile. 

The interface is a structure that characterizes the agreement in your application. It describes the language structure for classes to follow. Classes from an interface must follow the structure given by their interface.

In TypeScript, the syntax to create an interface is as follows.

Interfaces in TypeScript
Interfaces in TypeScript


Now we will discuss how to implement an Interface inside a function. For this, we first need to create an interface, followed by a function and then we need to print the interface using the function.

Step to create the interface.

interface Students {
    firstName: string;
    lastName: string;
}

Step to create a function. 

function greetings1(students: Students){
     return "Hello, " + students.firstName + " " + students.lastName; 
}

Now the function is created. The next step is to input the person name dynamically and print it. The following code will do the task at hand. 

let person = {firstName: "John", lastName: "Doe"};
console.log(greetings1(person));

Now that you have learnt about Interfaces in TypeScript. You can also check our tutorial Getting Started with TypeScript. Check our Angular with Angular Material Training from Ampersand Academy

Getting started with TypeScript

Getting started with TypeScript in 2021 – Quick Read

by with No Comment TypeScript

Know what is TypeScript, its Benefits and how to install TypeScript in Windows, Mac and Linux Machines. Getting started with TypeScript

Getting started with TypeScript
Getting started with TypeScript

TypeScript is a superset of JavaScript and has some vital advantages which make it profoundly used in Angular, React. Following are the key points that make TypeScript unique which includes but are not limited to 

  1. Discretionary static typing(the key here is discretionary)
  2. Intuitive Type Interface which allows programmers to get more code without typing 
  3. Early access to ES6 and ES7 features even before support from various browsers
  4. TypeScript automatically compiles to comfortable JS versions which render in all major browsers
  5. Support from IntelliSense which makes TypeScript robust and user-friendly for programmers

Now that we have discussed TypeScript and its benefits, let’s deep dive into TypeScript installation.

Step 1: Make sure you have installed Node 

Step 2: Open Command Prompt in your system. Rest assured; TypeScript is compatible in all Windows, Mac and Linux systems

Step 3: Type tsc in command prompt. The tsc command shows TypeScript version if already installed or if not installed already it will throw an error

Step 4: If tsc command throws the error you can install the TypeScript with the following command 

npm install -g typescript

or

npm i typescript

-g describes the global installation, and i describes the local folder installation of TypeScript
Step 5: The above command will install the TypeScript
Step 6: Once installed you can check the correctness of installation by typing tsc in Command Prompt

Going further we will discuss our first program in TypeScript.

Now that you have learnt about Getting started with TypeScript. You can also check our Roadmap to Web Development in 2021. Check our Angular with Angular Material Training from Ampersand Academy

Roadmap to web development

Proven Roadmap to web development in 2021

by with No Comment Web Development

Learn the Proven Roadmap to web development in 2021

In this tutorial, we will discuss the Roadmap to web development. We will discuss the technologies and tools that you should learn to become a web developer are. 

2 Parts in web development

Any website has two parts: 

  • Frontend
  • Backend
Roadmap to web development
Roadmap to web development

Frontend: 

The front end is the part where we see and interact with a website in a browser. It is the part where we can click and feel all the visual elements of the website. 

Frontend Technologies: 

HTML – HyperText Markup Language 

HTML defines the building blocks of the front end. It is not an actual language but a markup since we cannot use them to instruct a computer. 

CSS – Cascading Style Sheets

CSS is for styling web pages and making them beautiful. CSS is also not an actual language.

JS – JavaScript

Adds functionality to the website. JS is a language we can instruct the computer to do certain operations using JavaScript. 

Frameworks

Generally, a Website or Web Application has a set of repetitive blocks. Frameworks or libraries help you with making the front end development quick and feature-rich. Few of the frontend frameworks include React, Angular and Vue. 

Which Framework to use

Ideally, there is no rule book to follow. Each company and each project requires a different framework. Suppose you’re looking to learn a frontend library or Framework. In that case, it is better to get started with React since it’s used in several projects and companies and later, you can also learn Angular or Vue or any new framework that will serve you in your projects.

Backend: 

The backend is the part that powers the front end. It is about storing the data, displaying the data and consists of databases. Backend is a technical term that web experts and coders utilize. Fundamentally, the backend is the software engineer’s code that encompasses server-side activities, incorporating CRUD functionality with the database and all server logics. Backend technologies which you can learn in 

2021 includes NodeJS, Java, Kotlin, Python and Ruby on Rails. Databases that you can know for web development include but are not limited to MySQL, Postgre SQL.

Web Development Jobs:

  • Front end Development – HTML + CSS + JS
  • Back end Development – Language + Database
  • Full Stack Development – Front end + Backend 

Timeline to learn:

HTML + CSS – 6 Weeks

JS – 6 Weeks

React – 6 Weeks

NodeJS / Python – 9 Weeks

SQL – 6 Weeks

Now that you know Roadmap to web development, Good luck with your endeavour to become a Web Developer. Follow our website to learn and get tips and other plugins you require in your web development projects. Learn about Materialize CSS, one of the famous CSS Frameworks used in website and web development.