Skip to content

Allow customization of type display format in hover tooltips #59370

Open
@lsby

Description

@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.

Activity

jakebailey

jakebailey commented on Jul 20, 2024

@jakebailey
Member

See also #59029

lsby

lsby commented on Jul 20, 2024

@lsby
Author

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

Webmekanic commented on Jul 21, 2024

@Webmekanic

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

lsby

lsby commented on Jul 21, 2024

@lsby
Author

@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?

added
SuggestionAn idea for TypeScript
Awaiting More FeedbackThis means we'd like to hear from more people who would be helped by this feature
on Jul 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Awaiting More FeedbackThis means we'd like to hear from more people who would be helped by this featureSuggestionAn idea for TypeScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @jakebailey@RyanCavanaugh@lsby@Webmekanic

        Issue actions

          Allow customization of type display format in hover tooltips Β· Issue #59370 Β· microsoft/TypeScript