[type] classNames (#622)

dist/common/class-names.js

@@ -1,29 +1,28 @@
 const hasOwn = {}.hasOwnProperty;
-
 export function classNames() {
-  const classes = [];
-
-  for (let i = 0; i < arguments.length; i++) {
-    const arg = arguments[i];
-    if (!arg) continue;
-
-    const argType = typeof arg;
-
-    if (argType === 'string' || argType === 'number') {
-      classes.push(arg);
-    } else if (Array.isArray(arg) && arg.length) {
-      const inner = classNames.apply(null, arg);
-      if (inner) {
-        classes.push(inner);
-      }
-    } else if (argType === 'object') {
-      for (const key in arg) {
-        if (hasOwn.call(arg, key) && arg[key]) {
-          classes.push(key);
+    const classes = [];
+    for (let i = 0; i < arguments.length; i++) {
+        const arg = arguments[i];
+        if (!arg)
+            continue;
+        const argType = typeof arg;
+        if (argType === 'string' || argType === 'number') {
+            classes.push(arg);
+        }
+        else if (Array.isArray(arg) && arg.length) {
+            const inner = classNames.apply(null, arg);
+            if (inner) {
+                classes.push(inner);
+            }
+        }
+        else if (argType === 'object') {
+            for (const key in arg) {
+                if (hasOwn.call(arg, key) && arg[key]) {
+                    classes.push(key);
+                }
+            }
         }
-      }
     }
-  }
-
-  return classes.join(' ');
-};
+    return classes.join(' ');
+}
+;

packages/button/index.ts

@@ -21,7 +21,7 @@ VantComponent({
   },
 
   computed: {
-    classes() {
+    classes(): string {
       const { type, size, plain, disabled, loading, square, block } = this.data;
       return this.classNames(`van-button--${type}`, `van-button--${size}`, {
         'van-button--block': block,

packages/common/class-names.ts

@@ -1,6 +1,6 @@
 const hasOwn = {}.hasOwnProperty;
 
-export function classNames() {
+export function classNames(): string {
   const classes = [];
 
   for (let i = 0; i < arguments.length; i++) {

types/class-names.d.ts

@@ -0,0 +1,16 @@
+type ClassValue =
+  | string
+  | number
+  | ClassDictionary
+  | ClassArray
+  | undefined
+  | null
+  | boolean;
+
+interface ClassDictionary {
+  [id: string]: any;
+}
+
+interface ClassArray extends Array<ClassValue> {}
+
+export type classNames = (...classes: ClassValue[]) => string;

types/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference path="./weapp.d.ts" />
-import { Vue } from './vue';
+import { ComponentInstance } from './instance';
 
 type Mixins = any[];
 type ExternalClasses = string[];
@@ -14,12 +14,20 @@ type Relations<Instance> = {
   };
 };
 type RecordToAny<T> = { [K in keyof T]: any };
+type Accessors<T> = {
+  [K in keyof T]: (() => T[K])
+}
 
-export type CombinedComponentInstance<Data, Props, Methods, Computed> = Vue &
-  Methods &
+export type CombinedComponentInstance<
+  Data,
+  Props,
+  Methods,
+  Computed
+> = Methods &
   LooseObject &
-  Weapp.Component & {
-    data: Data & RecordToAny<Props> & RecordToAny<Computed>;
+  Weapp.Component &
+  ComponentInstance & {
+    data: Data & RecordToAny<Props> & Computed;
   };
 
 export type VantComponentOptions<Data, Props, Methods, Computed, Instance> = {
@@ -27,7 +35,7 @@ export type VantComponentOptions<Data, Props, Methods, Computed, Instance> = {
   props?: Props;
   field?: boolean;
   mixins?: Mixins;
-  computed?: Computed & ThisType<Instance>;
+  computed?: Accessors<Computed> & ThisType<Instance>;
   relations?: Relations<Instance>;
   classes?: ExternalClasses;
   methods?: Methods & ThisType<Instance>;

types/instance.ts

@@ -0,0 +1,6 @@
+import { classNames } from './class-names';
+
+export interface ComponentInstance {
+  $emit(name: string, detail?: any): void;
+  classNames: classNames;
+}

types/vue.d.ts

@@ -1,3 +0,0 @@
-export interface Vue {
-  $emit(name: string, detail?: any): void;
-}