Becoming a MEAN Stack Developer: Angular Advanced Concepts Part 1

Introduction

Basic angularJS ideas have previously been discussed. We gained an understanding of Model–View–Controller (MVC), the angularJS project structure, the ng-command, and many Angular Core Concepts, such as expressions, directives, forms, and events. This should serve as a sufficient introduction to the steps of this Development Trip.

But in the next blogs, we’ll make an effort to go more deeply into the ideas and attempt to grasp and execute things. It’s safe to say that you’re going to have some difficulties. The true measure of your coding skills is in how you handle problems, which affect even the finest programmers.

TypeScript

If you’re building an Angular project, chances are good that you’ll be using TypeScript. It’s an extension of JavaScript that adds type safety and development-time tools. It is not possible to run TypeScript code in a browser. The tsc compiler is used to “transpile” Typescript into JavaScript, which calls for some setup.In this part, we’ll go through the TypeScript setup and environment, with a focus on the files that are most relevant to Angular developers. So, ;let’s get into TypeScript basics. 

Data Types in Typescript 

TypeScript provides different kinds of data-types: String, Number, Boolean, any, Null and Undefined. Numbers include both integers and floating point numbers. Any type is used when we are not sure which type of variable we will need. This is a curious case, as many times we wouldn’t know if the request coming from the internet is what data type. This is a getaway from having to use stringent data types in our application. 

Conditionals in TypeScript

The conditionals in TypeScript are very much similar to JavaScript. The Type Script follows the same if else block. Example in the screenshot attached.

Looping in TypeScript
The following for loops are all supported in TypeScript:

• for loop
• for..of loop
• for..in loop
• while

For-loop

Programmers use the for loop to repeat a section of code several times based on the value of a variable or the fulfillment of a condition.

Syntax

for (first expression; second expression; third expression ) {

    // statements to be executed repeatedly

}

for..of loop

In TypeScript, you may use the for…of loop to iterate through and have access to the individual components of a collection such as an array, list, or tuple. The for…of loop eliminates the requirement for the conventional for loop described above by returning entries from a collection, such as an array, list, or tuple.

Example

let arr = [10, 20, 30, 40];
for (var val of arr) { console.log(val); // prints values: 10, 20, 30, 40 

}

for..in loop

Example

let arr = [10, 20, 30, 40]; 

for (var index in arr) { console.log(index); // prints indexes: 0, 1, 2, 3 

console.log(arr[index]); // prints elements: 10, 20, 30, 40 

}

While Loop

Another kind of loop that does conditional checking before executing the code block is called a while loop. The iteration continues until the predetermined value is reached.

Syntax

while (condition expression) {

    // code block to be executed

}

Functions and Parameter in TypeScript

With well-defined functions, the code can be easily modified and reused, and it can also be broken down into manageable chunks. Even though classes and modules are available in TypeScript, functions are still a vital aspect of the language.

TypeScript allows two distinct flavors of functions: named and anonymous.
Syntax to create a function

Function FunctionName() {

  // statements to be executed

}

Named Functions

Named functions are those that are declared and invoked using the function’s actual name.

function display() { 

console.log(“Hello TypeScript!”); 

} 

display(); //Output: Hello TypeScript

Anonymous Function

An anonymous function is one which is defined as an expression. This expression is stored in a variable. So, the function itself does not have a name. These functions are invoked using the variable name that the function is stored in.

let greeting = function() { 

console.log(“Hello TypeScript!”); 

}; 

greeting(); //Output: Hello TypeScript!

Parameter in Function

Values or arguments are passed to a function as parameters. In TypeScript, the compiler expects a function to get the exact number and types of arguments that are listed in the function signature. If a function needs three parameters, the compiler checks that the user has given values for all three parameters. This means it looks for exact matches.

There are two kinds of parameters:

Optional Parameter

TypeScript has a feature called an optional parameter. Parameters that may or may not get a value can be marked as optional by adding a ‘?’ to the end of the line.

Default Parameter

Parameters can have default values added to them in TypeScript. So, if the user doesn’t give a value for an argument, TypeScript will start the parameter with the default value. The way that default parameters work is the same as how optional parameters work. If the default parameter in a function call is not given a value, the default parameter must come after the required parameters in the function signature. So, you can leave out the default parameters when calling a function. But if a function signature has a default parameter before a required parameter, the function can still be called as long as the undefined value is given to the default parameter.

Interfaces in TypeScript

Interface is a structure that specifies the application’s contract. It specifies the syntax that classes must adhere to. Classes that inherit from an interface must adhere to the interface’s structure.Interface is not converted to JavaScript by TypeScript’s compiler. Interface is used for type verification. Also called “duck typing” or “structural subtyping.” An interface is declared using the keyword interface, and it may contain function or arrow function declarations for its attributes and methods.

interface Student {

    admissionCode: number;

    stuName: string;

    Class: (number) => number; // arrow function

    classTeacherName(number): string; 

}

Interface as a Type

We can use Interface as a datatype for varied use cases in our application. 

For example: 

interface Student {

    admissionCode: number;

    stuName: string;

    classNumber: (number) => number; // arrow function

    classTeacherName(number): string; 

}

interface Student1 extends Student{

    admissionCode:12,stuName:”Lavanya”,classNumber:10,classTeacherName:”Dilip”

};

Classes in TypeScript

In object-oriented programming languages like Java and C#, Classes are the basic building blocks for making components that can be used over and over again. Classes get their functions from the classes above them, and objects are made from classes. JavaScript has mostly been a functional programming language that is based on prototypes for inheritance. With functions, you can make reusable parts. Classes were added to TypeScript so that object-oriented techniques like encapsulation and abstraction could be used. The TypeScript compiler turns the class into plain JavaScript functions so that it works on all platforms and browsers. The class will be turned into JavaScript code by the TypeScript compiler.

A class can include the following:

• Constructor
• Properties
• Methods

Example: 

class Employee {

    empCode: number;

    empName: string;

    constructor(code: number, name: string) {

            this.empName = name;

            this.empCode = code;

    }

    getSalary() : number {

        return 10000;

    }

}

Conclusion

Congratulations! You are now familiar with TypeScript, which is the language that AngularJS uses behind the scenes. The number of AngularJS lessons that we post in our blogs will keep coming in. Keep an eye out for more development blogs!