My goal is to improve developer experience (DX) by expanding the types for parameters in a function signature. I want the tooltip when hovering over the following function to provide more detailed information:
type Props = {
a: number;
};
const func = (props: Props) => {};
I would like the tooltip to display this expanded type:
const func: (props: {
a: number;
}) => void
instead of the unexpanded version:
const func: (props: Props) => void;
Due to coding standards in the project, I am unable to inline the type directly in the signature.
Through experimentation with functions and the Prettify helper by Matt Pocock, I discovered that using a generic function will expand all parameters related to the generic. For example:
type Prettify<T> = {
[K in keyof T]: T[K];
} & {};
type PropsGeneric<T> = Prettify<{
a: number;
}>;
const funcGeneric = <T extends any>(props: PropsGeneric<T>) => {};
This approach will expand the prop in the signature like so:
const funcGeneric: <T extends unknown>(props: {
a: number;
}) => void
I also observed that various combinations, such as using function statements instead of arrow functions or omitting prettify, can prevent props from expanding.
Is there a way to achieve the expanded prop in the tooltip without unnecessarily utilizing generics in the function signature in TypeScript 5.4?
If so, is there a more reliable method that also works with function statements?