VSCode类型提示含多余&符号，如何合并显示对象类型？

我编写了一个可从字符串中推断URL路径参数的TypeScript类型Params，代码如下：

type Params<Pathname extends string> = string extends Pathname
  ? Record<string, string | undefined>
  : Pathname extends `${string}:${infer Param}/${infer Rest}`
  ? {
      [k in Param extends `${infer P}?` ? P : Param]: Param extends `${string}?`
        ? string | undefined
        : string;
    } & Params<`/${Rest}`>
  : Pathname extends `${string}:${infer Param}`
  ? {
      [k in Param extends `${infer P}?` ? P : Param]: Param extends `${string}?`
        ? string | undefined
        : string;
    }
  : {};

目前遇到的问题是，VSCode的类型提示弹窗中，该类型会显示为多个用&连接的对象结构：

(parameter) params: {
    name: string;
} & {
    another: string | undefined;
} & {
    thing: string;
}

我试过添加Flatten类型，但VSCode提示仍无法展示合并后的单一对象，期望的类型提示效果是：

(parameter) params: {
    name: string;
    another: string | undefined;
    thing: string;
}

解决方案 #

添加一个Prettify工具类型，通过重新映射对象键的方式，让TypeScript将交叉类型合并为单一对象结构，修改后的完整代码如下：

// 用于合并交叉类型为单一对象的工具类型
type Prettify<T> = {
  [K in keyof T]: T[K];
} & {};

type Params<Pathname extends string> = string extends Pathname
  ? Record<string, string | undefined>
  : Pathname extends `${string}:${infer Param}/${infer Rest}`
  ? Prettify<{
      [k in Param extends `${infer P}?` ? P : Param]: Param extends `${string}?`
        ? string | undefined
        : string;
    } & Params<`/${Rest}`>>
  : Pathname extends `${string}:${infer Param}`
  ? Prettify<{
      [k in Param extends `${infer P}?` ? P : Param]: Param extends `${string}?`
        ? string | undefined
        : string;
    }>
  : {};

原理说明 #

Prettify类型通过遍历并重新定义对象的每个键值对，再与空对象交叉，会触发TypeScript的类型简化逻辑，将原本分散的交叉对象合并成一个统一的对象结构，从而让VSCode的类型提示展示出合并后的完整对象。

内容的提问来源于stack exchange，提问作者kjjd84