array-type
Require consistently using either
T[]
orArray<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.
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.
- ❌ Incorrect
- ✅ Correct
const x: Array<string> = ['a', 'b'];
const y: ReadonlyArray<string> = ['a', 'b'];
Open in Playgroundconst x: string[] = ['a', 'b'];
const y: readonly string[] = ['a', 'b'];
Open in Playground"generic"
Always use Array<T>
or ReadonlyArray<T>
for all array types.
- ❌ Incorrect
- ✅ Correct
const x: string[] = ['a', 'b'];
const y: readonly string[] = ['a', 'b'];
Open in Playgroundconst x: Array<string> = ['a', 'b'];
const y: ReadonlyArray<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).
- ❌ Incorrect
- ✅ Correct
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 Playgroundconst a: Array<string | number> = ['a', 'b'];
const b: Array<{ prop: string }> = [{ prop: 'a' }];
const c: Array<() => void> = [() => {}];
const d: MyType[] = ['a', 'b'];
const e: string[] = ['a', 'b'];
const f: readonly string[] = ['a', 'b'];
Open in PlaygroundCombination Matrix
This matrix lists all possible option combinations and their expected results for different types of Arrays.
defaultOption | readonlyOption | Array with simple type | Array with non simple type | Readonly array with simple type | Readonly array with non simple type |
---|---|---|---|---|---|
array | number[] | (Foo & Bar)[] | readonly number[] | readonly (Foo & Bar)[] | |
array | array | number[] | (Foo & Bar)[] | readonly number[] | readonly (Foo & Bar)[] |
array | array-simple | number[] | (Foo & Bar)[] | readonly number[] | ReadonlyArray<Foo & Bar> |
array | generic | number[] | (Foo & Bar)[] | ReadonlyArray<number> | ReadonlyArray<Foo & Bar> |
array-simple | number[] | Array<Foo & Bar> | readonly number[] | ReadonlyArray<Foo & Bar> | |
array-simple | array | number[] | Array<Foo & Bar> | readonly number[] | readonly (Foo & Bar)[] |
array-simple | array-simple | number[] | Array<Foo & Bar> | readonly number[] | ReadonlyArray<Foo & Bar> |
array-simple | generic | number[] | Array<Foo & Bar> | ReadonlyArray<number> | ReadonlyArray<Foo & Bar> |
generic | Array<number> | Array<Foo & Bar> | ReadonlyArray<number> | ReadonlyArray<Foo & Bar> | |
generic | array | Array<number> | Array<Foo & Bar> | readonly number[] | readonly (Foo & Bar)[] |
generic | array-simple | Array<number> | Array<Foo & Bar> | readonly number[] | ReadonlyArray<Foo & Bar> |
generic | generic | Array<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.