[improvement] AddressList: tsx (#2792)

packages/address-list/Item.tsx

@@ -4,16 +4,43 @@ import Icon from '../icon';
 import Cell from '../cell';
 import Radio from '../radio';
 
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type AddressItemData = {
+  id: string | number;
+  tel: string | number;
+  name: string;
+  address: string;
+};
+
+export type AddressItemProps = {
+  data: AddressItemData;
+  disabled?: boolean;
+  switchable?: boolean;
+};
+
+export type AddressItemEvents = {
+  onEdit(): void;
+  onSelect(): void;
+};
+
 const [sfc, bem] = use('address-item');
 
-function AddressItem(h, props, slots, ctx) {
+function AddressItem(
+  h: CreateElement,
+  props: AddressItemProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<AddressItemProps>
+) {
   const { disabled, switchable } = props;
 
   const renderRightIcon = () => (
     <Icon
       name="edit"
       class={bem('edit')}
-      onClick={event => {
+      onClick={(event: Event) => {
         event.stopPropagation();
         emit(ctx, 'edit');
       }}
@@ -57,4 +84,4 @@ AddressItem.props = {
   switchable: Boolean
 };
 
-export default sfc(AddressItem);
+export default sfc<AddressItemProps, AddressItemEvents>(AddressItem);

packages/address-list/en-US.md

@@ -90,7 +90,7 @@ export default {
 |------|------|------|
 | id | Id | `String | Number` |
 | name | Name | `String` |
-| tel | Phone | `String` |
+| tel | Phone | `String | Number` |
 | address | Address | `String` |
 
 ### Slot

packages/address-list/index.tsx

@@ -2,12 +2,34 @@ import { use } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import Button from '../button';
 import RadioGroup from '../radio-group';
-import AddressItem from './Item';
+import AddressItem, { AddressItemData } from './Item';
+
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { ScopedSlot, DefaultSlots } from '../utils/use/sfc';
+
+export type AddressListProps = {
+  value?: string | number;
+  switchable: boolean;
+  disabledText?: string;
+  addButtonText?: string;
+  list: AddressItemData[];
+  disabledList: AddressItemData[];
+};
+
+export type AddressListSlots = DefaultSlots & {
+  top?: ScopedSlot;
+};
 
 const [sfc, bem, t] = use('address-list');
 
-function AddressList(h, props, slots, ctx) {
-  const getList = (list, disabled) =>
+function AddressList(
+  h: CreateElement,
+  props: AddressListProps,
+  slots: AddressListSlots,
+  ctx: RenderContext<AddressListProps>
+) {
+  const getList = (list: AddressItemData[], disabled?: boolean) =>
     list.map((item, index) => (
       <AddressItem
         data={item}
@@ -31,7 +53,7 @@ function AddressList(h, props, slots, ctx) {
       {slots.top && slots.top()}
       <RadioGroup
         value={props.value}
-        onInput={event => {
+        onInput={(event: Event) => {
           emit(ctx, 'input', event);
         }}
       >
@@ -68,4 +90,4 @@ AddressList.props = {
   }
 };
 
-export default sfc(AddressList);
+export default sfc<AddressListProps>(AddressList);

packages/address-list/zh-CN.md

@@ -94,7 +94,7 @@ export default {
 |------|------|------|
 | id | 每条地址的唯一标识 | `String | Number` |
 | name | 收货人姓名 | `String` |
-| tel | 收货人手机号 | `String` |
+| tel | 收货人手机号 | `String | Number` |
 | address | 收货地址 | `String` |
 
 ### Slot

packages/utils/use/sfc.ts

@@ -53,11 +53,15 @@ export type FunctionalComponent<
 };
 
 export type TsxBaseProps = {
-  class: any;
-  style: any;
+  key: string | number;
   // hack for jsx prop spread
   props: any;
+  class: any;
+  style: {
+    [key: string]: string | number;
+  };
 };
+
 export type TsxComponent<Props, Events> = (
   props: Partial<Props & Events & TsxBaseProps>
 ) => VNode;