From 4c9bfd2b999ce472f7481aae4f9dc5bb9f76628e Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 24 Mar 2023 15:06:43 +0800
Subject: [PATCH] feat(dx): improve readability of displayed types for props

---
 packages/runtime-core/src/apiSetupHelpers.ts  | 20 ++++++++++---------
 packages/runtime-core/src/componentOptions.ts | 15 +++++++-------
 .../src/componentPublicInstance.ts            | 11 ++++++----
 packages/shared/src/typeUtils.ts              |  2 ++
 4 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 798b3a0c000..882e0389c97 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -1,4 +1,4 @@
-import { isArray, isPromise, isFunction } from '@vue/shared'
+import { isArray, isPromise, isFunction, Prettify } from '@vue/shared'
 import {
   getCurrentInstance,
   setCurrentInstance,
@@ -55,18 +55,20 @@ const warnRuntimeUsage = (method: string) =>
 // overload 1: runtime props w/ array
 export function defineProps<PropNames extends string = string>(
   props: PropNames[]
-): Readonly<{ [key in PropNames]?: any }>
+): Prettify<Readonly<{ [key in PropNames]?: any }>>
 // overload 2: runtime props w/ object
 export function defineProps<
   PP extends ComponentObjectPropsOptions = ComponentObjectPropsOptions
->(props: PP): Readonly<ExtractPropTypes<PP>>
+>(props: PP): Prettify<Readonly<ExtractPropTypes<PP>>>
 // overload 3: typed-based declaration
-export function defineProps<TypeProps>(): Readonly<
-  Omit<TypeProps, BooleanKey<TypeProps>> & {
-    [K in keyof Pick<TypeProps, BooleanKey<TypeProps>>]-?: NotUndefined<
-      TypeProps[K]
-    >
-  }
+export function defineProps<TypeProps>(): Prettify<
+  Readonly<
+    Omit<TypeProps, BooleanKey<TypeProps>> & {
+      [K in keyof Pick<TypeProps, BooleanKey<TypeProps>>]-?: NotUndefined<
+        TypeProps[K]
+      >
+    }
+  >
 >
 // implementation
 export function defineProps() {
diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
index 956db272ed0..b5324c80dd0 100644
--- a/packages/runtime-core/src/componentOptions.ts
+++ b/packages/runtime-core/src/componentOptions.ts
@@ -15,7 +15,8 @@ import {
   isArray,
   NOOP,
   isPromise,
-  LooseRequired
+  LooseRequired,
+  Prettify
 } from '@vue/shared'
 import { isRef, Ref } from '@vue/reactivity'
 import { computed } from './apiComputed'
@@ -112,14 +113,14 @@ export interface ComponentOptionsBase<
     ComponentCustomOptions {
   setup?: (
     this: void,
-    props: Readonly<
-      LooseRequired<
-        Props &
+    props: LooseRequired<
+      Props &
+        Prettify<
           UnwrapMixinsType<
             IntersectionMixin<Mixin> & IntersectionMixin<Extends>,
             'P'
           >
-      >
+        >
     >,
     ctx: SetupContext<E>
   ) => Promise<RawBindings> | RawBindings | RenderFunction | void
@@ -262,7 +263,7 @@ export type ComponentOptionsWithArrayProps<
   EE extends string = string,
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  Props = Readonly<{ [key in PropNames]?: any }> & EmitsToProps<E>
+  Props = Prettify<Readonly<{ [key in PropNames]?: any } & EmitsToProps<E>>>
 > = ComponentOptionsBase<
   Props,
   RawBindings,
@@ -307,7 +308,7 @@ export type ComponentOptionsWithObjectProps<
   EE extends string = string,
   I extends ComponentInjectOptions = {},
   II extends string = string,
-  Props = Readonly<ExtractPropTypes<PropsOptions>> & EmitsToProps<E>,
+  Props = Prettify<Readonly<ExtractPropTypes<PropsOptions> & EmitsToProps<E>>>,
   Defaults = ExtractDefaultPropTypes<PropsOptions>
 > = ComponentOptionsBase<
   Props,
diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts
index 61a0e01324d..f083f062052 100644
--- a/packages/runtime-core/src/componentPublicInstance.ts
+++ b/packages/runtime-core/src/componentPublicInstance.ts
@@ -14,7 +14,8 @@ import {
   extend,
   isString,
   isFunction,
-  UnionToIntersection
+  UnionToIntersection,
+  Prettify
 } from '@vue/shared'
 import {
   toRaw,
@@ -185,9 +186,11 @@ export type ComponentPublicInstance<
 > = {
   $: ComponentInternalInstance
   $data: D
-  $props: MakeDefaultsOptional extends true
-    ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
-    : P & PublicProps
+  $props: Prettify<
+    MakeDefaultsOptional extends true
+      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
+      : P & PublicProps
+  >
   $attrs: Data
   $refs: Data
   $slots: Slots
diff --git a/packages/shared/src/typeUtils.ts b/packages/shared/src/typeUtils.ts
index 0d767469b4d..67fb47c23b3 100644
--- a/packages/shared/src/typeUtils.ts
+++ b/packages/shared/src/typeUtils.ts
@@ -1,3 +1,5 @@
+export type Prettify<T> = { [K in keyof T]: T[K] } & {}
+
 export type UnionToIntersection<U> = (
   U extends any ? (k: U) => void : never
 ) extends (k: infer I) => void