[improvement] ContactCard: tsx (#2781)

packages/cell/index.tsx

@@ -22,6 +22,10 @@ export type CellSlots = DefaultSlots & {
   'right-icon'?: ScopedSlot;
 };
 
+export type CellEvents = {
+  onClick(event: Event): void;
+};
+
 const [sfc, bem] = use('cell');
 
 function Cell(
@@ -102,4 +106,4 @@ Cell.props = {
   arrowDirection: String
 };
 
-export default sfc<CellProps>(Cell);
+export default sfc<CellProps, CellEvents>(Cell);

packages/contact-card/index.tsx

@@ -2,9 +2,26 @@ import { use } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import Cell from '../cell';
 
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/use/sfc';
+
 const [sfc, bem, t] = use('contact-card');
 
-function ContactCard(h, props, slots, ctx) {
+export type ContactCardProps = {
+  tel?: string;
+  name?: string;
+  type?: string;
+  addText?: string;
+  editable?: boolean;
+};
+
+function ContactCard(
+  h: CreateElement,
+  props: ContactCardProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<ContactCardProps>
+) {
   const { type, editable } = props;
 
   return (
@@ -15,7 +32,7 @@ function ContactCard(h, props, slots, ctx) {
       class={bem([type])}
       valueClass={bem('value')}
       icon={type === 'edit' ? 'contact' : 'add-square'}
-      onClick={event => {
+      onClick={(event: Event) => {
         if (editable) {
           emit(ctx, 'click', event);
         }
@@ -46,4 +63,4 @@ ContactCard.props = {
   }
 };
 
-export default sfc(ContactCard);
+export default sfc<ContactCardProps>(ContactCard);

packages/utils/use/sfc.ts

@@ -35,6 +35,8 @@ export interface VantComponentOptions extends ComponentOptions<Vue> {
 
 export type DefaultProps = Record<string, any>;
 
+export type DefaultEvents = {};
+
 export type FunctionalComponent<
   Props = DefaultProps,
   PropDefs = PropsDefinition<Props>
@@ -54,7 +56,9 @@ export type TsxBaseProps = {
   class?: any;
   style?: any;
 };
-export type TsxComponent<T> = (props: T & TsxBaseProps) => VNode;
+export type TsxComponent<Props, Events> = (
+  props: Props & Events & TsxBaseProps
+) => VNode;
 
 const arrayProp = {
   type: Array,
@@ -110,9 +114,9 @@ function transformFunctionalComponent(
   };
 }
 
-export default (name: string) => <T = DefaultProps>(
+export default (name: string) => <Props = DefaultProps, Events = DefaultEvents>(
   sfc: VantComponentOptions | FunctionalComponent
-): TsxComponent<T> => {
+): TsxComponent<Props, Events> => {
   if (typeof sfc === 'function') {
     sfc = transformFunctionalComponent(sfc);
   }
@@ -129,5 +133,5 @@ export default (name: string) => <T = DefaultProps>(
   sfc.name = name;
   sfc.install = install;
 
-  return sfc as TsxComponent<T>;
+  return sfc as TsxComponent<Props, Events>;
 };