How To Use Simple Array in TypeScript

In this article I will explain what an array is and how to use them in TypeScript with an example.

Simple Array in TypeScript

 
An array is an object that contains one or more items called elements. Each of these elements can be a primitive data type or an object. For instance, you can store numbers, strings, and Date objects in the same array. The length of an array is the number of elements in the array. If you create an array without specifying the length, the array doesn't contain any elements. When you create an array of one or more elements without assigning values to them, each element is set to undefined. If you use an index then 0 is the first element, 1 is the second element, and so on.
 
Example
 
The following example describes how to use an array in TypeScript. The following code implements a linear search to determine whether a given number is present in an array and if it is present then at what location it is. It is very simple and works as follows.
 
Step 1
 
Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". After that, a window is opened; enter the name of your application, like "Linear_Search", then click on the Ok button.
 
Step 2
 
After Step 1 your project has been created. The Solution Explorer, which is at the right side of your project, contains the js file, ts file, CSS file, and HTML files.
 
Step 3
 
Linear_Search.ts
  1. class LinearSeach  
  2. {  
  3.  Searching()  
  4.  {  
  5.   var search: number, c: number, num: number;  
  6.   var array: number[] = [100];  
  7.   num = parseInt(prompt("Enter the number of elements in Array"));  
  8.   for (c = 0; c < num; c++)  
  9.   {  
  10.    array[c] = parseInt(prompt("Enter " + num + " Number"));  
  11.   }  
  12.   var x = 0;  
  13.   for (x = 0; x < num; x++)  
  14.   {  
  15.    var span = document.createElement("span");  
  16.    span.innerText = "Enter number " + x + "is " + array[x] + "\n";  
  17.    document.body.appendChild(span);  
  18.   }  
  19.   search = parseInt(prompt("Enter the number to search \n"));  
  20.   for (c = 0; c < num; c++)  
  21.   {  
  22.    if (array[c] == search)  
  23.    {  
  24.     var n;  
  25.     n = c + 1;  
  26.     alert(search + " is present at location ->" + n);  
  27.     break;  
  28.    }  
  29.   }  
  30.   if (c == num)  
  31.    alert("Number is not present in array -> " + search);  
  32.  }  
  33. }  
  34. window.onload = () => {  
  35.  var greeter = new LinearSeach();  
  36.  greeter.Searching();  
  37. };  
LinearSearch.html
  1. <!DOCTYPEhtml>  
  2. <htmllang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <metacharset="utf-8"/>  
  6.         <title>Simple Array</title>  
  7.         <linkrel="stylesheet"href="app.css"type="text/css"/>  
  8.         <scriptsrc="app.js">  
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.         <h1>Simple Array in TypeScript</h1>  
  13.         <h2style="color:#4db8e8">Linear Search in TypeScript  
  14.         </h2>  
  15.         <divid="content"/>  
  16.     </body>  
  17. </html>  
app.js
  1. var LinearSeach = (function() {  
  2.  function LinearSeach() {}  
  3.  LinearSeach.prototype.Searching = function() {  
  4.   var search;  
  5.   var c;  
  6.   var num;  
  7.   var array = [  
  8.    100  
  9.   ];  
  10.   num = parseInt(prompt("Enter the number of elements in Array"));  
  11.   for (c = 0; c < num; c++) {  
  12.    array[c] = parseInt(prompt("Enter " + num + " Number"));  
  13.   }  
  14.   var x = 0;  
  15.   for (x = 0; x < num; x++) {  
  16.    var span = document.createElement("span");  
  17.    span.innerText = "Enter number " + x + "is " + array[x] + "\n";  
  18.    document.body.appendChild(span);  
  19.   }  
  20.   search = parseInt(prompt("Enter the number to search \n"));  
  21.   for (c = 0; c < num; c++) {  
  22.    if (array[c] == search) {  
  23.     var n;  
  24.     n = c + 1;  
  25.     alert(search + " is present at location ->" + n);  
  26.     break;  
  27.    }  
  28.   }  
  29.   if (c == num) {  
  30.    alert("Number is not present in array -> " + search);  
  31.   }  
  32.  };  
  33.  return LinearSeach;  
  34. })();  
  35. window.onload = function() {  
  36.  var greeter = new LinearSeach();  
  37.  greeter.Searching();  
  38. };  
Output 1
 
Enter the number of Elements and then click on ok, as in:
 
Linear-image1-in-type-script.jpg
 
Output 2
 
Enter numbers.
 
Linear-image2-in-type-script.jpg
 
Linear-image3-in-type-script.jpg
 
Linear-image4-in-type-script.jpg
 
Linear-image5-in-type-script.jpg
 
Linear-image6-in-type-script.jpg
 
Output 3
 
Then enter the number to search for:
 
Linear-image7-in-type-script.jpg
 
Output 4
 
If the specified number is present in the array then the location that it occurs at is shown:
 
Linear-image8-in-type-script.jpg
 
Output 5
 
And if the specified number is not present in the array then:
 
Linear-image9-in-type-script.jpg
 
Linear-image10-in-type-script.jpg