types: improve computed types (#343)

packages/reactivity/src/computed.ts

@@ -10,21 +10,24 @@ export interface WritableComputedRef<T> extends Ref<T> {
   readonly effect: ReactiveEffect<T>
 }
 
+export type ComputedGetter<T> = () => T
+export type ComputedSetter<T> = (v: T) => void
+
 export interface WritableComputedOptions<T> {
-  get: () => T
+  get: ComputedGetter<T>
-  set: (v: T) => void
+  set: ComputedSetter<T>
 }
 
-export function computed<T>(getter: () => T): ComputedRef<T>
+export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>
 export function computed<T>(
   options: WritableComputedOptions<T>
 ): WritableComputedRef<T>
 export function computed<T>(
-  getterOrOptions: (() => T) | WritableComputedOptions<T>
+  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
 ): any {
   const isReadonly = isFunction(getterOrOptions)
   const getter = isReadonly
-    ? (getterOrOptions as (() => T))
+    ? (getterOrOptions as ComputedGetter<T>)
     : (getterOrOptions as WritableComputedOptions<T>).get
   const setter = isReadonly
     ? __DEV__

packages/reactivity/src/index.ts

@@ -12,7 +12,9 @@ export {
   computed,
   ComputedRef,
   WritableComputedRef,
-  WritableComputedOptions
+  WritableComputedOptions,
+  ComputedGetter,
+  ComputedSetter
 } from './computed'
 export {
   effect,

packages/runtime-core/src/apiOptions.ts

@@ -30,7 +30,11 @@ import {
   DebuggerHook,
   ErrorCapturedHook
 } from './apiLifecycle'
-import { reactive } from '@vue/reactivity'
+import {
+  reactive,
+  ComputedGetter,
+  WritableComputedOptions
+} from '@vue/reactivity'
 import { ComponentObjectPropsOptions, ExtractPropTypes } from './componentProps'
 import { Directive } from './directives'
 import { ComponentPublicInstance } from './componentProxy'
@@ -100,14 +104,10 @@ export type ComponentOptions =
 // TODO legacy component definition also supports constructors with .options
 type LegacyComponent = ComponentOptions
 
-export interface ComputedOptions {
+export type ComputedOptions = Record<
-  [key: string]:
+  string,
-    | Function
+  ComputedGetter<any> | WritableComputedOptions<any>
-    | {
+>
-        get: Function
-        set: Function
-      }
-}
 
 export interface MethodOptions {
   [key: string]: Function

packages/runtime-core/src/apiReactivity.ts

@@ -26,7 +26,8 @@ import {
   ComputedRef,
   WritableComputedOptions,
   ReactiveEffect,
-  WritableComputedRef
+  WritableComputedRef,
+  ComputedGetter
 } from '@vue/reactivity'
 
 import { currentInstance } from './component'
@@ -39,12 +40,12 @@ export function recordEffect(effect: ReactiveEffect) {
   }
 }
 
-export function computed<T>(getter: () => T): ComputedRef<T>
+export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>
 export function computed<T>(
   options: WritableComputedOptions<T>
 ): WritableComputedRef<T>
 export function computed<T>(
-  getterOrOptions: (() => T) | WritableComputedOptions<T>
+  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
 ) {
   const c = _computed(getterOrOptions as any)
   recordEffect(c.effect)