When we create an array, we need consistency in the type of values that are being added to the array. This feature is not present in JavaScript and hence TypeScript comes as a savior.
In addition to deciding the type of value being added to the array, TypeScript allows us to customize the order of values that will be added in the array based on the index position.
Declaring an array in TypeScript
This is the basic syntax of declaring a typed array
const cars:string[] = ['Lamborgini', 'Ford'];
const dates:Date[] = [new Date(), new Date()];
As you can see that 'string' is a data type and since we wanted to declare an array, we did the following things
Declared the cars variable like this 'const cars'
Added the : symbol in front of cars
Since we want only string values to be added inside the car we wrote string[]. Had we written only string after car, car would be equal to a string like this
const car:string = 'Maruti';
So now you might have understood why we wrote :string[] in front of car. Typed arrays prevent us from adding incompatible values in an arrays.
Despite the typed array, the JavaScript functionality of the array remains intact and we can apply all the array methods like accessing elements of the array, map(), push(), filter() and rest.
Since we have the flexibility to add multiple data types in a typed array, let's go through that.
Multiple Types in Arrays
When we want to store dates related to a customer, we will store the current date (when the customer made the purchase), we will store the birthday of the customer(which customer will provide) and some other dates that customer wants to store like 4 Sept because it's his/her mother's birthday.
Now we have two things to do here, when customer will set the date as per their convenience it can be in multiple formats like 'September 4', 'Sept 4', 'Sept 4' and when we will store the current date; we can do it in new Date() format.
If store the values provided by customer in only Date[] type array, we will see an error whenever customer enters a value like '10 September' because it is not in Date format provided by JavaScript.
As we know TypeScrtipt allows multiple typed array, we will use it here.
This is how we will declare an array that can accept the value in form of Date and string format
const customerDates : (string | Date)[] = [new Date(), new Date(), 'September 23', 'September 4']
See after the : operator we opened a bracket ( and then we specified our first type that is 'string'
After that we use a pipe operator, the symbol is |.
Then we specify the next type that is Date and then we close the bracket
Had we wanted to add more types we needed to add one more | operator. This is how we would have done it
const customArr : (string | Date | boolean | number )[] = [true, 1, new Date(), 'Num']
We can do the same for 2-D array as well. If you will see in point 4, the customArr is accepting values in any order.
This is okay but in certain cases like storing customer details we want to store the values strictly like we want customer information stored inside array in name, age, address, customerSince, Ordernumber in this consecutive arrangement always.
In such case we need to use another TypeScript feature called Tuple. This blog is about arrays but here is a short definition and syntax of using Tuple
Tuples
Tuple is an array-like structure where each element represents some property of a record. Unline array where we have a collection of information, Tuple contains different properties to describe one single thing.
const hashTuple : [string, boolean, number] = ['Brown, true, 40]
The [string, boolean, number] makes sure that the value 'Brown', true and 40 are accepted in the same order.
How do we create a type for Tuple?
It's a repetitive task to write the tuple definition again and again. So to overcome that we make a 'type definition' for the purpose of re-using it.
This is how we will do it
We start by writing the keyword 'type'
After writing the 'type', we write the custom name we want to give to this type definition
After that we use and = and declare the types in an array format like we did for our Tuple example [string, boolean, number]
The type definition can be anything, the above is just and example
The above steps when followed will look like this
type customized_type = [string, number, boolean];
const tuple_example = ['Brown', 44, true];
Now try changing the values of 'Brown' and true; TypeScript will show an error. This strongly type order is very helpful when we want to store information in the same order everytime.
If you reached this far, your feedback will be appreciated. Thankyou so much for your time.