Learn Step by Step TypeScript Functions #TypeScript #Angularjs

Learn Step by Step TypeScript Functions
#TypeScript #Angularjs

  • TypeScript extends JavaScript functions with typed parameters, return type annotations, overloads, default parameter values, and rest parameters.
  • The compiled JavaScript (ES5) code for the above TypeScript code is give below:

    In JavaScript, you can call a function without passing any arguments, even the function specifies parameters.

  • The compiled JavaScript (ES5) code for the above TypeScript code is give below:

    In TypeScript, you can set a default value to a function parameter and when user does not pass the value for that parameter, default value will be used for that parameter.

  • The compiled JavaScript (ES5) code for the above TypeScript code is give below:

    The Rest parameters allow you to pass zero or more values to a function.

  • The spread operator in TypeScript you can use with rest parameter as given below:

    The compiled JavaScript (ES5) code for the above TypeScript code is give below:

    In TypeScript, Function overloads is purely a compile-time process.

TypeScript extends JavaScript functions with typed parameters, return type annotations, overloads, default parameter values, and rest parameters. Like JavaScript, TypeScript functions can be created both as a named function or as an anonymous function.

@DotNetTricksIn: Learn Step by Step TypeScript Functions
#TypeScript #Angularjs

TypeScript extends JavaScript functions with typed parameters, return type annotations, overloads, default parameter values, and rest parameters. Like JavaScript, TypeScript functions can be created both as a named function or as an anonymous function.

function.ts

//named function with number as parameters type and return type function add(x: number, y: number): number { return x + y; } //anonymous function with number as parameters type and return type let sum = function (x: number, y: number): number { return x + y; };

The compiled JavaScript (ES5) code for the above TypeScript code is give below:

function.js

function add(x, y) { return x + y; } var sum = function (x, y) { return x + y; };

In JavaScript, you can call a function without passing any arguments, even the function specifies parameters. Hence every parameter in JavaScript function is optional and when you do this, each parameter value is undefined.

In TypeScript, functions parameters are not optional. The compiler checks each call and warns you if you are not passing the values as per the function receiving parameters type.

TypeScript supports optional parameter by suffixing question mark ‘? ‘ to the parameter. Also, optional parameter you can add after any required parameters in the parameter list.

optionalparameter.ts

//here, z is optional parameter added after required parameters x and y function add(x: number, y: number, z?: number): number { if (z !== undefined) return x + y + z; else return x + y; } let resul1 = add(2, 3); //5 let resul2 = add(2, 3, 5); //10

The compiled JavaScript (ES5) code for the above TypeScript code is give below:

optionalparameter.js

function add(x, y, z) { if (z !== undefined) return x + y + z; else return x + y; } var resul1 = add(2, 3); //5 var resul2 = add(2, 3, 5); //10

In TypeScript, you can set a default value to a function parameter and when user does not pass the value for that parameter, default value will be used for that parameter. Also, default parameter you can add after any required parameters in the parameter list.

defaultparameter.ts

//here, z is default parameter added after required parameters x and y function add(x: number, y: number, z: number = 0): number { return x + y + z; } let resul1 = add(2, 3); //5 let resul2 = add(2, 3, 5); //10

The compiled JavaScript (ES5) code for the above TypeScript code is give below:

defaultparameter.js

function add(x, y, z) { if (z === void 0) { z = 0; } return x + y + z; } var resul1 = add(2, 3); //5 var resul2 = add(2, 3, 5); //10

The Rest parameters allow you to pass zero or more values to a function. A Rest parameter is prefixed by three consecutive dot characters ‘…’ and allow the functions to have a variable number of arguments without using the arguments object. The rest parameter is an instance of Array, so all array methods work.

A rest parameter must follow following three rules:

restparameter.ts

function add(x: number, …y: number[]): number { let result = x; for (var i = 0; i < y.length; i++) { result += y[i]; } return result; } let result1 = add(2, 5); //7 let result2 = add(2, 5, 7, 2); //16 The compiled JavaScript (ES5) code for the above TypeScript code is give below: restparameter.js function add(x) { var y = []; for (var _i = 1; _i < arguments.length; _i++) { y[_i - 1] = arguments[_i]; } var result = x; for (var i = 0; i < y.length; i++) { result += y[i]; } return result; } var result1 = add(2, 5); //7 var result2 = add(2, 5, 7, 2); //16 The spread operator is introduced with ES6. It allows you to expand an array into multiple formal parameters. In ES6, the spread operator example is given below: spreadoperator_es6.js function add(x, y, z) { return x + y + z; } let nums = [2, 5, 5]; let result = add(…nums); //12 In TypeScript, the spread operator acts like a reverse of rest parameter. The spread operator in TypeScript you can use with rest parameter as given below: spreadoperator.ts function add(…x: number[]): number { let result = 0; for (var i = 0; i < x.length; i++) { result += x[i]; } return result; } let nums: number[] = [2, 5, 5]; let result = add(...nums); //12 The compiled JavaScript (ES5) code for the above TypeScript code is give below: spreadoperator.js function add() { var x = []; for (var _i = 0; _i < arguments.length; _i++) { x[_i - 0] = arguments[_i]; } var result = 0; for (var i = 0; i < x.length; i++) { result += x[i]; } return result; } var nums = [2, 5, 5]; var result = add.apply(void 0, nums); //12 In TypeScript, Function overloads is purely a compile-time process. It has no impact on the compiled JavaScript code. The parameter list of a function overload cannot have default parameters. But you can define optional parameter using question mark ‘? ‘ in function overloads. functionoverloads.ts function add(x: string, y: string, z: string): string; function add(x: number, y: number, z: number): number; // implementation signature function add(x: any, y: any, z: any): any { let result: any; if (typeof x == “number” && typeof y == “number” && typeof z == “number”) { result = x + y + z; } else { result = x + y + ” ” + z; } return result; } let result1 = add(4, 3, 8); // 15 let result2 = add(“Gurukul”, “sight”, “website”); //Gurukulsight website The compiled JavaScript (ES5) code for the above TypeScript code is give below: functionoverloads.js function add(x, y, z) { var result; if (typeof x == “number” && typeof y == “number” && typeof z == “number”) { result = x + y + z; } else { result = x + y + ” ” + z; } return result; } var result1 = add(4, 3, 8); // 15 var result2 = add(“Gurukul”, “sight”, “website”); //Gurukulsight website ES6 provides shorthand syntax for defining anonymous function. Arrow function omit the function keyword and have lexical scoping of this keyword. TypeScript extends arrow function with types parameters. arrowfunction.ts //arrow function with typed parameters let add = (x: number, y: number)=> { return x + y; }; let result = add(2, 3); //5

The compiled JavaScript (ES5) code for the above TypeScript code is give below:

arrowfunction.js

var add = function (x, y) { return x + y; }; var result = add(2, 3);

The arrow function is typically useful for writing callbacks, which often have an undefined or unexpected this. The use of an arrow function causes the callback to have the same this as the surrounding method have. Let’s understand the concept with the following example.

arrowcallback.ts

class Messenger { message: string = “Hello Gurukulsight!”; greetArrow(): void { //arrow function as a callback setTimeout(() => console.log(this.message), 2000); //contains parent scope } greetAnonymous(): void { //anonymous function as a callback setTimeout(function () { console.log(this.message); // doesn’t contain parent scope }, 3000); } }; let m1 = new Messenger(); m1.greetArrow(); //Hello Gurukulsight! m1.greetAnonymous(); //undefined

The compiled JavaScript (ES5) code for the above TypeScript code is give below:

arrowcallback.js

var Messenger = (function () { function Messenger() { this.message = “Hello Gurukusight!”; } Messenger.prototype.greetArrow = function () { var _this = this; setTimeout(function () { return console.log(_this.message); }, 2000); }; Messenger.prototype.greetAnonymous = function () { setTimeout(function () { console.log(this.message); }, 3000); }; return Messenger; }()); var m1 = new Messenger(); m1.greetArrow(); m1.greetAnonymous();

I hope you will enjoy the Function in TypeScript while developing your web app. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Functions

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.