Home > Back-end >  How to control tooltips for TypeScript types to make them more useful?
How to control tooltips for TypeScript types to make them more useful?

Time:07-13

Is it possible / how can one control typescript's produced tooltips? Below is an example of of my requirement:

type DontShowThisRedundantType<T, R = T extends ()=>infer X ? X : never> = (arg: R)=>void
type FnSwappedToArrray<T extends ()=>any> = [DontShowThisRedundantType<T>]

// hovering over A below shows the type to be `[DontShowThisRedundantType<()=>string,string>]`
// ideally it should show '[(arg: string)=>void]' which is its actual type and far more useful
type A = FnSwappedToArrray<()=>string> 

This is a cosmetic quality of life requirement as the type is still correct, however, the produced tooltip is not end developer-friendly.

code

CodePudding user response:

The TypeScript Language Server's Intellisense makes some (opinionated) choices about what to show in those informational pop-ups.

How TS resolves the displayed type information in these places is largely not in your control. The TS handbook says that using interfaces instead of type aliases has some influence toward displaying names instead of resolved anonymous types (which is the opposite of what you want).

It's not reasonable for the language server to recursively expand resolved types for display, so some heuristics are used to truncate the information for multiple reasons (performance/UI responsiveness, display area restrictions, etc.), and sometimes this leads to names being used in place of resolved types (like the tuple member in your example).

Consider this example:

import {type CSSProperties} from 'react';
type CSSProps = { [K in keyof CSSProperties]: CSSProperties[K] };

When I hover the type name CSSProps in the TS Playground, the popup shows me this type:

type CSSProps = {
    accentColor?: Property.AccentColor | undefined;
    alignContent?: Property.AlignContent | undefined;
    alignItems?: Property.AlignItems | undefined;
    ... 787 more ...;
    vectorEffect?: Property.VectorEffect | undefined;
}

It's very unlikely that the developer is interested in casually scanning 791 properties, and much more likely interested in one or a few specific properties (or a set which match a criteria). If you want to see fully expanded type information, type declaration files are a great first place to look (cmd/ctrl click), but you can also create type utilities for the purpose of filtering/transforming type information.

In summary, this is (for better or worse), not something that you have configurable control over at the current point in time. You can follow this relevant GitHub issue if interested: ms/TS#94679

CodePudding user response:

Destructure the type! e.g:

type DontShowThisRedundantType<T, R = T extends ()=>infer X ? X : never> = (arg: R)=>void
type FnSwappedToArrray<T extends ()=>any, R = DontShowThisRedundantType<T>> = [(...args: R extends (...arg0: infer S)=>void ? S: never)=>void]

// now A's tooltip shows '[(arg: string)=>void]'
type A = FnSwappedToArrray<()=>string> 

The solution makes types more verbose and increases compile-time, but that may be a preferable downside.

code

  • Related