See typescript computed types

Question

I'm working with typescript types that are often based on other types, using Omit, Pick and the likes. Overall it works OK, but it's not great for readability once it reaches some complexity.

I'm looking for a way to see the result of the type computation.

For instance, with something like :

type Item = {
  value: string;
  id: string;
}

type TitleItem = {
  title: string;
} & Pick<Item, 'id'>

I'm looking for a tool/plugin/whatever generating :

type TitleItem = {
  title: string;
  id: string;
}

Preferably inside IntelliJ, but I'll be happy to consider any tool suggested :)

(And if anyone think that the problem is in the code and not in the tooling, well... you might be right. But this way of doing things helps with linking together types that should change together so it's not all bad.)

Answer 1

Define the following type :

type Id<T> = { [P in keyof T]: T[P] }

and apply it that way :

type TitleItem = Id<{
  title: string;
} & Pick<Item, 'id'>> 

// Boom, shows up like that  
type TitleItem = {
  title: string;
  id: string;
}

Playground