From 33e4bfb861570886a5eee7b366bc9c873a25c0a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kiho=20=C2=B7=20Cham?= <monkindey@163.com>
Date: Tue, 6 Aug 2019 12:55:52 +0800
Subject: [PATCH] refactor: next in TypeScript (#206)

---
 packages/antd/package.json                    |   3 +-
 packages/antd/src/components/button.tsx       |   2 +-
 packages/antd/src/components/grid.tsx         |   1 +
 packages/antd/src/components/layout.tsx       |  17 +--
 packages/antd/src/fields/array.tsx            |   4 +-
 packages/antd/src/fields/table.tsx            |  21 +--
 packages/antd/src/form.tsx                    |   5 +-
 packages/antd/src/type.tsx                    | 123 ++++++------------
 .../antd/src/types/components/button.d.ts     |   5 -
 .../antd/src/types/components/layout.d.ts     |  16 ---
 packages/next/package.json                    |   3 +-
 .../src/components/{button.js => button.tsx}  |  11 +-
 ...formButtonGroup.js => formButtonGroup.tsx} |  55 ++++++--
 .../src/components/{layout.js => layout.tsx}  |  48 ++++---
 .../next/src/fields/{array.js => array.tsx}   |   4 +-
 .../src/fields/{boolean.js => boolean.ts}     |   0
 .../next/src/fields/{cards.js => cards.tsx}   |  11 +-
 .../src/fields/{checkbox.js => checkbox.ts}   |   0
 .../next/src/fields/{date.js => date.tsx}     |   0
 .../next/src/fields/{number.js => number.ts}  |   0
 .../src/fields/{password.js => password.tsx}  |  14 +-
 .../next/src/fields/{radio.js => radio.ts}    |   0
 .../next/src/fields/{range.js => range.ts}    |   0
 .../next/src/fields/{rating.js => rating.ts}  |   0
 .../next/src/fields/{string.js => string.ts}  |   0
 .../next/src/fields/{table.js => table.tsx}   |  63 +++++----
 .../src/fields/{textarea.js => textarea.ts}   |   0
 packages/next/src/fields/{time.js => time.ts} |   0
 .../src/fields/{transfer.js => transfer.ts}   |   0
 .../next/src/fields/{upload.js => upload.tsx} |  13 +-
 packages/next/src/{form.js => form.tsx}       |  41 +++---
 packages/next/src/{index.js => index.ts}      |   1 +
 packages/next/src/{locale.js => locale.ts}    |   0
 packages/next/src/type.tsx                    |  23 ++++
 packages/next/src/{utils.js => utils.tsx}     |  16 ++-
 packages/react/src/decorators/connect.ts      |   2 +-
 packages/types/src/form.ts                    |  62 +++++++++
 37 files changed, 341 insertions(+), 223 deletions(-)
 delete mode 100644 packages/antd/src/types/components/button.d.ts
 delete mode 100644 packages/antd/src/types/components/layout.d.ts
 rename packages/next/src/components/{button.js => button.tsx} (73%)
 rename packages/next/src/components/{formButtonGroup.js => formButtonGroup.tsx} (74%)
 rename packages/next/src/components/{layout.js => layout.tsx} (84%)
 rename packages/next/src/fields/{array.js => array.tsx} (97%)
 rename packages/next/src/fields/{boolean.js => boolean.ts} (100%)
 rename packages/next/src/fields/{cards.js => cards.tsx} (95%)
 rename packages/next/src/fields/{checkbox.js => checkbox.ts} (100%)
 rename packages/next/src/fields/{date.js => date.tsx} (100%)
 rename packages/next/src/fields/{number.js => number.ts} (100%)
 rename packages/next/src/fields/{password.js => password.tsx} (95%)
 rename packages/next/src/fields/{radio.js => radio.ts} (100%)
 rename packages/next/src/fields/{range.js => range.ts} (100%)
 rename packages/next/src/fields/{rating.js => rating.ts} (100%)
 rename packages/next/src/fields/{string.js => string.ts} (100%)
 rename packages/next/src/fields/{table.js => table.tsx} (88%)
 rename packages/next/src/fields/{textarea.js => textarea.ts} (100%)
 rename packages/next/src/fields/{time.js => time.ts} (100%)
 rename packages/next/src/fields/{transfer.js => transfer.ts} (100%)
 rename packages/next/src/fields/{upload.js => upload.tsx} (92%)
 rename packages/next/src/{form.js => form.tsx} (94%)
 rename packages/next/src/{index.js => index.ts} (99%)
 rename packages/next/src/{locale.js => locale.ts} (100%)
 create mode 100644 packages/next/src/type.tsx
 rename packages/next/src/{utils.js => utils.tsx} (86%)

diff --git a/packages/antd/package.json b/packages/antd/package.json
index 4b4c1e8d9eb..2ed50f087cf 100644
--- a/packages/antd/package.json
+++ b/packages/antd/package.json
@@ -29,6 +29,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
+    "@uform/types": "^0.3.7",
     "@uform/react": "^0.3.7",
     "@uform/utils": "^0.3.7",
     "classnames": "^2.2.6",
@@ -40,4 +41,4 @@
     "access": "public"
   },
   "gitHead": "4d068dad6183e8da294a4c899a158326c0b0b050"
-}
\ No newline at end of file
+}
diff --git a/packages/antd/src/components/button.tsx b/packages/antd/src/components/button.tsx
index 6320f5f231b..55ed720516c 100644
--- a/packages/antd/src/components/button.tsx
+++ b/packages/antd/src/components/button.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { FormConsumer } from '@uform/react'
 import { Button } from 'antd'
-import { ISubmitProps } from '../types/components/button'
+import { ISubmitProps } from '../type'
 
 export const Submit = ({ showLoading, ...props }: ISubmitProps) => {
   return (
diff --git a/packages/antd/src/components/grid.tsx b/packages/antd/src/components/grid.tsx
index 6c95a4b8e2d..e9773c591a1 100644
--- a/packages/antd/src/components/grid.tsx
+++ b/packages/antd/src/components/grid.tsx
@@ -57,6 +57,7 @@ export class Row extends Component<IRowProps> {
 
     let newChildren = toArr(children)
     const gutterNumber = parseInt(gutter, 10)
+
     if (gutterNumber !== 0) {
       const halfGutterString = `${gutterNumber / 2}px`
       others.style = {
diff --git a/packages/antd/src/components/layout.tsx b/packages/antd/src/components/layout.tsx
index b299f3c28fd..40e922ff245 100644
--- a/packages/antd/src/components/layout.tsx
+++ b/packages/antd/src/components/layout.tsx
@@ -1,25 +1,14 @@
 import React, { Component, useEffect, useRef } from 'react'
 import { createVirtualBox } from '@uform/react'
 import { toArr } from '@uform/utils'
+import { IFormItemGridProps } from '@uform/types'
 import { Card, Row, Col } from 'antd'
 import styled from 'styled-components'
 import cls from 'classnames'
 
 import { FormLayoutConsumer, FormItem, FormLayoutProvider } from '../form'
-import { IFormItemGridProps, IFormCardProps, IFormBlockProps } from '../type'
-import { TFormLayout } from '../types/components/layout'
-
-export interface IFormLayoutProps {
-  className?: string
-  inline?: boolean
-  labelAlign?: 'left' | 'top' | 'inset'
-  wrapperCol?: number
-  labelCol?: number
-  labelTextAlign?: 'left' | 'right'
-  size?: 'small' | 'medium' | 'large'
-  style?: React.CSSProperties
-  children: React.ReactNode
-}
+import { IFormCardProps, IFormBlockProps } from '../type'
+import { TFormLayout } from '../type'
 
 const normalizeCol = (
   col: { span: number; offset?: number } | number,
diff --git a/packages/antd/src/fields/array.tsx b/packages/antd/src/fields/array.tsx
index ba8f5c23771..66a9a96b388 100644
--- a/packages/antd/src/fields/array.tsx
+++ b/packages/antd/src/fields/array.tsx
@@ -3,7 +3,7 @@ import { registerFormField, createArrayField } from '@uform/react'
 import { Icon } from 'antd'
 import styled, { css } from 'styled-components'
 
-export const CircleButton = styled.div.attrs({ className: 'cricle-btn' })`
+export const CircleButton = styled['div'].attrs({ className: 'cricle-btn' })`
   ${props => (!props.hasText ? 'width:30px; height:30px;' : '')}
   margin-right:10px;
   border-radius: ${props => (!props.hasText ? '100px' : 'none')};
@@ -25,7 +25,7 @@ export const CircleButton = styled.div.attrs({ className: 'cricle-btn' })`
 }
 `
 
-export const TextButton = styled.div.attrs({
+export const TextButton = styled['div'].attrs({
   className: 'ant-btn-text'
 })`
   display: inline-block;
diff --git a/packages/antd/src/fields/table.tsx b/packages/antd/src/fields/table.tsx
index d6c7f97e154..0f5e7950ed2 100644
--- a/packages/antd/src/fields/table.tsx
+++ b/packages/antd/src/fields/table.tsx
@@ -228,17 +228,20 @@ const Table = styled(
     }
 
     public getColumns(children) {
-      const columns = []
-      React.Children.forEach(children, child => {
-        if (React.isValidElement(child as React.ReactElement)) {
-          if (
-            child.type === Column ||
-            child.type.displayName === '@schema-table-column'
-          ) {
-            columns.push(child.props)
+      const columns: IColumnProps[] = []
+      React.Children.forEach<React.ReactElement<IColumnProps, typeof Column>>(
+        children,
+        child => {
+          if (React.isValidElement(child)) {
+            if (
+              child.type === Column ||
+              child.type.displayName === '@schema-table-column'
+            ) {
+              columns.push(child.props)
+            }
           }
         }
-      })
+      )
 
       return columns
     }
diff --git a/packages/antd/src/form.tsx b/packages/antd/src/form.tsx
index 5933d6dff41..8ca9ab8b6b9 100644
--- a/packages/antd/src/form.tsx
+++ b/packages/antd/src/form.tsx
@@ -1,16 +1,15 @@
 import React from 'react'
-import { registerFormWrapper, registerFieldMiddleware } from '@uform/react'
 import classNames from 'classnames'
 import { Row, Col, Popover, Icon } from 'antd'
 import styled from 'styled-components'
+import { registerFormWrapper, registerFieldMiddleware } from '@uform/react'
+import { IFormItemProps, IFormProps } from '@uform/types'
 
 import LOCALE from './locale'
 import { isFn, moveTo, isStr, stringLength } from './utils'
-import { IFormItemProps, IFormProps } from './type'
 
 /**
  * 轻量级 Form，不包含任何数据管理能力
- *
  */
 
 export const {
diff --git a/packages/antd/src/type.tsx b/packages/antd/src/type.tsx
index 540b39e6290..c3e57c2496a 100644
--- a/packages/antd/src/type.tsx
+++ b/packages/antd/src/type.tsx
@@ -1,119 +1,72 @@
-import { ISchema } from '@uform/utils'
-// import { ColProps } from 'antd/lib/grid/col'
+import { IFieldProps } from '@uform/react'
+import { ColProps } from 'antd/es/col'
+import { CardProps } from 'antd/es/card'
+import { BaseButtonProps } from 'antd/es/button/button'
 
-export enum LabelAlign {
-  TOP = 'top',
-  INSET = 'inset',
-  LEFT = 'left'
+export interface ISubmitProps extends Omit<BaseButtonProps, 'loading'> {
+  showLoading?: boolean
 }
 
-export enum LabelTextAlign {
-  LEFT = 'left',
-  RIGHT = 'right'
-}
-
-export enum Size {
-  LARGE = 'large',
-  MEDIUM = 'medium',
-  SMALL = 'small'
-}
-
-export interface IFormConsumerProps {
-  // labelCol: ColProps | number
-  labelCol: object | number
-  wrapperCol: object | number
-  autoAddColon: boolean
-  size: Size
+export interface IFormLayoutProps {
+  className: string
   inline: boolean
-  labelAlign: LabelAlign
-  labelTextAlign: LabelTextAlign
+  labelAlign: 'left' | 'top' | 'inset'
+  wrapperCol: number
+  labelCol: number
+  labelTextAlign: 'left' | 'right'
+  size: 'small' | 'medium' | 'large'
+  style: React.CSSProperties
+  name: string
+  render: (fieldProps: IFieldProps) => string | JSX.Element | null
 }
 
+export type TFormLayout = React.FunctionComponent<Partial<IFormLayoutProps>>
+
 export interface IRowProps {
   prefix?: string
   pure?: boolean
   wrap?: boolean
   fixed?: boolean
   hidden?: boolean
-  gutter?: string
   className?: string
-
-  // TODO
   fixedWidth?: string | number
-  style?: object
+  style?: React.CSSProperties
+  component?: keyof JSX.IntrinsicElements | React.ComponentType<any>
+  gutter?: string
   align?: string | number
   justify?: string | number
-  component?: any
   children: React.ReactNode
 }
 
-export interface IColProps {
+type ColSpanType = number | string
+
+export interface ColSize {
+  span?: ColSpanType
+  offset?: ColSpanType
+}
+
+export interface IColProps extends ColProps {
   prefix: string
   pure?: boolean
   className?: string
-  span?: string | number
-  offset?: string | number
   fixedSpan?: string | number
   fixedOffset?: string | number
   hidden?: boolean
-
-  // TODO
   align?: any
-  xxs?: any
-  xs?: any
-  s?: any
-  m?: any
-  l?: any
-  xl?: any
-  component?: any
+  component?: keyof JSX.IntrinsicElements | React.ComponentType<any>
   children?: React.ReactNode
+  xxs?: ColSpanType | ColSize
+  xs?: ColSpanType | ColSize
+  s?: ColSpanType | ColSize
+  m?: ColSpanType | ColSize
+  l?: ColSpanType | ColSize
+  xl?: ColSpanType | ColSize
 }
 
-export interface IFormItemGridProps {
-  name?: string
-  help?: React.ReactNode
-  extra?: React.ReactNode
-  description?: string
-  title?: string
-  cols?: any
-}
-
-export interface IFormCardProps {
+export interface IFormCardProps extends CardProps {
   className?: string
 }
 
-export interface IFormBlockProps {
+export interface IFormBlockProps extends CardProps {
   className?: string
 }
-
-export interface IFormProps extends IFormConsumerProps {
-  className: string
-  style: object
-  layout: string
-  children: React.ReactNode
-  component: string
-  prefix: string
-  maxTipsNum: number
-  onValidateFailed: () => void
-}
-
-export interface IFormItemProps extends IFormConsumerProps {
-  id: string
-  required: boolean
-  label: React.ReactNode
-  prefix: string
-  extra: object
-  maxTipsNum: number
-
-  // TODO
-  validateState: any
-
-  isTableColItem: boolean
-  help: React.ReactNode
-  noMinHeight: boolean
-  children: React.ReactElement
-  className: string
-  style: object
-  type: string
-  schema: ISchema
-}
diff --git a/packages/antd/src/types/components/button.d.ts b/packages/antd/src/types/components/button.d.ts
deleted file mode 100644
index 0160a267b58..00000000000
--- a/packages/antd/src/types/components/button.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { BaseButtonProps } from 'antd/lib/button/button'
-
-export interface ISubmitProps extends Omit<BaseButtonProps, 'loading'> {
-  showLoading?: boolean
-}
diff --git a/packages/antd/src/types/components/layout.d.ts b/packages/antd/src/types/components/layout.d.ts
deleted file mode 100644
index 87365b2e433..00000000000
--- a/packages/antd/src/types/components/layout.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { IFieldProps } from '@uform/react'
-
-export interface IFormLayoutProps {
-  className: string
-  inline: boolean
-  labelAlign: 'left' | 'top' | 'inset'
-  wrapperCol: number
-  labelCol: number
-  labelTextAlign: 'left' | 'right'
-  size: 'small' | 'medium' | 'large'
-  style: React.CSSProperties
-  name: string
-  render: (fieldProps: IFieldProps) => string | JSX.Element | null
-}
-
-export type TFormLayout = React.FunctionComponent<Partial<IFormLayoutProps>>
diff --git a/packages/next/package.json b/packages/next/package.json
index 5745f4de90f..33511524cfc 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -25,6 +25,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
+    "@uform/types": "^0.3.7",
     "@uform/react": "^0.3.7",
     "@uform/utils": "^0.3.7",
     "classnames": "^2.2.6",
@@ -40,4 +41,4 @@
     "access": "public"
   },
   "gitHead": "4d068dad6183e8da294a4c899a158326c0b0b050"
-}
\ No newline at end of file
+}
diff --git a/packages/next/src/components/button.js b/packages/next/src/components/button.tsx
similarity index 73%
rename from packages/next/src/components/button.js
rename to packages/next/src/components/button.tsx
index 77c45ab5b7a..8bd75f4d1ac 100644
--- a/packages/next/src/components/button.js
+++ b/packages/next/src/components/button.tsx
@@ -1,8 +1,13 @@
 import React from 'react'
 import { FormConsumer } from '@uform/react'
 import { Button } from '@alifd/next'
+import { ButtonProps } from '@alifd/next/types/button'
 
-export const Submit = ({ showLoading, ...props }) => {
+export interface ISubmitProps extends Omit<ButtonProps, 'loading'> {
+  showLoading?: boolean
+}
+
+export const Submit = ({ showLoading, ...props }: ISubmitProps) => {
   return (
     <FormConsumer selector={['submitting', 'submitted']}>
       {({ status }) => {
@@ -26,10 +31,10 @@ Submit.defaultProps = {
   showLoading: true
 }
 
-export const Reset = props => {
+export const Reset = (props: ButtonProps) => {
   return (
     <FormConsumer>
-      {({ status, reset }) => {
+      {({ reset }) => {
         return (
           <Button {...props} onClick={reset}>
             {props.children || '重置'}
diff --git a/packages/next/src/components/formButtonGroup.js b/packages/next/src/components/formButtonGroup.tsx
similarity index 74%
rename from packages/next/src/components/formButtonGroup.js
rename to packages/next/src/components/formButtonGroup.tsx
index e639a19509a..a4dd3ac89be 100644
--- a/packages/next/src/components/formButtonGroup.js
+++ b/packages/next/src/components/formButtonGroup.tsx
@@ -1,11 +1,20 @@
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
-import { Row, Col } from '@alifd/next/lib/grid'
+import { Grid } from '@alifd/next'
 import { FormLayoutConsumer } from '../form'
 import Sticky from 'react-stikky'
 import cls from 'classnames'
 import styled from 'styled-components'
 
+const { Row, Col } = Grid
+
+export interface IOffset {
+  top: number | string
+  right: number | string
+  bottom: number | string
+  left: number | string
+}
+
 const getAlign = align => {
   if (align === 'start' || align === 'end') return align
   if (align === 'left' || align === 'top') return 'flex-start'
@@ -13,7 +22,16 @@ const getAlign = align => {
   return align
 }
 
-const isElementInViewport = (rect, { offset = 0, threshold = 0 } = {}) => {
+const isElementInViewport = (
+  rect: ClientRect,
+  {
+    offset = 0,
+    threshold = 0
+  }: {
+    offset?: IOffset | number
+    threshold?: number
+  } = {}
+): boolean => {
   const { top, right, bottom, left, width, height } = rect
   const intersection = {
     t: bottom,
@@ -28,21 +46,40 @@ const isElementInViewport = (rect, { offset = 0, threshold = 0 } = {}) => {
   }
 
   return (
-    intersection.t >= (offset.top || offset + elementThreshold.y) &&
-    intersection.r >= (offset.right || offset + elementThreshold.x) &&
-    intersection.b >= (offset.bottom || offset + elementThreshold.y) &&
-    intersection.l >= (offset.left || offset + elementThreshold.x)
+    intersection.t >=
+      ((offset as IOffset).top || (offset as number) + elementThreshold.y) &&
+    intersection.r >=
+      ((offset as IOffset).right || (offset as number) + elementThreshold.x) &&
+    intersection.b >=
+      ((offset as IOffset).bottom || (offset as number) + elementThreshold.y) &&
+    intersection.l >=
+      ((offset as IOffset).left || (offset as number) + elementThreshold.x)
   )
 }
 
+export interface IFormButtonGroupProps {
+  sticky?: boolean
+  style?: React.CSSProperties
+  itemStyle?: React.CSSProperties
+  className?: string
+
+  triggerDistance?: any
+  offsetDistance?: any
+  zIndex?: number
+  span?: number
+  offset?: number
+}
+
 export const FormButtonGroup = styled(
-  class FormButtonGroup extends Component {
+  class FormButtonGroup extends Component<IFormButtonGroupProps> {
     static defaultProps = {
       span: 24,
       zIndex: 100
     }
 
-    renderChildren() {
+    private formNode: HTMLElement
+
+    private renderChildren() {
       const { children, itemStyle, offset, span } = this.props
       return (
         <div className="button-group">
@@ -91,7 +128,7 @@ export const FormButtonGroup = styled(
         return (
           <div>
             <FormLayoutConsumer>
-              {({ inline, FormRef } = {}) => {
+              {({ FormRef } = {}) => {
                 if (!FormRef) return
                 return (
                   <Sticky
diff --git a/packages/next/src/components/layout.js b/packages/next/src/components/layout.tsx
similarity index 84%
rename from packages/next/src/components/layout.js
rename to packages/next/src/components/layout.tsx
index ca0620aafac..0978c4458f7 100644
--- a/packages/next/src/components/layout.js
+++ b/packages/next/src/components/layout.tsx
@@ -1,15 +1,26 @@
 import React, { Component, useEffect, useRef } from 'react'
 import { createVirtualBox } from '@uform/react'
 import { toArr } from '@uform/utils'
-import { Row, Col } from '@alifd/next/lib/grid'
+import { Grid } from '@alifd/next'
 import Card from '@alifd/next/lib/card'
-import { FormLayoutConsumer, FormItem, FormLayoutProvider } from '../form'
 import styled from 'styled-components'
 import cls from 'classnames'
+import { IFormItemGridProps } from '@uform/types'
+
+import { FormLayoutConsumer, FormItem, FormLayoutProvider } from '../form'
+import { IFormCardProps, IFormBlockProps } from '../type'
 
-const normalizeCol = (col, _default = 0) => {
-  if (!col) return _default
-  return typeof col === 'object' ? col : { span: col }
+const { Row, Col } = Grid
+
+const normalizeCol = (
+  col: { span: number; offset?: number } | number,
+  defaultValue: { span: number } = { span: 0 }
+): { span: number; offset?: number } => {
+  if (!col) {
+    return defaultValue
+  } else {
+    return typeof col === 'object' ? col : { span: col }
+  }
 }
 
 export const FormLayout = createVirtualBox(
@@ -71,7 +82,7 @@ export const FormLayoutItem = props =>
 
 export const FormItemGrid = createVirtualBox(
   'grid',
-  class extends Component {
+  class extends Component<IFormItemGridProps> {
     renderFormItem(children) {
       const { title, help, name, extra, ...props } = this.props
       return React.createElement(
@@ -89,22 +100,23 @@ export const FormItemGrid = createVirtualBox(
     }
 
     renderGrid() {
-      let {
-        children,
-        cols,
+      const {
+        children: rawChildren,
+        cols: rawCols,
         title,
         description,
         help,
         extra,
         ...props
       } = this.props
-      children = toArr(children)
-      cols = toArr(cols).map(col => normalizeCol(col))
+
+      const children = toArr(rawChildren)
+      const cols = toArr(rawCols).map(col => normalizeCol(col))
       const childNum = children.length
 
       if (cols.length < childNum) {
-        let offset = childNum - cols.length
-        let lastSpan =
+        let offset: number = childNum - cols.length
+        let lastSpan: number =
           24 -
           cols.reduce((buf, col) => {
             return (
@@ -114,7 +126,7 @@ export const FormItemGrid = createVirtualBox(
             )
           }, 0)
         for (let i = 0; i < offset; i++) {
-          cols.push(parseInt(offset / lastSpan))
+          cols.push({ span: Math.floor(lastSpan / offset) })
         }
       }
 
@@ -147,7 +159,7 @@ export const FormItemGrid = createVirtualBox(
 export const FormCard = createVirtualBox(
   'card',
   styled(
-    class extends Component {
+    class extends Component<IFormCardProps> {
       static defaultProps = {
         contentHeight: 'auto'
       }
@@ -172,7 +184,7 @@ export const FormCard = createVirtualBox(
 export const FormBlock = createVirtualBox(
   'block',
   styled(
-    class extends Component {
+    class extends Component<IFormBlockProps> {
       static defaultProps = {
         contentHeight: 'auto'
       }
@@ -213,14 +225,14 @@ export const FormTextBox = createVirtualBox(
       children,
       ...props
     }) => {
-      const ref = useRef()
+      const ref: React.RefObject<HTMLDivElement> = useRef()
       const arrChildren = toArr(children)
       const split = text.split('%s')
       let index = 0
       useEffect(() => {
         if (ref.current) {
           const eles = ref.current.querySelectorAll('.text-box-field')
-          eles.forEach(el => {
+          eles.forEach((el: HTMLElement) => {
             const ctrl = el.querySelector(
               '.next-form-item-control>*:not(.next-form-item-space)'
             )
diff --git a/packages/next/src/fields/array.js b/packages/next/src/fields/array.tsx
similarity index 97%
rename from packages/next/src/fields/array.js
rename to packages/next/src/fields/array.tsx
index 20e583df88d..3221814b335 100644
--- a/packages/next/src/fields/array.js
+++ b/packages/next/src/fields/array.tsx
@@ -3,7 +3,7 @@ import { registerFormField, createArrayField } from '@uform/react'
 import { Button, Icon } from '@alifd/next'
 import styled from 'styled-components'
 
-export const CircleButton = styled.div.attrs({ className: 'cricle-btn' })`
+export const CircleButton = styled['div'].attrs({ className: 'cricle-btn' })`
   ${props =>
     !props.hasText
       ? `width:30px;
@@ -77,7 +77,7 @@ registerFormField(
                   <div className="array-item-operator">
                     {this.renderRemove(index, item)}
                     {this.renderMoveDown(index, item)}
-                    {this.renderMoveUp(index, item)}
+                    {this.renderMoveUp(index)}
                   </div>
                 </div>
               )
diff --git a/packages/next/src/fields/boolean.js b/packages/next/src/fields/boolean.ts
similarity index 100%
rename from packages/next/src/fields/boolean.js
rename to packages/next/src/fields/boolean.ts
diff --git a/packages/next/src/fields/cards.js b/packages/next/src/fields/cards.tsx
similarity index 95%
rename from packages/next/src/fields/cards.js
rename to packages/next/src/fields/cards.tsx
index 0b9ab840b82..00b886f03e4 100644
--- a/packages/next/src/fields/cards.js
+++ b/packages/next/src/fields/cards.tsx
@@ -12,13 +12,13 @@ const FormCardsField = styled(
         <Fragment>
           {this.renderRemove(index, item)}
           {this.renderMoveDown(index, item)}
-          {this.renderMoveUp(index, item)}
+          {this.renderMoveUp(index)}
           {this.renderExtraOperations(index)}
         </Fragment>
       )
     }
 
-    renderEmpty(title) {
+    renderCardEmpty(title) {
       return (
         <Card
           style={this.getProps('style')}
@@ -26,7 +26,7 @@ const FormCardsField = styled(
           className="card-list"
           contentHeight="auto"
         >
-          {super.renderEmpty()}
+          {this.renderEmpty()}
         </Card>
       )
     }
@@ -45,7 +45,8 @@ const FormCardsField = styled(
         renderMoveUp,
         renderOperations,
         ...others
-      } = this.getProps() || {}
+      } = this.getProps() || ({} as any)
+
       /* eslint-enable @typescript-eslint/no-unused-vars */
       return (
         <div
@@ -71,7 +72,7 @@ const FormCardsField = styled(
               </Card>
             )
           })}
-          {value.length === 0 && this.renderEmpty(title)}
+          {value.length === 0 && this.renderCardEmpty(title)}
           <div className="addition-wrapper">
             {value.length > 0 && this.renderAddition()}
           </div>
diff --git a/packages/next/src/fields/checkbox.js b/packages/next/src/fields/checkbox.ts
similarity index 100%
rename from packages/next/src/fields/checkbox.js
rename to packages/next/src/fields/checkbox.ts
diff --git a/packages/next/src/fields/date.js b/packages/next/src/fields/date.tsx
similarity index 100%
rename from packages/next/src/fields/date.js
rename to packages/next/src/fields/date.tsx
diff --git a/packages/next/src/fields/number.js b/packages/next/src/fields/number.ts
similarity index 100%
rename from packages/next/src/fields/number.js
rename to packages/next/src/fields/number.ts
diff --git a/packages/next/src/fields/password.js b/packages/next/src/fields/password.tsx
similarity index 95%
rename from packages/next/src/fields/password.js
rename to packages/next/src/fields/password.tsx
index bdd2a80b51f..5664e29b93d 100644
--- a/packages/next/src/fields/password.js
+++ b/packages/next/src/fields/password.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { connect, registerFormField } from '@uform/react'
 import { Input } from '@alifd/next'
+import { InputProps } from '@alifd/next/types/input'
 import styled from 'styled-components'
 import { mapStyledProps } from '../utils'
 
@@ -149,15 +150,19 @@ const getStrength = val => {
   }
 }
 
+export interface IPasswordProps extends InputProps {
+  checkStrength: boolean
+}
+
 const Password = styled(
-  class Password extends React.Component {
+  class Password extends React.Component<IPasswordProps> {
     state = {
       value: this.props.value || this.props.defaultValue,
       strength: 0,
       eye: false
     }
 
-    componentDidUpdate(prevProps, prevState) {
+    componentDidUpdate(prevProps) {
       if (
         prevProps.value !== this.props.value &&
         this.props.value !== this.state.value
@@ -169,7 +174,7 @@ const Password = styled(
       }
     }
 
-    onChangeHandler = value => {
+    onChangeHandler = (value, e) => {
       this.setState(
         {
           value,
@@ -177,7 +182,7 @@ const Password = styled(
         },
         () => {
           if (this.props.onChange) {
-            this.props.onChange(value)
+            this.props.onChange(value, e)
           }
         }
       )
@@ -239,6 +244,7 @@ const Password = styled(
         innerAfter,
         ...others
       } = this.props
+
       return (
         <div className={className}>
           <Input
diff --git a/packages/next/src/fields/radio.js b/packages/next/src/fields/radio.ts
similarity index 100%
rename from packages/next/src/fields/radio.js
rename to packages/next/src/fields/radio.ts
diff --git a/packages/next/src/fields/range.js b/packages/next/src/fields/range.ts
similarity index 100%
rename from packages/next/src/fields/range.js
rename to packages/next/src/fields/range.ts
diff --git a/packages/next/src/fields/rating.js b/packages/next/src/fields/rating.ts
similarity index 100%
rename from packages/next/src/fields/rating.js
rename to packages/next/src/fields/rating.ts
diff --git a/packages/next/src/fields/string.js b/packages/next/src/fields/string.ts
similarity index 100%
rename from packages/next/src/fields/string.js
rename to packages/next/src/fields/string.ts
diff --git a/packages/next/src/fields/table.js b/packages/next/src/fields/table.tsx
similarity index 88%
rename from packages/next/src/fields/table.js
rename to packages/next/src/fields/table.tsx
index 8c458063c76..d090ce7adc4 100644
--- a/packages/next/src/fields/table.js
+++ b/packages/next/src/fields/table.tsx
@@ -7,9 +7,29 @@ import styled from 'styled-components'
 /**
  * 轻量级Table，用next table实在太重了
  **/
+
+export interface IColumnProps {
+  title?: string
+  dataIndex?: string
+  width?: string | number
+  cell: (item?: any, index?: number) => React.ReactElement
+}
+
+export interface ITableProps {
+  className?: string
+  dataSource: any[]
+}
+
+class Column extends Component<IColumnProps> {
+  static displayName = '@schema-table-column'
+  render() {
+    return this.props.children
+  }
+}
+
 const Table = styled(
-  class Table extends Component {
-    renderCell({ record, col, rowIndex, colIndex }) {
+  class Table extends Component<ITableProps> {
+    renderCell({ record, col, rowIndex }) {
       return (
         <div className="next-table-cell-wrapper">
           {isFn(col.cell)
@@ -54,8 +74,7 @@ const Table = styled(
                           {this.renderCell({
                             record,
                             col,
-                            rowIndex,
-                            colIndex
+                            rowIndex
                           })}
                         </td>
                       )
@@ -88,17 +107,20 @@ const Table = styled(
     }
 
     getColumns(children) {
-      const columns = []
-      React.Children.forEach(children, child => {
-        if (React.isValidElement(child)) {
-          if (
-            child.type === Column ||
-            child.type.displayName === '@schema-table-column'
-          ) {
-            columns.push(child.props)
+      const columns: IColumnProps[] = []
+      React.Children.forEach<React.ReactElement<IColumnProps, typeof Column>>(
+        children,
+        child => {
+          if (React.isValidElement(child)) {
+            if (
+              child.type === Column ||
+              child.type.displayName === '@schema-table-column'
+            ) {
+              columns.push(child.props)
+            }
           }
         }
-      })
+      )
 
       return columns
     }
@@ -216,20 +238,15 @@ const Table = styled(
   }
 `
 
-class Column extends Component {
-  static displayName = '@schema-table-column'
-  render() {
-    return this.props.children
-  }
-}
-
 registerFormField(
   'table',
   styled(
     class extends ArrayField {
       createFilter(key, payload) {
         const { schema } = this.props
-        const columnFilter = schema['x-props'] && schema['x-props'].columnFilter
+        const columnFilter: (key: string, payload: any) => boolean =
+          schema['x-props'] && schema['x-props'].columnFilter
+
         return (render, otherwise) => {
           if (isFn(columnFilter)) {
             return columnFilter(key, payload)
@@ -300,8 +317,8 @@ registerFormField(
                       <div className="array-item-operator">
                         {this.renderRemove(index, item)}
                         {this.renderMoveDown(index, item)}
-                        {this.renderMoveUp(index, item)}
-                        {this.renderExtraOperations(index, item)}
+                        {this.renderMoveUp(index)}
+                        {this.renderExtraOperations(index)}
                       </div>
                     )
                   }}
diff --git a/packages/next/src/fields/textarea.js b/packages/next/src/fields/textarea.ts
similarity index 100%
rename from packages/next/src/fields/textarea.js
rename to packages/next/src/fields/textarea.ts
diff --git a/packages/next/src/fields/time.js b/packages/next/src/fields/time.ts
similarity index 100%
rename from packages/next/src/fields/time.js
rename to packages/next/src/fields/time.ts
diff --git a/packages/next/src/fields/transfer.js b/packages/next/src/fields/transfer.ts
similarity index 100%
rename from packages/next/src/fields/transfer.js
rename to packages/next/src/fields/transfer.ts
diff --git a/packages/next/src/fields/upload.js b/packages/next/src/fields/upload.tsx
similarity index 92%
rename from packages/next/src/fields/upload.js
rename to packages/next/src/fields/upload.tsx
index a565d122204..887c816a759 100644
--- a/packages/next/src/fields/upload.js
+++ b/packages/next/src/fields/upload.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { connect, registerFormField } from '@uform/react'
 import { toArr, isArr, isEqual, mapStyledProps } from '../utils'
 import { Button, Upload } from '@alifd/next'
+import { UploadProps, CardProps } from '@alifd/next/types/upload'
 const { Card: UploadCard, Dragger: UploadDragger } = Upload
 
 const exts = [
@@ -108,12 +109,16 @@ const normalizeFileList = fileList => {
 const shallowClone = val =>
   isArr(val) ? [...val] : typeof val === 'object' ? { ...val } : val
 
+export interface IUploaderProps extends UploadProps {
+  locale: { [name: string]: any }
+}
+
 registerFormField(
   'upload',
   connect({
     getProps: mapStyledProps
   })(
-    class Uploader extends React.Component {
+    class Uploader extends React.Component<IUploaderProps> {
       static defaultProps = {
         action:
           'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',
@@ -125,7 +130,7 @@ registerFormField(
         value: toArr(this.props.value)
       }
 
-      onChangeHandler = fileList => {
+      onChangeHandler = (fileList?: any) => {
         const { onChange } = this.props
         fileList = toArr(fileList)
         if (
@@ -159,10 +164,11 @@ registerFormField(
 
       render() {
         const { listType, locale, onChange, value, ...others } = this.props
+
         if (listType.indexOf('card') > -1) {
           return (
             <UploadCard
-              {...others}
+              {...(others as CardProps)}
               value={shallowClone(this.state.value)}
               onChange={this.onChangeHandler}
               listType="card"
@@ -171,6 +177,7 @@ registerFormField(
         }
         if (listType.indexOf('dragger') > -1) {
           return (
+            // @ts-ignore 感觉是 next 那边对于 Dragger 的 props 定义错了
             <UploadDragger
               {...others}
               value={shallowClone(this.state.value)}
diff --git a/packages/next/src/form.js b/packages/next/src/form.tsx
similarity index 94%
rename from packages/next/src/form.js
rename to packages/next/src/form.tsx
index 5aa66114b55..753fc95e9d5 100644
--- a/packages/next/src/form.js
+++ b/packages/next/src/form.tsx
@@ -1,17 +1,20 @@
 import React from 'react'
-import { registerFormWrapper, registerFieldMiddleware } from '@uform/react'
 import classNames from 'classnames'
+import styled from 'styled-components'
 import { ConfigProvider, Balloon, Icon } from '@alifd/next'
-import { Row, Col } from '@alifd/next/lib/grid'
+import { registerFormWrapper, registerFieldMiddleware } from '@uform/react'
+import { Grid } from '@alifd/next'
+import { IFormItemProps, IFormProps } from '@uform/types'
+
 import LOCALE from './locale'
-import styled from 'styled-components'
 import { isFn, moveTo, isStr, stringLength } from './utils'
 
 /**
  * 轻量级Next Form，不包含任何数据管理能力
- *
  */
 
+const { Row, Col } = Grid
+
 export const {
   Provider: FormLayoutProvider,
   Consumer: FormLayoutConsumer
@@ -38,12 +41,12 @@ const isPopDescription = (description, maxTipsNum = 30) => {
 }
 
 export const FormItem = styled(
-  class FormItem extends React.Component {
+  class FormItem extends React.Component<IFormItemProps> {
     static defaultProps = {
       prefix: 'next-'
     }
 
-    getItemLabel() {
+    private getItemLabel() {
       const {
         id,
         required,
@@ -64,6 +67,7 @@ export const FormItem = styled(
       }
 
       const ele = (
+        // @ts-ignore
         <label htmlFor={id} required={required} key="label">
           {label}
           {label === ' ' ? '' : autoAddColon ? '：' : ''}
@@ -92,7 +96,7 @@ export const FormItem = styled(
       )
     }
 
-    getItemWrapper() {
+    private getItemWrapper() {
       const {
         labelCol,
         wrapperCol,
@@ -146,7 +150,7 @@ export const FormItem = styled(
       )
     }
 
-    renderHelper() {
+    private renderHelper() {
       return (
         <Balloon
           closable={false}
@@ -158,7 +162,7 @@ export const FormItem = styled(
       )
     }
 
-    render() {
+    public render() {
       /* eslint-disable @typescript-eslint/no-unused-vars */
       const {
         className,
@@ -181,8 +185,8 @@ export const FormItem = styled(
         schema,
         ...others
       } = this.props
-      /* eslint-enable @typescript-eslint/no-unused-vars */
 
+      /* eslint-enable @typescript-eslint/no-unused-vars */
       const itemClassName = classNames({
         [`${prefix}form-item`]: true,
         [`${prefix}${labelAlign}`]: labelAlign,
@@ -274,7 +278,7 @@ registerFormWrapper(OriginForm => {
   `
 
   return ConfigProvider.config(
-    class Form extends React.Component {
+    class Form extends React.Component<IFormProps> {
       static defaultProps = {
         component: 'form',
         prefix: 'next-',
@@ -293,7 +297,7 @@ registerFormWrapper(OriginForm => {
           if (isFn(onValidateFailed)) {
             onValidateFailed(...args)
           }
-          const container = this.FormRef.current
+          const container = this.FormRef.current as HTMLElement
           if (container) {
             const errors = container.querySelectorAll('.next-form-item-help')
             if (errors && errors.length) {
@@ -318,13 +322,12 @@ registerFormWrapper(OriginForm => {
           component,
           labelCol,
           wrapperCol,
-          getErrorScrollOffset,
-          errorScrollToElement,
           style,
           prefix,
           maxTipsNum,
           ...others
         } = this.props
+
         const formClassName = classNames({
           [`${prefix}form`]: true,
           [`${prefix}inline`]: inline, // 内联
@@ -359,7 +362,8 @@ registerFormWrapper(OriginForm => {
           </FormLayoutProvider>
         )
       }
-    }
+    },
+    {}
   )
 })
 
@@ -380,7 +384,12 @@ registerFieldMiddleware(Field => {
       getSchema,
       required
     } = props
-    if (path.length === 0) return React.createElement(Field, props) // 根节点是不需要包FormItem的
+
+    if (path.length === 0) {
+      // 根节点是不需要包FormItem的
+      return React.createElement(Field, props)
+    }
+
     return React.createElement(
       FormLayoutConsumer,
       {},
diff --git a/packages/next/src/index.js b/packages/next/src/index.ts
similarity index 99%
rename from packages/next/src/index.js
rename to packages/next/src/index.ts
index 80cdbc7788e..4112f3bf455 100644
--- a/packages/next/src/index.js
+++ b/packages/next/src/index.ts
@@ -15,6 +15,7 @@ import './fields/cards'
 import './fields/table'
 import './fields/textarea'
 import './fields/password'
+
 import { mapStyledProps, mapTextComponent } from './utils'
 import { SchemaForm } from '@uform/react'
 export * from '@uform/react'
diff --git a/packages/next/src/locale.js b/packages/next/src/locale.ts
similarity index 100%
rename from packages/next/src/locale.js
rename to packages/next/src/locale.ts
diff --git a/packages/next/src/type.tsx b/packages/next/src/type.tsx
new file mode 100644
index 00000000000..ca81f01ee24
--- /dev/null
+++ b/packages/next/src/type.tsx
@@ -0,0 +1,23 @@
+import { CardProps } from '@alifd/next/types/card'
+import { RowProps, ColProps } from '@alifd/next/types/grid'
+
+export interface IRowProps extends RowProps {
+  prefix?: string
+  pure?: boolean
+  className?: string
+  style?: object
+}
+
+export interface IColProps extends ColProps {
+  prefix: string
+  pure?: boolean
+  className?: string
+}
+
+export interface IFormCardProps extends CardProps {
+  className?: string
+}
+
+export interface IFormBlockProps extends CardProps {
+  className?: string
+}
diff --git a/packages/next/src/utils.js b/packages/next/src/utils.tsx
similarity index 86%
rename from packages/next/src/utils.js
rename to packages/next/src/utils.tsx
index fc4a3d5b75f..f47182d0dcb 100644
--- a/packages/next/src/utils.js
+++ b/packages/next/src/utils.tsx
@@ -3,6 +3,8 @@ import { Select } from '@alifd/next'
 import styled from 'styled-components'
 import { isFn } from '@uform/utils'
 import MoveTo from 'moveto'
+import { IConnectProps, IFieldProps } from '@uform/react'
+
 export * from '@uform/utils'
 
 const Text = styled(props => {
@@ -54,7 +56,10 @@ export const acceptEnum = component => {
   }
 }
 
-export const mapStyledProps = (props, { loading, size, errors }) => {
+export const mapStyledProps = (
+  props: IConnectProps,
+  { loading, size, errors }: IFieldProps
+) => {
   if (loading) {
     props.state = props.state || 'loading'
   } else if (errors && errors.length) {
@@ -65,7 +70,14 @@ export const mapStyledProps = (props, { loading, size, errors }) => {
   }
 }
 
-export const mapTextComponent = (Target, props, { editable, name }) => {
+export const mapTextComponent = (
+  Target: React.ComponentClass,
+  props,
+  {
+    editable,
+    name
+  }: { editable: boolean | ((name: string) => boolean); name: string }
+): React.ComponentClass => {
   if (editable !== undefined) {
     if (isFn(editable)) {
       if (!editable(name)) {
diff --git a/packages/react/src/decorators/connect.ts b/packages/react/src/decorators/connect.ts
index 3e76c2a48d0..3cf37c8dd1c 100644
--- a/packages/react/src/decorators/connect.ts
+++ b/packages/react/src/decorators/connect.ts
@@ -116,7 +116,7 @@ export interface IConnectOptions {
   valueName?: string
   eventName?: string
   defaultProps?: object
-  getValueFromEvent?: (event?: string, value?: any) => any
+  getValueFromEvent?: (event?: any, value?: any) => any
   getProps?: (
     props: IConnectProps,
     componentProps: IFieldProps
diff --git a/packages/types/src/form.ts b/packages/types/src/form.ts
index 185aa268359..f710b7caa05 100644
--- a/packages/types/src/form.ts
+++ b/packages/types/src/form.ts
@@ -73,3 +73,65 @@ export interface IFormPathMatcher {
   hasWildcard: boolean
   pattern: string
 }
+
+// next & antd 需要用到的
+export enum LabelAlign {
+  TOP = 'top',
+  INSET = 'inset',
+  LEFT = 'left'
+}
+
+export enum LabelTextAlign {
+  LEFT = 'left',
+  RIGHT = 'right'
+}
+
+export enum Size {
+  LARGE = 'large',
+  MEDIUM = 'medium',
+  SMALL = 'small'
+}
+
+export interface IFormItemGridProps {
+  name?: string
+  help?: React.ReactNode
+  extra?: React.ReactNode
+  description?: string
+  title?: string
+  cols?: any
+}
+
+export interface IFormSharedProps {
+  labelCol: object | number
+  wrapperCol: object | number
+  autoAddColon: boolean
+  size: Size
+  inline: boolean
+  labelAlign: LabelAlign
+  labelTextAlign: LabelTextAlign
+  className: string
+  style: React.CSSProperties
+  prefix: string
+  maxTipsNum: number
+}
+
+export interface IFormProps extends IFormSharedProps {
+  layout: string
+  children: React.ReactNode
+  component: string
+  onValidateFailed: () => void
+}
+
+export interface IFormItemProps extends IFormSharedProps {
+  id: string
+  required: boolean
+  label: React.ReactNode
+  extra: object
+  validateState: any
+  isTableColItem: boolean
+  help: React.ReactNode
+  noMinHeight: boolean
+  children: React.ReactElement
+  type: string
+  schema: ISchema
+}