Recursive Function in TypeScript
A recursive function is a function that calls itself, in other words multiple times. The advantage of using recursion is code reusability. TypeScript supports creating recursive functions with ease and efficiency. A recursive function allows you to divide the complex problem into identical single simple cases which can be handled easily. This programming technique is called divide and conquer. A recursive function must have at least one exit condition that can be satisfied. Otherwise, the recursive function will call itself forever, in other words multiple times until the runtime stack overflows.
Basically there are two ways to code recursive functions in TypeScript:
- First by directly calling the function from within itself and
- Second by using an indirect call
Example
In this article I will use direct recursion. The following example tells you, how to use recursive a function in TypeScript. In this example we will find the factorial of a number we enter. Do the following to create a program using a recursive function.
Step 1
Open Visual Studio 2012 and click on "File" -> "New" -> "Project...". After that, a window is opened. Enter the name of your application like "RecursiveFunction", after that click on the Ok button.
Step 2
After Step 1 your project has been created. The Solution Explorer, which is shown on the right side of your project, contains the js file, ts file, css file and html file.
Step 3
The code of the recursive function program:
RecursiveFunction.ts
|
class Greeter {
static fact:number;
fact = 1;
constructor()
{
}
factorial(num: number): number
{
if (num > 0) {
this.fact = this.fact * num;
this.factorial(num - 1);
}
return this.fact;
}
}
window.onload = () => {
var fact: number, num: number;
num = parseInt(prompt("Enter a number"));
var greeter = new Greeter();
fact=greeter.factorial(num);
alert("Factorial of a number is->" + fact);
}; |
Note In the above declared program I have created a recursive function with an argument and it is an example of direct recursion.
default.html
|
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="app.js"></script>
</head>
<body>
<h2>Recursion Function in TypeScript</h2>
<h3>Number of Factorial By Recursion Function</h3>
<div id="content"/>
</body>
</html> |
app.js
|
var Greeter = (function () {
function Greeter() {
this.fact = 1;
}
Greeter.fact = 0;
Greeter.prototype.factorial = function (num) {
if(num > 0) {
this.fact = this.fact * num;
this.factorial(num - 1);
}
return this.fact;
};
return Greeter;
})();
window.onload = function () {
var fact;
var num;
num = parseInt(prompt("Enter a number"));
var greeter = new Greeter();
fact = greeter.factorial(num);
alert("Factorial of a number is->" + fact);
}; |
Output 1
![first-image-in-type-script.jpg]()
Enter the number and then click on Ok.
Output 2
![second-image-in-type-script.jpg]()