Array Types

Sometimes we may want to work with a multi-element, ordered data structure, where position of each item has some special meaning or convention. This kind of structure is often called a tuple.

So you're familiar, hopefully, with JavaScript arrays.
So there's fileExtensions, typescript inferred this array into String[].

const fileExtensions = ["js", "ts"];

There's also another way you could do this.
So, the idiomatic way to write your code would be:

Don't do this

I would encourage you not to do this, because if you're a React developer, those little greater than, less than signs,they will clash with your JSX and cause weird things to happen.

const fileExtensions: Array<string> = ["js", "ts"];

this is really the preferred way to type arrays.

const fileExtensions: string[] = ["js", "ts"];

Tuple

Arrays of fixed length, or tuples.

const cars = [
  //? Let's look at an array of objects
  {
    make: "Toyota",
    model: "Corolla",
    year: 2002,
  },
];
const [year, make, model] = myCar; //✔️ Destructuring

Above code the typescript can added the [string, number] inferred type to the array.
So when perform the Destructuring it will be the year show type string and number both. That is not a good because if the value is string then it will show the string not also show number.

what is the valid use of casting?

So here we can see part of the problem is,We can keep adding stuff to this array or we can create.
Effectively, we don't have a convention that TypeScript is helping us with here.All it's doing is enforcing that the contents of this array,every member is either a string or number,but we can add a bunch of junk here and TypeScript is not gonna help us.
So, We can either cast or we can use an explicit type annotation like this.

note

Using the fixed length array, or tuple, syntax in TypeScript, we can enforce that the array has a fixed number of elements, and that each element has a specific type, that is not possible in some case because we can add more elements in the array.

let myCar: [number, string, string] = [2002, "Toyota", "Corolla"];
myCar = ["Honda", 2017, "Accord"]; //! Wrong convention
myCar = [2017, "Honda", "Accord", "Sedan"]; //! Too many elements

So instead of doing something like this,which is how you type an array of arbitrary length, with a tuple,we're gonna put stuff in between the square brackets.

let myCar: number[] = [2002, "Toyota", "Corolla"];

readonly

readonly it tells TypeScript that it should treat this as an immutable array or a read only
It's a way to tell TypeScript that this array should not be modified.
In blow code you see the tuple i used but if the element is added or deleted the effect the size of array will be changed, and they show the error.Then using the readonly keyword to make the array immutable.

const numPair: [number, number] = [4, 5]; //✔️ Valid
const numTriplet: [number, number, number] = [7]; //! Invalid

[101, 102, 103].length; //? number[].length
numPair.length; //? [number, number] length

numPair.push(6); // [4, 5, 6]
numPair.pop(); // [4, 5]
numPair.pop(); // [4]
numPair.pop(); // []

numPair.length; //! ❌ DANGER ❌

const roNumPair: readonly [number, number] = [4, 5];
roNumPair.length;
roNumPair.push(6); // [4, 5, 6] //! Not allowed
roNumPair.pop(); // [4, 5] //! Not allowed

Tuple​

readonly​

Tuple

readonly