Allow customization of type display format in hover tooltips

[lsby]

🔍 Search Terms

• customization type display
• Array or T[]

✅ Viability Checklist

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

In TypeScript, when hovering over a variable, the inferred type is displayed in a specific format.
For instance, an array of numbers is shown as number[].
However, some developers, including myself, prefer the alternative format Array<number> for readability and consistency with other generic types.

📃 Motivating Example

I have noticed that there is an WriteArrayAsGenericType flag in the Abstract Syntax Tree (AST) that can convert T[] to Array<T>.

I would like to request the addition of a configuration option in tsconfig.json to enable this flag, allowing developers to choose their preferred format for array types in hover tooltips.

For example:

{
  "compilerOptions": {
    "typeDisplayFormat": "generic" // Options could be "generic" for Array<number> or "shorthand" for number[]
  }
}

💻 Use Cases

Complex Type Readability: I frequently write functional code that can lead to complex types like Task<Maybe<Task<Maybe<T[]>>[]>>[]. The shorthand [] notation can make it difficult to understand the nested generic relationships. Displaying these types as Array<T> would significantly improve readability and comprehension.

Consistency: Most other generic types use angle brackets (e.g., Promise<T>, Map<K, V>), and only array types use the special shorthand (number[]). Aligning array types with this convention would ensure consistency across all types and improve clarity.

[jakebailey]

See also #59029

[lsby]

I found a temporary workaround that helped me with this issue.

I modified this file: C:\Users\<your_username>\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\node_modules\typescript\lib\typescript.js, and searched for WriteArrayAsGenericType. Here's the segment I found:

            if (context.flags & 2 /* WriteArrayAsGenericType */) {
              const typeArgumentNode = typeToTypeNodeHelper(typeArguments[0], context);
              return factory.createTypeReferenceNode(type2.target === globalArrayType ? "Array" : "ReadonlyArray", [typeArgumentNode]);
            }

I changed the condition context.flags & 2 to true. After restarting VSCode, it worked for me.

I believe this will stop working after a VSCode update, so it's just a temporary solution.

[Webmekanic]

@lsby can we collaborate to have a permanent solution for this?

[lsby]

@Webmekanic

I believe the permanent solution would be for the TypeScript team to add the configuration option we want, but there hasn't been a response so far.
Perhaps we could consider using a VSCode plugin to address this issue.
Do you have any other ideas?