What's the Difference Between Array<Type>, Type[], [Type] in TypeScript?

Here are the TLDR common methods of defining arrays in TypeScript.

[string] = Tuple (fixed size array)
string[] = Array (most common array)
Array = Array (same as the 2nd but preferred if you need different types in the array)

When defining an array in TypeScript you might think it is okay to define it using [string]. I have made this mistake & I find others making it often as well. This is actually defining a tuple, which is probably not the array you are wanting.

How to Create Tuples with TypeScript

The TypeScript handbook does a great job of defining a tuple, which is common in many other languages.

"Tuple types allow you to express an array where the type of a fixed number of elements is known, but need not be the same." https://www.typescriptlang.org/docs/handbook/basic-types.html#tuple

let x: [string, number];
x = ["hello", 10];

A common use of tuples is storing output after running a function, especially for short status messages like writing to a file or submitting an HTTP request.

let status: [string, number] = submitContent(text, urlPath);
console.log(status);
//(2) ["error", 400]

On a side note, the above example would be a great situation to use destructuring.

How to Create a Single Type Array with TypeScript

The proper way to do the more common JavaScript array is to use the following:

let x: string[];
x = ["hello", "world"]

How to Create Mixed Type Arrays with TypeScript

In cases where the array is mixed with different types you would use the Array <string> version. Otherwise, you may get an error stating Typescript cannot Invoke an expression whose type lacks a call signature. Here's an example of an array with multiple types.

let x: Array<string | number>
x = ["hello", "world", 2]

This second version is common if your array consists of different types of objects. For example:

let inventory: Array<Boat, SpaceShip, Wagon> 

The list of types above are all vehicle types that could possibly share a parent type called Vehicle or Transportation. Depending on your exact problem, you could solve it with Generics. Another possible solution is to define a type like the following:

type Vehicle = Boat | SpaceShip | Wagon
let inventory: [Vehicle]

Summary

To summarize it up.

• Use the Array<string | number> version if you don't know how many items will be in your Array.
• Use the tuple [string, number] version for small arrays with a fixed number of items that always have the same type in the order specified.