In this article, I am going to explain how to use TypeScript nested If-Else statements. Using nested If-Else statements, we will find the grade of any student by entering his or her marks.
The syntax of a TypeScript nested If Else is:
- If(Condition)
- {
-
- }
- Else
- {
- If(Condition)
- {
-
- }
- Else
- {
- If(Condition)
- {
-
- }
- Else
- {
- }
- }
- }
Now to see how a nested If-Else is used, let's use the following steps.
Step 1
Open Visual Studio and click on "File" -> "New" -> "Project...".
Step 2
Select HTML Application for TypeScript under Visual C# and give the name of your application and then click OK.
Step 3
Open the app.ts file and write the following code in it:
- class Nested_IfElse {
- constructor() {}
- GradingSystem() {
- var n: number;
- var s = 0;
- n = parseInt(prompt("Enter the marks of any student"));
- if (n >= 80) {
- alert(" You got A grade");
- } else if (n >= 60) {
- alert(" You got B grade");
- } else if (n >= 40) {
- alert(" You got C grade");
- } else if (n < 40) {
- alert(" You Failed in this exam");
- }
- }
- }
- window.onload = () => {
- var greeter = new Nested_IfElse();
- greeter.GradingSystem();
- };
Step 4
Open the app.js file and write the following code in it:
- var Nested_IfElse = (function() {
- function Nested_IfElse() {}
- Nested_IfElse.prototype.GradingSystem = function() {
- var n;
- var s = 0;
- n = parseInt(prompt("Enter the marks of any student"));
- if (n >= 80) {
- alert(" You got A grade");
- } else {
- if (n >= 60) {
- alert(" You got B grade");
- } else {
- if (n >= 40) {
- alert(" You got C grade");
- } else {
- if (n < 40) {
- alert(" You Failed in this exam");
- }
- }
- }
- }
- };
- return Nested_IfElse;
- })();
- window.onload = function() {
- var greeter = new Nested_IfElse();
- greeter.GradingSystem();
- };
Step 5
Write the following code in the default.htm file:
- <!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" />
- </head>
- <body>
- <h1>Nested If Else Example</h1>
- <div id="content">
- <script src="app.js"></script>
- </div>
- </body>
- </html>
Step 6
Now run the application. The output will look like this.
When I click the OK button it will give a result like this.
Summary
In this article, I explained how to use a nested If-Else in TypeScript.