Number Object Method In TypeScript: Part 3

Before reading this article, please go through the following articles:

Introduction

In TypeScript, the number object is an object wrapper for primitive numeric values. If the value parameter cannot be converted into a number, it will be returned as NaN. There are four methods of the number object that format the display of the numerical values.
In this article, I am describing the TypeScript toPrecision number method.

toPrecision() Method

In TypeScript the toPrecision() method is used to return a numeric string with the specified number of significant digits. The result may be in an exponential format. If the precision is not provided then it returns the same result as toString().
Syntax
  1. array.toPrecision(precision)
precision: is an optional parameter specifying the number of significant digits. If this parameter is omitted then it returns the entire number without formatting.
The following example shows how to use the toPrecision method in TypeScript. In this example, we get miles and gallons from the user. Then it calculates the MPG (Miles Per Gallon). It is displayed with three significant digits. For example, the result might actually be 22.857142857142858 but it will be displayed as 22.9.
Function
  1. toPrecision(miles: number, gallons: number) {
  2. var mpg = (miles / gallons);
  3. var span = document.createElement("span");
  4. span.style.color = "green";
  5. span.innerText = "toPrecision Method \n Your mpg is -> " + mpg.toPrecision(3) + "\n";
  6. document.body.appendChild(span);
  7. }

Complete Program

toPrecision.ts
  1. class ToPrecision_Method {
  2. toPrecision(miles: number, gallons: number) {
  3. var mpg = (miles / gallons);
  4. var span = document.createElement("span");
  5. span.style.color = "green";
  6. span.innerText = "toPrecision Method \n Your mpg is -> " + mpg.toPrecision(3) + "\n";
  7. document.body.appendChild(span);
  8. }
  9. }
  10. window.onload = () => {
  11. var obj = new ToPrecision_Method();
  12. var miles = parseFloat(prompt("Enter the miles"));
  13. var gallons = parseFloat(prompt("Enter the gallons"));
  14. obj.toPrecision(miles, gallons);
  15. };
toPrecision_MethodDemo.htm
  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. <script src="toPrecision.js"></script>
  9. </head>
  10. <body>
  11. <h3 style="color:chocolate">toPrecision() Number Object Method In TypeScript</h3>
  12. <div id="content"/>
  13. </body>
  14. </html>
toPrecision.js
  1. var ToPrecision_Method = (function() {
  2. function ToPrecision_Method() {}
  3. ToPrecision_Method.prototype.toPrecision = function(miles, gallons) {
  4. var mpg = (miles / gallons);
  5. var span = document.createElement("span");
  6. span.style.color = "green";
  7. span.innerText = "toPrecision Method \n Your mpg is -> " + mpg.toPrecision(3) + "\n";
  8. document.body.appendChild(span);
  9. };
  10. return ToPrecision_Method;
  11. })();
  12. window.onload = function() {
  13. var obj = new ToPrecision_Method();
  14. var miles = parseFloat(prompt("Enter the miles"));
  15. var gallons = parseFloat(prompt("Enter the gallons"));
  16. obj.toPrecision(miles, gallons);
  17. };
Output 1
Enter the miles and click on "Ok".
enter-miles.gif
Output 2
Enter the gallons then click on the "Ok" button to calculate the MPG (with three significant digits).
enter-gallons.gif
Output 3
result.gif