Repository: TypeScript
Issue: Feature Request: Provide an option to configure the presentation of Arrays
Labels: Suggestion,Awaiting More Feedback

# Suggestion

<!--
  Please fill in each section completely. Thank you!
-->
Provide an option to configure the presentation of Arrays.

## 🔍 Search Terms

<!--
  💡 Did you know? TypeScript has over 2,000 open suggestions!
  🔎 Please search thoroughly before logging new feature requests as most common ideas already have a proposal in progress.
  The "Common Feature Requests" section of the FAQ lists many popular requests: https://github.com/Microsoft/TypeScript/wiki/FAQ#common-feature-requests

  Replace the text below:
-->

* [Array generics](https://github.com/microsoft/TypeScript/issues?q=Array+generics)
* [Array presentation](https://github.com/microsoft/TypeScript/issues?q=Array+presentation)
* [`Array<T>`](https://github.com/microsoft/TypeScript/issues?q=Array%3CT%3E)
* [`T[]`](https://github.com/microsoft/TypeScript/issues?q=T%5B%5D)

_This suggestion is hard to search for_ ☹️

## ✅ Viability Checklist

<!--
   Suggestions that don't meet all these criteria are very, very unlikely to be accepted.
   We always recommend reviewing the TypeScript design goals before investing time writing
   a proposal for ideas outside the scope of the project.
-->
My suggestion meets these guidelines:

* [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
* [x] This wouldn't change the runtime behaviour of existing JavaScript code
* [x] This could be implemented without emitting different JS based on the types of the expressions
* [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
* [x] This feature would agree with the rest of [TypeScript's Design Goals](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals).


## ⭐ Suggestion

<!-- A summary of what you'd like to see added or changed -->
I would like to see an option that will allow for altering the presentation of Arrays.

## 📃 Motivating Example

<!--
  If you were announcing this feature in a blog post, what's a short explanation that shows
  a developer why this feature improves the language?
-->

When reading through type errors or hovering over source code in VS Code, I find it hard to easily distinguish between Arrays, Tuples, Arrays of Tuples, Tuples with Arrays in them etc.

I personally use linting rules so that _I_ know that when I see a `[` or `]` in my source code, I am explicitly dealing with a Tuple.

For example, I find `Array<[Array<T>]>` far easier to quickly parse than `[T[]][]`. This may simply be attributed to my bias of writing code in the generic form. Though, this gets worse with increased levels of nesting.

## 🎨 Prior art

The **tslint** rule [`array-type`](https://palantir.github.io/tslint/rules/array-type/) can be used to enforce using the generic form of `Array<T>`. Secondarily, this rule was also ported as the **@typescript/eslint** rule [`array-type`](https://github.com/typescript-eslint/typescript-eslint/blob/63d1d8189c829c6543c7966a864b62c07fbd61a0/packages/eslint-plugin/docs/rules/array-type.md).

## 💻 Use Cases

<!--
  What do you want to use this for?
  What shortcomings exist with current approaches?
  What workarounds are you using in the meantime?
-->

I find hovering over my own code and seeing it presented differently a bit frustrating. Consider the following [playground](https://www.typescriptlang.org/play?#code/CYUwxgNghgTiAEYD2A7AzgF3rGAueAgjDFAJ4A8A2kSRZjAJYoDmAfALqtA) screenshot:

![Hover](https://i.imgur.com/Tw0AwWg.png)

In addition to[`array-type`](https://github.com/typescript-eslint/typescript-eslint/blob/63d1d8189c829c6543c7966a864b62c07fbd61a0/packages/eslint-plugin/docs/rules/array-type.md)s options of [`"array"`](https://github.com/typescript-eslint/typescript-eslint/blob/63d1d8189c829c6543c7966a864b62c07fbd61a0/packages/eslint-plugin/docs/rules/array-type.md#array), [`"generic"`](https://github.com/typescript-eslint/typescript-eslint/blob/63d1d8189c829c6543c7966a864b62c07fbd61a0/packages/eslint-plugin/docs/rules/array-type.md#generic), [`"array-simple"`](https://github.com/typescript-eslint/typescript-eslint/blob/63d1d8189c829c6543c7966a864b62c07fbd61a0/packages/eslint-plugin/docs/rules/array-type.md#array-simple), a fourth option of `"preserve"` could be added which would address the screenshot above.

I would like to suggest the following option:

| Flag | Type   | Default value                                                         |
|:-----|:-------|:----------------------------------------------------------------------|
| `--arrayType` | `"array" \| "generic" \| "array-simple" \| "preserve"` | `"preserve"` |