Skip to main content

array-type

Require consistently using either T[] or Array<T> for arrays.

🎨

Extending "plugin:@typescript-eslint/stylistic" in an ESLint configuration enables this rule.

🔧

Some problems reported by this rule are automatically fixable by the --fix ESLint command line option.

TypeScript provides two equivalent ways to define an array type: T[] and Array<T>. The two styles are functionally equivalent. Using the same style consistently across your codebase makes it easier for developers to read and understand array types.

.eslintrc.cjs
module.exports = {
"rules": {
"@typescript-eslint/array-type": "error"
}
};

Try this rule in the playground ↗

Options

This rule accepts the following options:

type ArrayOption = 'array' | 'array-simple' | 'generic';

type Options = [
{
/** The array type expected for mutable cases. */
default?: ArrayOption;
/** The array type expected for readonly cases. If omitted, the value for `default` will be used. */
readonly?: ArrayOption;
},
];

const defaultOptions: Options = [{ default: 'array' }];

The default config will enforce that all mutable and readonly arrays use the 'array' syntax.

"array"

Always use T[] or readonly T[] for all array types.

const x: Array<string> = ['a', 'b'];
const y: ReadonlyArray<string> = ['a', 'b'];
Open in Playground

"generic"

Always use Array<T> or ReadonlyArray<T> for all array types.

const x: string[] = ['a', 'b'];
const y: readonly string[] = ['a', 'b'];
Open in Playground

"array-simple"

Use T[] or readonly T[] for simple types (i.e. types which are just primitive names or type references). Use Array<T> or ReadonlyArray<T> for all other types (union types, intersection types, object types, function types, etc).

const a: (string | number)[] = ['a', 'b'];
const b: { prop: string }[] = [{ prop: 'a' }];
const c: (() => void)[] = [() => {}];
const d: Array<MyType> = ['a', 'b'];
const e: Array<string> = ['a', 'b'];
const f: ReadonlyArray<string> = ['a', 'b'];
Open in Playground

Combination Matrix

This matrix lists all possible option combinations and their expected results for different types of Arrays.

defaultOptionreadonlyOptionArray with simple typeArray with non simple typeReadonly array with simple typeReadonly array with non simple type
arraynumber[](Foo & Bar)[]readonly number[]readonly (Foo & Bar)[]
arrayarraynumber[](Foo & Bar)[]readonly number[]readonly (Foo & Bar)[]
arrayarray-simplenumber[](Foo & Bar)[]readonly number[]ReadonlyArray<Foo & Bar>
arraygenericnumber[](Foo & Bar)[]ReadonlyArray<number>ReadonlyArray<Foo & Bar>
array-simplenumber[]Array<Foo & Bar>readonly number[]ReadonlyArray<Foo & Bar>
array-simplearraynumber[]Array<Foo & Bar>readonly number[]readonly (Foo & Bar)[]
array-simplearray-simplenumber[]Array<Foo & Bar>readonly number[]ReadonlyArray<Foo & Bar>
array-simplegenericnumber[]Array<Foo & Bar>ReadonlyArray<number>ReadonlyArray<Foo & Bar>
genericArray<number>Array<Foo & Bar>ReadonlyArray<number>ReadonlyArray<Foo & Bar>
genericarrayArray<number>Array<Foo & Bar>readonly number[]readonly (Foo & Bar)[]
genericarray-simpleArray<number>Array<Foo & Bar>readonly number[]ReadonlyArray<Foo & Bar>
genericgenericArray<number>Array<Foo & Bar>ReadonlyArray<number>ReadonlyArray<Foo & Bar>

When Not To Use It

This rule is purely a stylistic rule for maintaining consistency in your project. You can turn it off if you don't want to keep a consistent style for array types.

However, keep in mind that inconsistent style can harm readability in a project. We recommend picking a single option for this rule that works best for your project.

Resources