Array in JavaScript is a high-level, list-like objects.
You should use literal syntax to create array.
❌ bad
const arrayGeneric = new Array<string>()✔️ good
const arrayLiteral: string[] = []
const arrayCast = [] as string[]Why?
The literal syntax is more compact and the most common.
You must declare array type for empty array with noImplicitAny and strictNullChecks.
✔️ must
export const x: string[] = []
x.push('abc')Why?
When both noImplicitAny and strictNullChecks are turned on,
empty array literals will have type never[] and not widen.
This is a small price to pay for getting much better control-flow analysis.
Should use Array<T> for complex array type.
May use literal syntax for primitive types and unions.
❌ bad
let simpleGeneric: Array<string>
type Person = {}
let complexGeneric: { people: Person[] }[]👌 either is fine
let declareSimpleUnionArray: (string | string[])[]
let declareUnionArrayGeneric: Array<string | string[]>✔️ good
let declareSimpleArray: string[]
type Car = {}
let declareComplexArray: Array<{ cars: Car[] }>Why?
The Array<> syntax is visually clear that your type is an array.
It also provides better focus on the internal type.
Must use .push() or .unshift() to add items to an array.
const someStack = [];
// bad
someStack[someStack.length] = 'abracadabra';
// good
someStack.push('abracadabra');Why?
Use direct assignment to add items at the end of an array is unconventional. It hinders readability.
Should use array spread to copy arrays.
// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];Why?
It is easier to read, and there is a performance gain 😎!.
Performance comparison: https://jsperf.com/spread-vs-copy
Should use array spread to concat arrays.
// bad
a.concat(b)
// good
[...a, ...b]Why?
It is easier to read, and there is a performance gain 😎!.
Performance comparison: https://jsperf.com/spread-vs-concat-vs-push
(use .push() if you really need the performance).
Additional references: