feat(dx): improve readability of displayed types for props

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<
+export function defineProps<TypeProps>(): Prettify<
-  Omit<TypeProps, BooleanKey<TypeProps>> & {
+  Readonly<
-    [K in keyof Pick<TypeProps, BooleanKey<TypeProps>>]-?: NotUndefined<
+    Omit<TypeProps, BooleanKey<TypeProps>> & {
-      TypeProps[K]
+      [K in keyof Pick<TypeProps, BooleanKey<TypeProps>>]-?: NotUndefined<
-    >
+        TypeProps[K]
-  }
+      >
+    }
+  >
 >
 // implementation
 export function defineProps() {

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<
+    props: LooseRequired<
-      LooseRequired<
+      Props &
-        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,

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
+  $props: Prettify<
-    ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
+    MakeDefaultsOptional extends true
-    : P & PublicProps
+      ? Partial<Defaults> & Omit<P & PublicProps, keyof Defaults>
+      : P & PublicProps
+  >
   $attrs: Data
   $refs: Data
   $slots: Slots

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