Introduction

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:
  1. If(Condition)
  2. {
  3. //If condition is true then write the statement here
  4. }
  5. Else //if condition is false then cursor go to else part
  6. {
  7. If(Condition) //again here check the condition under the else part
  8. {
  9. //If condition is true then write statement here
  10. }
  11. Else //if condition is false then cursor go to else part
  12. {
  13. If(Condition) //again here check the condition under the else part
  14. {
  15. //If condition is true then write statement here
  16. }
  17. Else
  18. {
  19. }
  20. }
  21. }
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:
  1. class Nested_IfElse {
  2. constructor() {}
  3. GradingSystem() {
  4. var n: number;
  5. var s = 0;
  6. n = parseInt(prompt("Enter the marks of any student"));
  7. if (n >= 80) {
  8. alert(" You got A grade");
  9. } else if (n >= 60) { // Note the space between else & if
  10. alert(" You got B grade");
  11. } else if (n >= 40) {
  12. alert(" You got C grade");
  13. } else if (n < 40) {
  14. alert(" You Failed in this exam");
  15. }
  16. }
  17. }
  18. window.onload = () => {
  19. var greeter = new Nested_IfElse();
  20. greeter.GradingSystem();
  21. };
Step 4
Open the app.js file and write the following code in it:
  1. var Nested_IfElse = (function() {
  2. function Nested_IfElse() {}
  3. Nested_IfElse.prototype.GradingSystem = function() {
  4. var n;
  5. var s = 0;
  6. n = parseInt(prompt("Enter the marks of any student"));
  7. if (n >= 80) {
  8. alert(" You got A grade");
  9. } else {
  10. if (n >= 60) {
  11. alert(" You got B grade");
  12. } else {
  13. if (n >= 40) {
  14. alert(" You got C grade");
  15. } else {
  16. if (n < 40) {
  17. alert(" You Failed in this exam");
  18. }
  19. }
  20. }
  21. }
  22. };
  23. return Nested_IfElse;
  24. })();
  25. window.onload = function() {
  26. var greeter = new Nested_IfElse();
  27. greeter.GradingSystem();
  28. };
Step 5
Write the following code in the default.htm file:
  1. <!DOCTYPE html>
  2. <html lang="en"
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta charset="utf-8" />
  6. <title>TypeScript HTML App</title>
  7. <link rel="stylesheet" href="app.css" type="text/css" />
  8. </head>
  9. <body>
  10. <h1>Nested If Else Example</h1>
  11. <div id="content">
  12. <script src="app.js"></script>
  13. </div>
  14. </body>
  15. </html>
Step 6
Now run the application. The output will look like this.
Output-of-nested-ifelse-in-typescript.jpg
When I click the OK button it will give a result like this.
Display-result-of-nested-ifelse-in-Typescript.jpg
Summary
In this article, I explained how to use a nested If-Else in TypeScript.