diff --git a/.gitignore b/.gitignore
index 85d90d8d7a..86665f9ab8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,5 @@ dist
 elasticsearch-*
 config/base.yaml
 typings
+components/**/*.js
+components/**/*.jsx
diff --git a/components/_util/isCssAnimationSupported.js b/components/_util/isCssAnimationSupported.tsx
similarity index 100%
rename from components/_util/isCssAnimationSupported.js
rename to components/_util/isCssAnimationSupported.tsx
diff --git a/components/_util/openAnimation.js b/components/_util/openAnimation.tsx
similarity index 100%
rename from components/_util/openAnimation.js
rename to components/_util/openAnimation.tsx
diff --git a/components/_util/splitObject.tsx b/components/_util/splitObject.tsx
new file mode 100644
index 0000000000..846d4784d0
--- /dev/null
+++ b/components/_util/splitObject.tsx
@@ -0,0 +1,12 @@
+export default function splitObject(obj, parts) {
+  let left = {};
+  let right = {};
+  Object.keys(obj).forEach((k)=> {
+    if (parts.indexOf(k) !== -1) {
+      left[k] = obj[k];
+    } else {
+      right = obj[k];
+    }
+  });
+  return [left, right];
+}
\ No newline at end of file
diff --git a/components/affix/index.jsx b/components/affix/index.tsx
similarity index 91%
rename from components/affix/index.jsx
rename to components/affix/index.tsx
index cbf0743aaf..77fc509b39 100644
--- a/components/affix/index.jsx
+++ b/components/affix/index.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';
 import warning from 'warning';
@@ -33,7 +33,17 @@ function getOffset(element) {
   };
 }
 
-export default class Affix extends React.Component {
+// Affix
+export interface AffixProps {
+  /**
+   * 距离窗口顶部达到指定偏移量后触发
+   */
+  offsetTop?:number,
+  offsetBottom?:number,
+  style?:React.CSSProperties
+}
+
+export default class Affix extends React.Component<AffixProps, any> {
   static propTypes = {
     offsetTop: React.PropTypes.number,
     offsetBottom: React.PropTypes.number,
diff --git a/components/affix/style/index.js b/components/affix/style/index.tsx
similarity index 100%
rename from components/affix/style/index.js
rename to components/affix/style/index.tsx
diff --git a/components/alert/index.jsx b/components/alert/index.tsx
similarity index 100%
rename from components/alert/index.jsx
rename to components/alert/index.tsx
diff --git a/components/alert/style/index.js b/components/alert/style/index.tsx
similarity index 100%
rename from components/alert/style/index.js
rename to components/alert/style/index.tsx
diff --git a/components/badge/ScrollNumber.jsx b/components/badge/ScrollNumber.tsx
similarity index 94%
rename from components/badge/ScrollNumber.jsx
rename to components/badge/ScrollNumber.tsx
index 0b4d2ea29f..ee7821d715 100644
--- a/components/badge/ScrollNumber.jsx
+++ b/components/badge/ScrollNumber.tsx
@@ -1,6 +1,7 @@
-import React, { createElement } from 'react';
-import { findDOMNode } from 'react-dom';
+import React, {createElement} from 'react';
+import {findDOMNode} from 'react-dom';
 import isCssAnimationSupported from '../_util/isCssAnimationSupported';
+import assign from 'object-assign';
 
 function getNumberArray(num) {
   return num ?
@@ -15,7 +16,8 @@ export default class ScrollNumber extends React.Component {
     prefixCls: 'ant-scroll-number',
     count: null,
     component: 'sup',
-    onAnimated() {},
+    onAnimated() {
+    },
     height: 18,
   }
 
@@ -122,10 +124,9 @@ export default class ScrollNumber extends React.Component {
   }
 
   render() {
-    const props = {
-      ...this.props,
+    const props = assign({}, this.props, {
       className: `${this.props.prefixCls} ${this.props.className}`,
-    };
+    });
     return createElement(
       this.props.component,
       props,
diff --git a/components/badge/index.jsx b/components/badge/index.tsx
similarity index 100%
rename from components/badge/index.jsx
rename to components/badge/index.tsx
diff --git a/components/badge/style/index.js b/components/badge/style/index.tsx
similarity index 100%
rename from components/badge/style/index.js
rename to components/badge/style/index.tsx
diff --git a/components/breadcrumb/Breadcrumb.jsx b/components/breadcrumb/Breadcrumb.tsx
similarity index 100%
rename from components/breadcrumb/Breadcrumb.jsx
rename to components/breadcrumb/Breadcrumb.tsx
diff --git a/components/breadcrumb/BreadcrumbItem.jsx b/components/breadcrumb/BreadcrumbItem.tsx
similarity index 81%
rename from components/breadcrumb/BreadcrumbItem.jsx
rename to components/breadcrumb/BreadcrumbItem.tsx
index 23ea1565df..50ff9a5d00 100644
--- a/components/breadcrumb/BreadcrumbItem.jsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import splitObject from '../_util/splitObject';
 
 export default class BreadcrumbItem extends React.Component {
   static defaultProps = {
@@ -16,7 +17,7 @@ export default class BreadcrumbItem extends React.Component {
   }
 
   render() {
-    const { prefixCls, separator, children, ...restProps } = this.props;
+    const [{prefixCls, separator, children},restProps] = splitObject(this.props, ['prefixCls', 'separator', 'children']);
     let link;
     if ('href' in this.props) {
       link = <a className={`${prefixCls}-link`} {...restProps}>{children}</a>;
diff --git a/components/breadcrumb/index.jsx b/components/breadcrumb/index.tsx
similarity index 100%
rename from components/breadcrumb/index.jsx
rename to components/breadcrumb/index.tsx
diff --git a/components/breadcrumb/style/index.js b/components/breadcrumb/style/index.tsx
similarity index 100%
rename from components/breadcrumb/style/index.js
rename to components/breadcrumb/style/index.tsx
diff --git a/components/button/button-group.jsx b/components/button/button-group.tsx
similarity index 80%
rename from components/button/button-group.jsx
rename to components/button/button-group.tsx
index d494a345e3..92ba3e96a2 100644
--- a/components/button/button-group.jsx
+++ b/components/button/button-group.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
+import splitObject from '../_util/splitObject';
 
 const prefix = 'ant-btn-group-';
 
 export default function ButtonGroup(props) {
-  const { size, className, ...others } = props;
+  const [{size, className},others] = splitObject(props, ['size', 'className']);
 
   // large => lg
   // small => sm
diff --git a/components/button/button.jsx b/components/button/button.tsx
similarity index 91%
rename from components/button/button.jsx
rename to components/button/button.tsx
index b75b54c40f..bea8b996fe 100644
--- a/components/button/button.jsx
+++ b/components/button/button.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { findDOMNode } from 'react-dom';
 import Icon from '../icon';
-
+import splitObject from '../_util/splitObject';
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
 function isString(str) {
@@ -76,7 +76,8 @@ export default class Button extends React.Component {
 
   render() {
     const props = this.props;
-    const { type, shape, size, className, htmlType, children, icon, loading, prefixCls, ...others } = props;
+    const [{type, shape, size, className, htmlType, children, icon, loading, prefixCls}, others] = splitObject(props,
+      ['type', 'shape','size', 'className','htmlType', 'children','icon','loading','prefixCls']);
 
     // large => lg
     // small => sm
diff --git a/components/button/index.jsx b/components/button/index.tsx
similarity index 100%
rename from components/button/index.jsx
rename to components/button/index.tsx
diff --git a/components/button/style/index.js b/components/button/style/index.tsx
similarity index 100%
rename from components/button/style/index.js
rename to components/button/style/index.tsx
diff --git a/components/calendar/Constants.js b/components/calendar/Constants.tsx
similarity index 100%
rename from components/calendar/Constants.js
rename to components/calendar/Constants.tsx
diff --git a/components/calendar/Header.jsx b/components/calendar/Header.tsx
similarity index 100%
rename from components/calendar/Header.jsx
rename to components/calendar/Header.tsx
diff --git a/components/calendar/index.jsx b/components/calendar/index.tsx
similarity index 96%
rename from components/calendar/index.jsx
rename to components/calendar/index.tsx
index b7f68eb3f5..6d485ac1d3 100644
--- a/components/calendar/index.jsx
+++ b/components/calendar/index.tsx
@@ -4,6 +4,7 @@ import defaultLocale from './locale/zh_CN';
 import FullCalendar from 'rc-calendar/lib/FullCalendar';
 import { PREFIX_CLS } from './Constants';
 import Header from './Header';
+import assign from 'object-assign';
 
 function noop() { return null; }
 
@@ -69,8 +70,8 @@ export default class Calendar extends React.Component {
       locale = context.antLocale.Calendar;
     }
     // 统一合并为完整的 Locale
-    const result = { ...locale, ...props.locale };
-    result.lang = { ...locale.lang, ...props.locale.lang };
+    const result = assign({}, locale, props.locale);
+    result.lang = assign({}, locale.lang,props.locale.lang);
     return result;
   }
 
diff --git a/components/calendar/locale/en_US.js b/components/calendar/locale/en_US.tsx
similarity index 100%
rename from components/calendar/locale/en_US.js
rename to components/calendar/locale/en_US.tsx
diff --git a/components/calendar/locale/ru_RU.js b/components/calendar/locale/ru_RU.tsx
similarity index 100%
rename from components/calendar/locale/ru_RU.js
rename to components/calendar/locale/ru_RU.tsx
diff --git a/components/calendar/locale/zh_CN.js b/components/calendar/locale/zh_CN.tsx
similarity index 100%
rename from components/calendar/locale/zh_CN.js
rename to components/calendar/locale/zh_CN.tsx
diff --git a/components/calendar/style/index.js b/components/calendar/style/index.tsx
similarity index 100%
rename from components/calendar/style/index.js
rename to components/calendar/style/index.tsx
diff --git a/components/card/index.jsx b/components/card/index.tsx
similarity index 75%
rename from components/card/index.jsx
rename to components/card/index.tsx
index 0d3213ff47..f869694dcb 100644
--- a/components/card/index.jsx
+++ b/components/card/index.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
-
+import splitObject from '../_util/splitObject';
 export default props => {
-  let { prefixCls = 'ant-card', className, children, extra, bodyStyle,
-        title, loading, bordered = true, ...other } = props;
+  const [{
+    prefixCls = 'ant-card', className, extra, bodyStyle,
+    title, loading, bordered = true
+  }, others] = splitObject(props,
+    ['prefixCls', 'className', 'children', 'extra', 'bodyStyle', 'title', 'loading', 'bordered']);
+  let children = props.children;
   const classString = classNames({
     [prefixCls]: true,
     [className]: !!className,
@@ -30,7 +34,7 @@ export default props => {
   ) : null;
 
   return (
-    <div {...other} className={classString}>
+    <div {...others} className={classString}>
       {head}
       {extra ? <div className={`${prefixCls}-extra`}>{extra}</div> : null}
       <div className={`${prefixCls}-body`} style={bodyStyle}>{children}</div>
diff --git a/components/card/style/index.js b/components/card/style/index.tsx
similarity index 100%
rename from components/card/style/index.js
rename to components/card/style/index.tsx
diff --git a/components/carousel/index.jsx b/components/carousel/index.tsx
similarity index 92%
rename from components/carousel/index.jsx
rename to components/carousel/index.tsx
index da90e64976..d1319e4f26 100644
--- a/components/carousel/index.jsx
+++ b/components/carousel/index.tsx
@@ -1,5 +1,6 @@
 // matchMedia polyfill for
 // https://github.com/WickyNilliams/enquire.js/issues/82
+import assign from 'object-assign';
 if (typeof window !== 'undefined') {
   const matchMediaPolyfill = function matchMediaPolyfill() {
     return {
@@ -23,7 +24,7 @@ export default class Carousel extends React.Component {
   }
 
   render() {
-    let props = { ...this.props };
+    let props = assign({}, this.props);
 
     if (props.effect === 'fade') {
       props.fade = true;
diff --git a/components/carousel/style/index.js b/components/carousel/style/index.tsx
similarity index 100%
rename from components/carousel/style/index.js
rename to components/carousel/style/index.tsx
diff --git a/components/cascader/index.jsx b/components/cascader/index.tsx
similarity index 90%
rename from components/cascader/index.jsx
rename to components/cascader/index.tsx
index fca5778849..a8c6efb1dd 100644
--- a/components/cascader/index.jsx
+++ b/components/cascader/index.tsx
@@ -4,6 +4,7 @@ import Input from '../input';
 import Icon from '../icon';
 import arrayTreeFilter from 'array-tree-filter';
 import classNames from 'classnames';
+import splitObject from '../_util/splitObject';
 
 export default class Cascader extends React.Component {
   static defaultProps = {
@@ -71,8 +72,10 @@ export default class Cascader extends React.Component {
 
   render() {
     const props = this.props;
-    const { prefixCls, children, placeholder, size, disabled,
-            className, style, allowClear, ...otherProps } = props;
+    const [{prefixCls, children, placeholder, size, disabled,
+      className, style, allowClear}, others] = splitObject(props,
+      ['prefixCls', 'children','placeholder', 'size','disabled', 'className','style','allowClear']);
+    
     const sizeCls = classNames({
       'ant-input-lg': size === 'large',
       'ant-input-sm': size === 'small',
@@ -93,7 +96,7 @@ export default class Cascader extends React.Component {
     });
 
     // Fix bug of https://github.com/facebook/react/pull/5004
-    delete otherProps.onChange;
+    delete others.onChange;
 
     return (
       <RcCascader {...props}
@@ -107,7 +110,7 @@ export default class Cascader extends React.Component {
             style={style}
             className={pickerCls}
           >
-            <Input {...otherProps}
+            <Input {...others}
               placeholder={this.state.value && this.state.value.length > 0 ? null : placeholder}
               className={`${prefixCls}-input ant-input ${sizeCls}`}
               value={null}
diff --git a/components/cascader/style/index.js b/components/cascader/style/index.tsx
similarity index 100%
rename from components/cascader/style/index.js
rename to components/cascader/style/index.tsx
diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.tsx
similarity index 98%
rename from components/checkbox/Group.jsx
rename to components/checkbox/Group.tsx
index 5ec570d40d..d37c3cc24e 100644
--- a/components/checkbox/Group.jsx
+++ b/components/checkbox/Group.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Checkbox from './index';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
-
+import assign from 'object-assign';
 export default class CheckboxGroup extends React.Component {
   static defaultProps = {
     options: [],
diff --git a/components/checkbox/index.jsx b/components/checkbox/index.tsx
similarity index 81%
rename from components/checkbox/index.jsx
rename to components/checkbox/index.tsx
index 9bca526e12..76c388ddf1 100644
--- a/components/checkbox/index.jsx
+++ b/components/checkbox/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import CheckboxGroup from './Group';
 import classNames from 'classnames';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
-
+import splitObject from '../_util/splitObject';
 export default class Checkbox extends React.Component {
   static Group = CheckboxGroup;
   static defaultProps = {
@@ -13,7 +13,7 @@ export default class Checkbox extends React.Component {
     return PureRenderMixin.shouldComponentUpdate.apply(this, args);
   }
   render() {
-    const { prefixCls, style, children, className, ...restProps } = this.props;
+    const [{ prefixCls, style, children, className },restProps] = splitObject(this.props, ['prefixCls', 'style', 'children', 'className']);
     const classString = classNames({
       [className]: !!className,
       [`${prefixCls}-wrapper`]: true,
diff --git a/components/checkbox/style/index.js b/components/checkbox/style/index.tsx
similarity index 100%
rename from components/checkbox/style/index.js
rename to components/checkbox/style/index.tsx
diff --git a/components/col/index.js b/components/col/index.tsx
similarity index 100%
rename from components/col/index.js
rename to components/col/index.tsx
diff --git a/components/col/style/index.js b/components/col/style/index.tsx
similarity index 100%
rename from components/col/style/index.js
rename to components/col/style/index.tsx
diff --git a/components/collapse/index.jsx b/components/collapse/index.tsx
similarity index 100%
rename from components/collapse/index.jsx
rename to components/collapse/index.tsx
diff --git a/components/collapse/style/index.js b/components/collapse/style/index.tsx
similarity index 100%
rename from components/collapse/style/index.js
rename to components/collapse/style/index.tsx
diff --git a/components/date-picker/Calendar.jsx b/components/date-picker/Calendar.tsx
similarity index 100%
rename from components/date-picker/Calendar.jsx
rename to components/date-picker/Calendar.tsx
diff --git a/components/date-picker/RangePicker.jsx b/components/date-picker/RangePicker.tsx
similarity index 100%
rename from components/date-picker/RangePicker.jsx
rename to components/date-picker/RangePicker.tsx
diff --git a/components/date-picker/createPicker.jsx b/components/date-picker/createPicker.tsx
similarity index 86%
rename from components/date-picker/createPicker.jsx
rename to components/date-picker/createPicker.tsx
index 60580b0ffb..af61e01fb1 100644
--- a/components/date-picker/createPicker.jsx
+++ b/components/date-picker/createPicker.tsx
@@ -3,16 +3,17 @@ import MonthCalendar from 'rc-calendar/lib/MonthCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import GregorianCalendar from 'gregorian-calendar';
 import classNames from 'classnames';
+import assign from 'object-assign';
 
 export default function createPicker(TheCalendar) {
-  return class CalenderWrapper extends React.Component {
-    constructor(props) {
-      super(props);
+  // use class typescript error
+  const CalenderWrapper = React.createClass({
 
-      this.state = {
+    getInitialState() {
+      return {
         value: this.props.parseDateFromValue(this.props.value || this.props.defaultValue),
       };
-    }
+    },
 
     componentWillReceiveProps(nextProps) {
       if ('value' in nextProps) {
@@ -20,16 +21,16 @@ export default function createPicker(TheCalendar) {
           value: nextProps.parseDateFromValue(nextProps.value),
         });
       }
-    }
+    },
 
-    handleChange = (value) => {
+    handleChange(value) {
       const props = this.props;
       if (!('value' in props)) {
-        this.setState({ value });
+        this.setState({value});
       }
       const timeValue = value ? new Date(value.getTime()) : null;
       props.onChange(timeValue, value ? props.getFormatter().format(value) : '');
-    }
+    },
 
     render() {
       const props = this.props;
@@ -71,7 +72,7 @@ export default function createPicker(TheCalendar) {
       }
 
       return (
-        <span className={props.pickerClass} style={{ ...pickerStyle, ...props.style }}>
+        <span className={props.pickerClass} style={assign({}, pickerStyle, props.style)}>
           <RcDatePicker
             transitionName={props.transitionName}
             disabled={props.disabled}
@@ -89,7 +90,7 @@ export default function createPicker(TheCalendar) {
             {
               ({ value }) => {
                 return (
-                  <span>
+                <span>
                     <input
                       disabled={props.disabled}
                       readOnly
@@ -97,14 +98,16 @@ export default function createPicker(TheCalendar) {
                       placeholder={placeholder}
                       className={props.pickerInputClass}
                     />
-                    <span className="ant-calendar-picker-icon" />
+                    <span className="ant-calendar-picker-icon"/>
                   </span>
-                );
+                  );
+                }
               }
-            }
           </RcDatePicker>
         </span>
       );
-    }
-  };
+    },
+  });
+  
+  return CalenderWrapper;
 }
diff --git a/components/date-picker/index.jsx b/components/date-picker/index.tsx
similarity index 100%
rename from components/date-picker/index.jsx
rename to components/date-picker/index.tsx
diff --git a/components/date-picker/locale/en_US.js b/components/date-picker/locale/en_US.tsx
similarity index 68%
rename from components/date-picker/locale/en_US.js
rename to components/date-picker/locale/en_US.tsx
index 8f19d78198..fb94a32939 100644
--- a/components/date-picker/locale/en_US.js
+++ b/components/date-picker/locale/en_US.tsx
@@ -1,16 +1,15 @@
 import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/en_US';
 import CalendarLocale from 'rc-calendar/lib/locale/en_US';
 import TimePickerLocale from '../../time-picker/locale/en_US';
-
+import assign from 'object-assign';
 // 统一合并为完整的 Locale
-const locale = { ...GregorianCalendarLocale };
-locale.lang = {
+const locale = assign({}, GregorianCalendarLocale);
+locale.lang = assign({
   placeholder: 'Select date',
   rangePlaceholder: ['Start date', 'End date'],
-  ...CalendarLocale,
-};
+},CalendarLocale);
 
-locale.timePickerLocale = { ...TimePickerLocale };
+locale.timePickerLocale = assign({}, TimePickerLocale);
 
 // All settings at:
 // https://github.com/ant-design/ant-design/issues/424
diff --git a/components/date-picker/locale/ru_RU.js b/components/date-picker/locale/ru_RU.tsx
similarity index 72%
rename from components/date-picker/locale/ru_RU.js
rename to components/date-picker/locale/ru_RU.tsx
index 87b68359d2..c6b233288c 100644
--- a/components/date-picker/locale/ru_RU.js
+++ b/components/date-picker/locale/ru_RU.tsx
@@ -5,15 +5,14 @@
 import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/ru_RU';
 import CalendarLocale from 'rc-calendar/lib/locale/ru_RU';
 import TimePickerLocale from '../../time-picker/locale/ru_RU';
-
-const locale = { ...GregorianCalendarLocale };
-locale.lang = {
+import assign from 'object-assign';
+const locale = assign({}, GregorianCalendarLocale);
+locale.lang = assign({
   placeholder: 'Выберите дату',
   rangePlaceholder: ['Начальная дата', 'Конечная дата'],
-  ...CalendarLocale,
-};
+},CalendarLocale);
 
-locale.timePickerLocale = { ...TimePickerLocale };
+locale.timePickerLocale = assign({}, TimePickerLocale);
 
 // All settings at:
 // https://github.com/ant-design/ant-design/issues/424
diff --git a/components/date-picker/locale/zh_CN.js b/components/date-picker/locale/zh_CN.tsx
similarity index 72%
rename from components/date-picker/locale/zh_CN.js
rename to components/date-picker/locale/zh_CN.tsx
index 7884c3cc23..350de8ce06 100644
--- a/components/date-picker/locale/zh_CN.js
+++ b/components/date-picker/locale/zh_CN.tsx
@@ -1,16 +1,15 @@
 import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/zh_CN';
 import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';
 import TimePickerLocale from '../../time-picker/locale/zh_CN';
-
+import assign from 'object-assign';
 // 统一合并为完整的 Locale
-const locale = { ...GregorianCalendarLocale };
-locale.lang = {
+const locale = assign({}, GregorianCalendarLocale);
+locale.lang = assign({
   placeholder: '请选择日期',
   rangePlaceholder: ['开始日期', '结束日期'],
-  ...CalendarLocale,
-};
+}, CalendarLocale);
 
-locale.timePickerLocale = { ...TimePickerLocale };
+locale.timePickerLocale = assign({}, TimePickerLocale);
 
 // should add whitespace between char in Button
 locale.lang.ok = '确 定';
diff --git a/components/date-picker/style/index.js b/components/date-picker/style/index.tsx
similarity index 100%
rename from components/date-picker/style/index.js
rename to components/date-picker/style/index.tsx
diff --git a/components/date-picker/wrapPicker.jsx b/components/date-picker/wrapPicker.tsx
similarity index 74%
rename from components/date-picker/wrapPicker.jsx
rename to components/date-picker/wrapPicker.tsx
index 90d029d19b..b96dc0d22e 100644
--- a/components/date-picker/wrapPicker.jsx
+++ b/components/date-picker/wrapPicker.tsx
@@ -1,28 +1,33 @@
-import React, { PropTypes } from 'react';
+import React, {PropTypes} from 'react';
 import TimePicker from 'rc-time-picker';
 import DateTimeFormat from 'gregorian-calendar-format';
 import GregorianCalendar from 'gregorian-calendar';
 import classNames from 'classnames';
 import defaultLocale from './locale/zh_CN';
-
+import assign from 'object-assign';
 export default function wrapPicker(Picker, defaultFormat) {
-  return class PickerWrapper extends React.Component {
-    static defaultProps = {
-      format: defaultFormat || 'yyyy-MM-dd',
-      transitionName: 'slide-up',
-      popupStyle: {},
-      onChange() {},
-      onOk() {},
-      toggleOpen() {},
-      locale: {},
-      align: {
-        offset: [0, -9],
-      },
-    }
+  const PickerWrapper = React.createClass({
+    getDefaultProps() {
+      return {
+        format: defaultFormat || 'yyyy-MM-dd',
+        transitionName: 'slide-up',
+        popupStyle: {},
+        onChange() {
+        },
+        onOk() {
+        },
+        toggleOpen() {
+        },
+        locale: {},
+        align: {
+          offset: [0, -9],
+        },
+      };
+    },
 
-    static contextTypes = {
+    contextTypes: {
       antLocale: PropTypes.object,
-    }
+    },
 
     getLocale() {
       const props = this.props;
@@ -32,21 +37,21 @@ export default function wrapPicker(Picker, defaultFormat) {
         locale = context.antLocale.DatePicker;
       }
       // 统一合并为完整的 Locale
-      const result = { ...locale, ...props.locale };
-      result.lang = { ...locale.lang, ...props.locale.lang };
+      const result = assign({}, locale, props.locale);
+      result.lang = assign({}, locale.lang, props.locale.lang);
       return result;
-    }
+    },
 
-    getFormatter = () => {
+    getFormatter() {
       const format = this.props.format;
       const formatter = new DateTimeFormat(format, this.getLocale().lang.format);
       return formatter;
-    }
+    },
 
-    parseDateFromValue = (value) => {
+    parseDateFromValue(value) {
       if (value) {
         if (typeof value === 'string') {
-          return this.getFormatter().parse(value, { locale: this.getLocale() });
+          return this.getFormatter().parse(value, {locale: this.getLocale()});
         } else if (value instanceof Date) {
           let date = new GregorianCalendar(this.getLocale());
           date.setTime(+value);
@@ -54,11 +59,11 @@ export default function wrapPicker(Picker, defaultFormat) {
         }
       }
       return value;
-    }
+    },
 
-    toggleOpen = ({ open }) => {
-      this.props.toggleOpen({ open });
-    }
+    toggleOpen ({open}) {
+      this.props.toggleOpen({open});
+    },
 
     render() {
       const props = this.props;
@@ -103,6 +108,7 @@ export default function wrapPicker(Picker, defaultFormat) {
           parseDateFromValue={this.parseDateFromValue}
         />
       );
-    }
-  };
+    },
+  });
+  return PickerWrapper;
 }
diff --git a/components/dropdown/dropdown-button.jsx b/components/dropdown/dropdown-button.tsx
similarity index 79%
rename from components/dropdown/dropdown-button.jsx
rename to components/dropdown/dropdown-button.tsx
index e5b330d956..1aeeb067eb 100644
--- a/components/dropdown/dropdown-button.jsx
+++ b/components/dropdown/dropdown-button.tsx
@@ -4,7 +4,7 @@ import Icon from '../icon';
 import Dropdown from './dropdown';
 const ButtonGroup = Button.Group;
 import classNames from 'classnames';
-
+import splitObject from '../_util/splitObject';
 export default class DropdownButton extends React.Component {
   static defaultProps = {
     align: {
@@ -20,7 +20,8 @@ export default class DropdownButton extends React.Component {
   }
 
   render() {
-    const { type, overlay, trigger, align, children, className, onClick, ...restProps } = this.props;
+    const [{ type, overlay, trigger, align, children, className, onClick },restProps] = splitObject(this.props, 
+      ['type', 'overlay', 'trigger', 'align', 'children', 'className', 'onClick']);
     const cls = classNames({
       'ant-dropdown-button': true,
       className: !!className,
diff --git a/components/dropdown/dropdown.jsx b/components/dropdown/dropdown.tsx
similarity index 69%
rename from components/dropdown/dropdown.jsx
rename to components/dropdown/dropdown.tsx
index 16a0c97251..95d6c97171 100644
--- a/components/dropdown/dropdown.jsx
+++ b/components/dropdown/dropdown.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import RcDropdown from 'rc-dropdown';
+import splitObject from '../_util/splitObject';
 
 export default class Dropdown extends React.Component {
   static defaultProps = {
@@ -10,12 +11,14 @@ export default class Dropdown extends React.Component {
   }
 
   render() {
-    const { overlay, ...otherProps } = this.props;
+    const [{overlay}, others] = splitObject(this.props,
+      ['overlay']);
+    
     const menu = React.cloneElement(overlay, {
       openTransitionName: 'zoom-big',
     });
     return (
-      <RcDropdown {...otherProps} overlay={menu} />
+      <RcDropdown {...others} overlay={menu} />
     );
   }
 }
diff --git a/components/dropdown/index.jsx b/components/dropdown/index.tsx
similarity index 100%
rename from components/dropdown/index.jsx
rename to components/dropdown/index.tsx
diff --git a/components/dropdown/style/index.js b/components/dropdown/style/index.tsx
similarity index 100%
rename from components/dropdown/style/index.js
rename to components/dropdown/style/index.tsx
diff --git a/components/form/Form.jsx b/components/form/Form.tsx
similarity index 100%
rename from components/form/Form.jsx
rename to components/form/Form.tsx
diff --git a/components/form/FormItem.jsx b/components/form/FormItem.tsx
similarity index 100%
rename from components/form/FormItem.jsx
rename to components/form/FormItem.tsx
diff --git a/components/form/ValueMixin.jsx b/components/form/ValueMixin.tsx
similarity index 80%
rename from components/form/ValueMixin.jsx
rename to components/form/ValueMixin.tsx
index 7450ddd687..53083b2f62 100644
--- a/components/form/ValueMixin.jsx
+++ b/components/form/ValueMixin.tsx
@@ -1,3 +1,4 @@
+import assign from 'object-assign';
 const ValueMixin = {
   setValue(field, e) {
     let v = e;
@@ -13,10 +14,7 @@ const ValueMixin = {
     const newFormData = {};
     newFormData[field] = v;
     this.setState({
-      formData: {
-        ...this.state.formData,
-        ...newFormData,
-      },
+      formData: assign({}, this.state.formData, newFormData),
     });
   },
 };
diff --git a/components/form/index.jsx b/components/form/index.tsx
similarity index 82%
rename from components/form/index.jsx
rename to components/form/index.tsx
index ff86226759..531af85185 100644
--- a/components/form/index.jsx
+++ b/components/form/index.tsx
@@ -2,13 +2,12 @@ import Form from './Form';
 import FormItem from './FormItem';
 import ValueMixin from './ValueMixin';
 import createDOMForm from 'rc-form/lib/createDOMForm';
-
+import assign from 'object-assign';
 Form.create = (o = {}) => {
-  const options = {
-    ...o,
+  const options = assign({}, o, {
     fieldNameProp: 'id',
     fieldMetaProp: '__meta',
-  };
+  });
 
   return createDOMForm(options);
 };
diff --git a/components/form/style/index.js b/components/form/style/index.tsx
similarity index 100%
rename from components/form/style/index.js
rename to components/form/style/index.tsx
diff --git a/components/icon/index.jsx b/components/icon/index.jsx
deleted file mode 100644
index 6779d1b09c..0000000000
--- a/components/icon/index.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-export default props => {
-  let { type, className = '', ...other } = props;
-  className += ` anticon anticon-${type}`;
-  return <i className={className} {...other} />;
-};
diff --git a/components/icon/index.tsx b/components/icon/index.tsx
new file mode 100644
index 0000000000..4178a095b4
--- /dev/null
+++ b/components/icon/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import splitObject from '../_util/splitObject';
+
+export default props => {
+  const [{type, className = ''}, others] = splitObject(props,
+    ['type','className']);
+  
+  let className2 = `${className} anticon anticon-${type}`;
+  return <i className={className2} {...others} />;
+};
diff --git a/components/icon/style/index.js b/components/icon/style/index.tsx
similarity index 100%
rename from components/icon/style/index.js
rename to components/icon/style/index.tsx
diff --git a/components/index.tsx b/components/index.tsx
new file mode 100644
index 0000000000..48fc53d391
--- /dev/null
+++ b/components/index.tsx
@@ -0,0 +1,2 @@
+import Affix from './affix';
+export { Affix };
\ No newline at end of file
diff --git a/components/input-number/index.jsx b/components/input-number/index.tsx
similarity index 78%
rename from components/input-number/index.jsx
rename to components/input-number/index.tsx
index 8eb6010951..23357d18d9 100644
--- a/components/input-number/index.jsx
+++ b/components/input-number/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import RcInputNumber from 'rc-input-number';
+import splitObject from '../_util/splitObject';
 
 export default class InputNumber extends React.Component {
   static defaultProps = {
@@ -9,13 +10,14 @@ export default class InputNumber extends React.Component {
   }
 
   render() {
-    const { className, size, ...other } = this.props;
+    const [{className, size}, others] = splitObject(this.props,
+      ['size','className']);
     const inputNumberClass = classNames({
       [`${this.props.prefixCls}-lg`]: size === 'large',
       [`${this.props.prefixCls}-sm`]: size === 'small',
       [className]: !!className,
     });
 
-    return <RcInputNumber className={inputNumberClass} {...other} />;
+    return <RcInputNumber className={inputNumberClass} {...others} />;
   }
 }
diff --git a/components/input-number/style/index.js b/components/input-number/style/index.tsx
similarity index 100%
rename from components/input-number/style/index.js
rename to components/input-number/style/index.tsx
diff --git a/components/input/Group.jsx b/components/input/Group.tsx
similarity index 100%
rename from components/input/Group.jsx
rename to components/input/Group.tsx
diff --git a/components/input/Input.jsx b/components/input/Input.tsx
similarity index 96%
rename from components/input/Input.jsx
rename to components/input/Input.tsx
index df99e87efb..4483659572 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.tsx
@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import classNames from 'classnames';
 import calculateNodeHeight from './calculateNodeHeight';
-
+import assign from 'object-assign';
 function fixControlledValue(value) {
   if (typeof value === 'undefined' || value === null) {
     return '';
@@ -131,7 +131,7 @@ export default class Input extends Component {
   }
 
   renderInput() {
-    const props = { ...this.props };
+    const props = assign({}, this.props);
     const prefixCls = props.prefixCls;
     if (!props.type) {
       return props.children;
@@ -156,10 +156,7 @@ export default class Input extends Component {
         return (
           <textarea
             {...props}
-            style={{
-              ...props.style,
-              ...this.state.textareaStyles,
-            }}
+            style={assign({}, props.style, this.state.textareaStyles)}
             className={inputClassName}
             onKeyDown={this.handleKeyDown}
             onChange={this.handleTextareaChange}
diff --git a/components/input/calculateNodeHeight.js b/components/input/calculateNodeHeight.tsx
similarity index 100%
rename from components/input/calculateNodeHeight.js
rename to components/input/calculateNodeHeight.tsx
diff --git a/components/input/index.jsx b/components/input/index.tsx
similarity index 100%
rename from components/input/index.jsx
rename to components/input/index.tsx
diff --git a/components/input/style/index.js b/components/input/style/index.tsx
similarity index 100%
rename from components/input/style/index.js
rename to components/input/style/index.tsx
diff --git a/components/layout/col.jsx b/components/layout/col.tsx
similarity index 80%
rename from components/layout/col.jsx
rename to components/layout/col.tsx
index 7b42e5388a..ed3c04c581 100644
--- a/components/layout/col.jsx
+++ b/components/layout/col.tsx
@@ -1,11 +1,12 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
-
+import assign from 'object-assign';
 const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
 const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
-
+import splitObject from '../_util/splitObject';
 export default function Col(props) {
-  const { span, order, offset, push, pull, className, children, ...others } = props;
+  const [{span, order, offset, push, pull, className, children}, others] = splitObject(props, 
+    ['span', 'order','offset', 'push','pull', 'className','children']);
   let sizeClassObj = {};
   ['xs', 'sm', 'md', 'lg'].forEach(size => {
     let sizeProps = {};
@@ -14,24 +15,22 @@ export default function Col(props) {
     } else if (typeof props[size] === 'object') {
       sizeProps = props[size] || {};
     }
-    sizeClassObj = {
-      ...sizeClassObj,
+    sizeClassObj = assign({}, sizeClassObj, {
       [`ant-col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
       [`ant-col-${size}-order-${sizeProps.order}`]: sizeProps.order,
       [`ant-col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
       [`ant-col-${size}-push-${sizeProps.push}`]: sizeProps.push,
       [`ant-col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
-    };
+    });
   });
-  const classes = classNames({
+  const classes = classNames(assign({}, {
     [`ant-col-${span}`]: span !== undefined,
     [`ant-col-order-${order}`]: order,
     [`ant-col-offset-${offset}`]: offset,
     [`ant-col-push-${push}`]: push,
     [`ant-col-pull-${pull}`]: pull,
     [className]: !!className,
-    ...sizeClassObj,
-  });
+  },sizeClassObj));
 
   return <div {...others} className={classes}>{children}</div>;
 }
diff --git a/components/layout/index.jsx b/components/layout/index.tsx
similarity index 100%
rename from components/layout/index.jsx
rename to components/layout/index.tsx
diff --git a/components/layout/row.jsx b/components/layout/row.tsx
similarity index 70%
rename from components/layout/row.jsx
rename to components/layout/row.tsx
index a7f93b0357..f745767ea4 100644
--- a/components/layout/row.jsx
+++ b/components/layout/row.tsx
@@ -1,6 +1,7 @@
 import React, { Children, cloneElement } from 'react';
 import classNames from 'classnames';
-
+import assign from 'object-assign';
+import splitObject from '../_util/splitObject';
 export default class Row extends React.Component {
   static defaultProps = {
     gutter: 0,
@@ -14,7 +15,8 @@ export default class Row extends React.Component {
     gutter: React.PropTypes.number,
   }
   render() {
-    const { type, justify, align, className, gutter, style, children, ...others } = this.props;
+    const [{type, justify, align, className, gutter, style, children}, others] = splitObject(this.props,
+      ['type', 'justify','align', 'className','gutter', 'style','children']);
     const classes = classNames({
       'ant-row': !type,
       [`ant-row-${type}`]: type,
@@ -22,20 +24,18 @@ export default class Row extends React.Component {
       [`ant-row-${type}-${align}`]: align,
       [className]: className,
     });
-    const rowStyle = gutter > 0 ? {
+    const rowStyle = gutter > 0 ? assign({}, {
       marginLeft: gutter / -2,
       marginRight: gutter / -2,
-      ...style,
-    } : style;
+    },style) : style;
     const cols = Children.map(children, col => {
       if (!col) return null;
 
       return cloneElement(col, {
-        style: gutter > 0 ? {
+        style: gutter > 0 ? assign({}, {
           paddingLeft: gutter / 2,
           paddingRight: gutter / 2,
-          ...col.props.style,
-        } : col.props.style,
+        }, col.props.style) : col.props.style,
       });
     });
     return <div {...others} className={classes} style={rowStyle}>{cols}</div>;
diff --git a/components/layout/style/index.js b/components/layout/style/index.tsx
similarity index 100%
rename from components/layout/style/index.js
rename to components/layout/style/index.tsx
diff --git a/components/locale-provider/en_US.js b/components/locale-provider/en_US.tsx
similarity index 100%
rename from components/locale-provider/en_US.js
rename to components/locale-provider/en_US.tsx
diff --git a/components/locale-provider/index.jsx b/components/locale-provider/index.tsx
similarity index 100%
rename from components/locale-provider/index.jsx
rename to components/locale-provider/index.tsx
diff --git a/components/locale-provider/ru_RU.js b/components/locale-provider/ru_RU.tsx
similarity index 100%
rename from components/locale-provider/ru_RU.js
rename to components/locale-provider/ru_RU.tsx
diff --git a/components/locale-provider/style/index.js b/components/locale-provider/style/index.tsx
similarity index 100%
rename from components/locale-provider/style/index.js
rename to components/locale-provider/style/index.tsx
diff --git a/components/menu/index.jsx b/components/menu/index.tsx
similarity index 100%
rename from components/menu/index.jsx
rename to components/menu/index.tsx
diff --git a/components/menu/style/index.js b/components/menu/style/index.tsx
similarity index 100%
rename from components/menu/style/index.js
rename to components/menu/style/index.tsx
diff --git a/components/message/index.jsx b/components/message/index.tsx
similarity index 100%
rename from components/message/index.jsx
rename to components/message/index.tsx
diff --git a/components/message/style/index.js b/components/message/style/index.tsx
similarity index 100%
rename from components/message/style/index.js
rename to components/message/style/index.tsx
diff --git a/components/modal/Modal.jsx b/components/modal/Modal.tsx
similarity index 100%
rename from components/modal/Modal.jsx
rename to components/modal/Modal.tsx
diff --git a/components/modal/confirm.jsx b/components/modal/confirm.tsx
similarity index 97%
rename from components/modal/confirm.jsx
rename to components/modal/confirm.tsx
index 62f292b468..574b9d3c89 100644
--- a/components/modal/confirm.jsx
+++ b/components/modal/confirm.tsx
@@ -5,9 +5,9 @@ import Icon from '../icon';
 import Button from '../button';
 import classNames from 'classnames';
 import { getConfirmLocale } from './locale';
-
+import assign from 'object-assign';
 export default function confirm(config) {
-  const props = { ...config };
+  const props = assign({}, config);
   let div = document.createElement('div');
   document.body.appendChild(div);
 
diff --git a/components/modal/index.jsx b/components/modal/index.tsx
similarity index 74%
rename from components/modal/index.jsx
rename to components/modal/index.tsx
index f69bd3a96c..89cc01803b 100644
--- a/components/modal/index.jsx
+++ b/components/modal/index.tsx
@@ -1,52 +1,47 @@
 import Modal from './Modal';
 import confirm from './confirm';
-
+import assign from 'object-assign';
 Modal.info = function (props) {
-  const config = {
+  const config = assign({}, {
     type: 'info',
     iconType: 'info-circle',
     okCancel: false,
-    ...props,
-  };
+  }, props);
   return confirm(config);
 };
 
 Modal.success = function (props) {
-  const config = {
+  const config = assign({}, {
     type: 'success',
     iconType: 'check-circle',
     okCancel: false,
-    ...props,
-  };
+  }, props);
   return confirm(config);
 };
 
 Modal.error = function (props) {
-  const config = {
+  const config = assign({}, {
     type: 'error',
     iconType: 'cross-circle',
     okCancel: false,
-    ...props,
-  };
+  }, props);
   return confirm(config);
 };
 
 Modal.warning = Modal.warn = function (props) {
-  const config = {
+  const config = assign({}, {
     type: 'warning',
     iconType: 'exclamation-circle',
     okCancel: false,
-    ...props,
-  };
+  }, props);
   return confirm(config);
 };
 
 Modal.confirm = function (props) {
-  const config = {
+  const config = assign({}, {
     type: 'confirm',
     okCancel: true,
-    ...props,
-  };
+  }, props);
   return confirm(config);
 };
 
diff --git a/components/modal/locale.js b/components/modal/locale.tsx
similarity index 56%
rename from components/modal/locale.js
rename to components/modal/locale.tsx
index 811877349a..3c6b5945eb 100644
--- a/components/modal/locale.js
+++ b/components/modal/locale.tsx
@@ -1,16 +1,18 @@
+import assign from 'object-assign';
+
 const defaultLocale = {
   okText: '确定',
   cancelText: '取消',
   justOkText: '知道了',
 };
 
-let runtimeLocale = { ...defaultLocale };
+let runtimeLocale = assign({}, defaultLocale);
 
 export function changeConfirmLocale(newLocale) {
   if (newLocale) {
-    runtimeLocale = { ...runtimeLocale, ...newLocale };
+    runtimeLocale = assign({}, runtimeLocale, newLocale);
   } else {
-    runtimeLocale = { ...defaultLocale };
+    runtimeLocale = assign({}, defaultLocale);
   }
 }
 
diff --git a/components/modal/style/index.js b/components/modal/style/index.tsx
similarity index 100%
rename from components/modal/style/index.js
rename to components/modal/style/index.tsx
diff --git a/components/notification/index.jsx b/components/notification/index.tsx
similarity index 95%
rename from components/notification/index.jsx
rename to components/notification/index.tsx
index d22af5662b..c4d0744f02 100644
--- a/components/notification/index.jsx
+++ b/components/notification/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Notification from 'rc-notification';
 import Icon from '../icon';
-
+import assign from 'object-assign';
 let defaultTop = 24;
 let notificationInstance;
 let defaultDuration = 4.5;
@@ -91,7 +91,7 @@ const api = {
 };
 
 ['success', 'info', 'warning', 'error'].forEach((type) => {
-  api[type] = (args) => api.open({ ...args, icon: type });
+  api[type] = (args) => api.open(assign({}, args,{ icon: type }));
 });
 
 api.warn = api.warning;
diff --git a/components/notification/style/index.js b/components/notification/style/index.tsx
similarity index 100%
rename from components/notification/style/index.js
rename to components/notification/style/index.tsx
diff --git a/components/pagination/MiniSelect.jsx b/components/pagination/MiniSelect.tsx
similarity index 100%
rename from components/pagination/MiniSelect.jsx
rename to components/pagination/MiniSelect.tsx
diff --git a/components/pagination/Pagination.jsx b/components/pagination/Pagination.tsx
similarity index 100%
rename from components/pagination/Pagination.jsx
rename to components/pagination/Pagination.tsx
diff --git a/components/pagination/index.jsx b/components/pagination/index.tsx
similarity index 100%
rename from components/pagination/index.jsx
rename to components/pagination/index.tsx
diff --git a/components/pagination/locale/en_US.js b/components/pagination/locale/en_US.tsx
similarity index 100%
rename from components/pagination/locale/en_US.js
rename to components/pagination/locale/en_US.tsx
diff --git a/components/pagination/locale/zh_CN.js b/components/pagination/locale/zh_CN.tsx
similarity index 100%
rename from components/pagination/locale/zh_CN.js
rename to components/pagination/locale/zh_CN.tsx
diff --git a/components/pagination/style/index.js b/components/pagination/style/index.tsx
similarity index 100%
rename from components/pagination/style/index.js
rename to components/pagination/style/index.tsx
diff --git a/components/popconfirm/index.jsx b/components/popconfirm/index.tsx
similarity index 92%
rename from components/popconfirm/index.jsx
rename to components/popconfirm/index.tsx
index abd00b6250..f1a912c5e0 100644
--- a/components/popconfirm/index.jsx
+++ b/components/popconfirm/index.tsx
@@ -3,7 +3,7 @@ import Tooltip from '../tooltip';
 import Icon from '../icon';
 import Button from '../button';
 import getPlacements from '../popover/placements';
-
+import splitObject from '../_util/splitObject';
 const placements = getPlacements();
 const prefixCls = 'ant-popover';
 const noop = () => {};
@@ -58,7 +58,8 @@ export default class Popconfirm extends React.Component {
   }
 
   render() {
-    const { title, placement, overlayStyle, trigger, ...restProps } = this.props;
+    const [{ title, placement, overlayStyle, trigger },restProps] = splitObject(this.props,
+      ['title', 'placement', 'overlayStyle', 'trigger']);
     let { okText, cancelText } = this.props;
     if (this.context.antLocale && this.context.antLocale.Popconfirm) {
       okText = okText || this.context.antLocale.Popconfirm.okText;
diff --git a/components/popconfirm/style/index.js b/components/popconfirm/style/index.tsx
similarity index 100%
rename from components/popconfirm/style/index.js
rename to components/popconfirm/style/index.tsx
diff --git a/components/popover/index.jsx b/components/popover/index.tsx
similarity index 100%
rename from components/popover/index.jsx
rename to components/popover/index.tsx
diff --git a/components/popover/placements.js b/components/popover/placements.tsx
similarity index 100%
rename from components/popover/placements.js
rename to components/popover/placements.tsx
diff --git a/components/popover/style/index.js b/components/popover/style/index.tsx
similarity index 100%
rename from components/popover/style/index.js
rename to components/popover/style/index.tsx
diff --git a/components/progress/index.jsx b/components/progress/index.tsx
similarity index 100%
rename from components/progress/index.jsx
rename to components/progress/index.tsx
diff --git a/components/progress/progress.jsx b/components/progress/progress.tsx
similarity index 89%
rename from components/progress/progress.jsx
rename to components/progress/progress.tsx
index 93f2ea0ef0..2f392faf01 100644
--- a/components/progress/progress.jsx
+++ b/components/progress/progress.tsx
@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import Icon from '../icon';
 import { Circle } from 'rc-progress';
 import classNames from 'classnames';
-
+import splitObject from '../_util/splitObject';
 const statusColorMap = {
   normal: '#2db7f5',
   exception: '#ff5500',
@@ -30,8 +30,12 @@ export default class Line extends React.Component {
   }
 
   render() {
-    const { prefixCls, status, format, percent, trailColor,
-      type, strokeWidth, width, className, showInfo, ...restProps } = this.props;
+    const [{
+      prefixCls, status, format, percent, trailColor,
+      type, strokeWidth, width, className, showInfo
+    },restProps] = splitObject(this.props,
+      ['prefixCls', 'status', 'format', 'percent', 'trailColor', 'type', 'strokeWidth', 'width',
+        'className', 'showInfo']);
     const progressStatus = (parseInt(percent, 10) >= 100 && !('status' in this.props))
       ? 'success' : (status || 'normal');
     let progressInfo;
diff --git a/components/progress/style/index.js b/components/progress/style/index.tsx
similarity index 100%
rename from components/progress/style/index.js
rename to components/progress/style/index.tsx
diff --git a/components/queue-anim/index.jsx b/components/queue-anim/index.tsx
similarity index 100%
rename from components/queue-anim/index.jsx
rename to components/queue-anim/index.tsx
diff --git a/components/queue-anim/style/index.js b/components/queue-anim/style/index.tsx
similarity index 100%
rename from components/queue-anim/style/index.js
rename to components/queue-anim/style/index.tsx
diff --git a/components/radio/group.jsx b/components/radio/group.tsx
similarity index 95%
rename from components/radio/group.jsx
rename to components/radio/group.tsx
index bd2b748125..0e15b56c7a 100644
--- a/components/radio/group.jsx
+++ b/components/radio/group.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import Radio from './radio';
 import RadioButton from './radioButton';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
-
+import assign from 'object-assign';
 function getCheckedValue(children) {
   let value = null;
   let matched = false;
@@ -71,13 +71,11 @@ export default class RadioGroup extends React.Component {
         if (!('key' in radio) && typeof radio.props.value === 'string') {
           keyProps.key = radio.props.value;
         }
-        return React.cloneElement(radio, {
-          ...keyProps,
-          ...radio.props,
+        return React.cloneElement(radio, assign({}, keyProps, radio.props, {
           onChange: this.onRadioChange,
           checked: this.state.value === radio.props.value,
           disabled: radio.props.disabled || this.props.disabled,
-        });
+        }));
       }
       return radio;
     });
diff --git a/components/radio/index.jsx b/components/radio/index.tsx
similarity index 100%
rename from components/radio/index.jsx
rename to components/radio/index.tsx
diff --git a/components/radio/radio.jsx b/components/radio/radio.tsx
similarity index 100%
rename from components/radio/radio.jsx
rename to components/radio/radio.tsx
diff --git a/components/radio/radioButton.jsx b/components/radio/radioButton.tsx
similarity index 100%
rename from components/radio/radioButton.jsx
rename to components/radio/radioButton.tsx
diff --git a/components/radio/style/index.js b/components/radio/style/index.tsx
similarity index 100%
rename from components/radio/style/index.js
rename to components/radio/style/index.tsx
diff --git a/components/rate/index.jsx b/components/rate/index.tsx
similarity index 100%
rename from components/rate/index.jsx
rename to components/rate/index.tsx
diff --git a/components/rate/style/index.js b/components/rate/style/index.tsx
similarity index 100%
rename from components/rate/style/index.js
rename to components/rate/style/index.tsx
diff --git a/components/row/index.js b/components/row/index.tsx
similarity index 100%
rename from components/row/index.js
rename to components/row/index.tsx
diff --git a/components/row/style/index.js b/components/row/style/index.tsx
similarity index 100%
rename from components/row/style/index.js
rename to components/row/style/index.tsx
diff --git a/components/select/index.jsx b/components/select/index.tsx
similarity index 100%
rename from components/select/index.jsx
rename to components/select/index.tsx
diff --git a/components/select/style/index.js b/components/select/style/index.tsx
similarity index 100%
rename from components/select/style/index.js
rename to components/select/style/index.tsx
diff --git a/components/slider/index.jsx b/components/slider/index.tsx
similarity index 51%
rename from components/slider/index.jsx
rename to components/slider/index.tsx
index 37454cb08d..7a5f6b6a34 100644
--- a/components/slider/index.jsx
+++ b/components/slider/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import RcSlider from 'rc-slider';
-
+import splitObject from '../_util/splitObject';
 export default class Slider extends React.Component {
   static defaultProps = {
     prefixCls: 'ant-slider',
@@ -8,34 +8,35 @@ export default class Slider extends React.Component {
   }
 
   render() {
-    const { isIncluded, marks, index, defaultIndex, ...rest } = this.props;
-
+    const [{isIncluded, marks, index, defaultIndex}, others] = splitObject(this.props,
+      ['isIncluded', 'marks', 'index', 'defaultIndex']);
+    
     if (isIncluded !== undefined) {
       // 兼容 `isIncluded`
-      rest.included = isIncluded;
+      others.included = isIncluded;
     }
 
     if (Array.isArray(marks)) {
       // 兼容当 marks 为数组的情况
-      rest.min = 0;
-      rest.max = marks.length - 1;
-      rest.step = 1;
+      others.min = 0;
+      others.max = marks.length - 1;
+      others.step = 1;
 
       if (index !== undefined) {
-        rest.value = index;
+        others.value = index;
       }
       if (defaultIndex !== undefined) {
-        rest.defaultValue = defaultIndex;
+        others.defaultValue = defaultIndex;
       }
 
-      rest.marks = {};
+      others.marks = {};
       marks.forEach((val, idx) => {
-        rest.marks[idx] = val;
+        others.marks[idx] = val;
       });
     } else {
-      rest.marks = marks;
+      others.marks = marks;
     }
 
-    return <RcSlider {...rest} />;
+    return <RcSlider {...others} />;
   }
 }
diff --git a/components/slider/style/index.js b/components/slider/style/index.tsx
similarity index 100%
rename from components/slider/style/index.js
rename to components/slider/style/index.tsx
diff --git a/components/spin/index.jsx b/components/spin/index.tsx
similarity index 92%
rename from components/spin/index.jsx
rename to components/spin/index.tsx
index ef6c802281..8d5792021c 100644
--- a/components/spin/index.jsx
+++ b/components/spin/index.tsx
@@ -3,7 +3,7 @@ import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
 import isCssAnimationSupported from '../_util/isCssAnimationSupported';
 import warning from 'warning';
-
+import splitObject from '../_util/splitObject';
 export default class Spin extends React.Component {
   static defaultProps = {
     prefixCls: 'ant-spin',
@@ -63,7 +63,10 @@ export default class Spin extends React.Component {
   }
 
   render() {
-    const { className, size, prefixCls, tip, ...restProps } = this.props;
+    const [{
+      className, size, prefixCls, tip
+    },restProps] = splitObject(this.props,
+      ['className', 'size', 'prefixCls', 'tip']);
     const { spinning } = this.state;
 
     const spinClassName = classNames({
diff --git a/components/spin/style/index.js b/components/spin/style/index.tsx
similarity index 100%
rename from components/spin/style/index.js
rename to components/spin/style/index.tsx
diff --git a/components/steps/index.jsx b/components/steps/index.tsx
similarity index 100%
rename from components/steps/index.jsx
rename to components/steps/index.tsx
diff --git a/components/steps/style/index.js b/components/steps/style/index.tsx
similarity index 100%
rename from components/steps/style/index.js
rename to components/steps/style/index.tsx
diff --git a/components/style/index.js b/components/style/index.tsx
similarity index 100%
rename from components/style/index.js
rename to components/style/index.tsx
diff --git a/components/switch/index.jsx b/components/switch/index.tsx
similarity index 100%
rename from components/switch/index.jsx
rename to components/switch/index.tsx
diff --git a/components/switch/style/index.js b/components/switch/style/index.tsx
similarity index 100%
rename from components/switch/style/index.js
rename to components/switch/style/index.tsx
diff --git a/components/table/Table.jsx b/components/table/Table.tsx
similarity index 94%
rename from components/table/Table.jsx
rename to components/table/Table.tsx
index 5d324c6eb5..09b3d54e00 100644
--- a/components/table/Table.jsx
+++ b/components/table/Table.tsx
@@ -8,10 +8,10 @@ import Icon from '../icon';
 import Spin from '../spin';
 import classNames from 'classnames';
 import { flatArray } from './util';
-
+import assign from 'object-assign';
 function noop() {
 }
-
+import splitObject from '../_util/splitObject';
 function stopPropagation(e) {
   e.stopPropagation();
   e.nativeEvent.stopImmediatePropagation();
@@ -67,19 +67,16 @@ export default class Table extends React.Component {
 
     const pagination = props.pagination || {};
 
-    this.state = {
+    this.state = assign({}, this.getSortStateFromColumns(), {
       // 减少状态
       selectedRowKeys: (props.rowSelection || {}).selectedRowKeys || [],
       filters: this.getFiltersFromColumns(),
       selectionDirty: false,
-      ...this.getSortStateFromColumns(),
       pagination: this.hasPagination() ?
-        {
-          ...defaultPagination,
-          ...pagination,
+        assign({},  defaultPagination, pagination, {
           current: pagination.defaultCurrent || pagination.current || 1,
-        } : {},
-    };
+        }) : {},
+    });
 
     this.CheckboxPropsCache = {};
   }
@@ -112,17 +109,13 @@ export default class Table extends React.Component {
     if (this.context.antLocale && this.context.antLocale.Table) {
       locale = this.context.antLocale.Table;
     }
-    return { ...defaultLocale, ...locale, ...this.props.locale };
+    return assign({}, defaultLocale, locale, this.props.locale);
   }
 
   componentWillReceiveProps(nextProps) {
     if (('pagination' in nextProps) && nextProps.pagination !== false) {
       this.setState(previousState => {
-        const newPagination = {
-          ...defaultPagination,
-          ...previousState.pagination,
-          ...nextProps.pagination,
-        };
+        const newPagination = assign({}, defaultPagination, previousState.pagination, nextProps.pagination);
         newPagination.current = newPagination.current || 1;
         return { pagination: newPagination };
       });
@@ -159,7 +152,7 @@ export default class Table extends React.Component {
     const filteredValueColumns = this.getFilteredValueColumns(nextProps.columns);
     if (filteredValueColumns.length > 0) {
       const filtersFromColumns = this.getFiltersFromColumns(nextProps.columns);
-      const newFilters = { ...this.state.filters };
+      const newFilters = assign({}, this.state.filters);
       Object.keys(filtersFromColumns).forEach(key => {
         newFilters[key] = filtersFromColumns[key];
       });
@@ -273,16 +266,15 @@ export default class Table extends React.Component {
       this.setState(newState);
     }
 
-    this.props.onChange(...this.prepareParamsArguments({ ...this.state, ...newState }));
+    this.props.onChange(...this.prepareParamsArguments(assign({}, this.state, newState)));
   }
 
   handleFilter = (column, nextFilters) => {
     const props = this.props;
-    let pagination = { ...this.state.pagination };
-    const filters = {
-      ...this.state.filters,
+    let pagination = assign({}, this.state.pagination);
+    const filters = assign({}, this.state.filters, {
       [this.getColumnKey(column)]: nextFilters,
-    };
+    });
     // Remove filters not in current columns
     const currentColumnKeys = props.columns.map(c => this.getColumnKey(c));
     Object.keys(filters).forEach((columnKey) => {
@@ -301,7 +293,7 @@ export default class Table extends React.Component {
       selectionDirty: false,
       pagination,
     };
-    const filtersToSetState = { ...filters };
+    const filtersToSetState = assign({}, filters);
     // Remove filters which is controlled
     this.getFilteredValueColumns().forEach(col => {
       const columnKey = this.getColumnKey(col);
@@ -315,19 +307,17 @@ export default class Table extends React.Component {
 
     // Controlled current prop will not respond user interaction
     if (props.pagination && 'current' in props.pagination) {
-      newState.pagination = {
-        ...pagination,
+      newState.pagination = assign({}, pagination, {
         current: this.state.pagination.current,
-      };
+      });
     }
 
     this.setState(newState, () => {
-      props.onChange(...this.prepareParamsArguments({
-        ...this.state,
+      props.onChange(...this.prepareParamsArguments(assign({}, this.state, {
         selectionDirty: false,
         filters,
         pagination,
-      }));
+      })));
     });
   }
 
@@ -414,7 +404,7 @@ export default class Table extends React.Component {
 
   handlePageChange = (current) => {
     const props = this.props;
-    let pagination = { ...this.state.pagination };
+    let pagination = assign({}, this.state.pagination);
     if (current) {
       pagination.current = current;
     } else {
@@ -428,18 +418,16 @@ export default class Table extends React.Component {
     };
     // Controlled current prop will not respond user interaction
     if (props.pagination && 'current' in props.pagination) {
-      newState.pagination = {
-        ...pagination,
+      newState.pagination = assign({}, pagination, {
         current: this.state.pagination.current,
-      };
+      });
     }
     this.setState(newState);
 
-    this.props.onChange(...this.prepareParamsArguments({
-      ...this.state,
+    this.props.onChange(...this.prepareParamsArguments(assign({}, this.state, {
       selectionDirty: false,
       pagination,
-    }));
+    })));
   }
 
   renderSelectionRadio = (value, record, index) => {
@@ -562,7 +550,7 @@ export default class Table extends React.Component {
     const { sortOrder } = this.state;
     const locale = this.getLocale();
     return columns.map((originColumn, i) => {
-      let column = { ...originColumn };
+      let column = assign({}, originColumn);
       let key = this.getColumnKey(column, i);
       let filterDropdown;
       let sortButton;
@@ -618,12 +606,11 @@ export default class Table extends React.Component {
   handleShowSizeChange = (current, pageSize) => {
     const pagination = this.state.pagination;
     pagination.onShowSizeChange(current, pageSize);
-    const nextPagination = { ...pagination, pageSize, current };
+    const nextPagination = assign({}, pagination, { pageSize, current });
     this.setState({ pagination: nextPagination });
-    this.props.onChange(...this.prepareParamsArguments({
-      ...this.state,
+    this.props.onChange(...this.prepareParamsArguments(assign({}, this.state, {
       pagination: nextPagination,
-    }));
+    })));
   }
 
   renderPagination() {
@@ -727,7 +714,10 @@ export default class Table extends React.Component {
   }
 
   render() {
-    const { style, className, ...restProps } = this.props;
+    const [{
+      style, className
+    },restProps] = splitObject(this.props,
+      ['style', 'className']);
     const data = this.getCurrentPageData();
     let columns = this.renderRowSelection();
     const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
@@ -740,7 +730,7 @@ export default class Table extends React.Component {
 
     columns = this.renderColumnsDropdown(columns);
     columns = columns.map((column, i) => {
-      const newColumn = { ...column };
+      const newColumn = assign({}, column);
       newColumn.key = this.getColumnKey(newColumn, i);
       return newColumn;
     });
diff --git a/components/table/filterDropdown.jsx b/components/table/filterDropdown.tsx
similarity index 100%
rename from components/table/filterDropdown.jsx
rename to components/table/filterDropdown.tsx
diff --git a/components/table/index.jsx b/components/table/index.tsx
similarity index 100%
rename from components/table/index.jsx
rename to components/table/index.tsx
diff --git a/components/table/style/index.js b/components/table/style/index.tsx
similarity index 100%
rename from components/table/style/index.js
rename to components/table/style/index.tsx
diff --git a/components/table/util.js b/components/table/util.tsx
similarity index 82%
rename from components/table/util.js
rename to components/table/util.tsx
index f2dfcec48a..84bf150d2b 100644
--- a/components/table/util.js
+++ b/components/table/util.tsx
@@ -1,8 +1,9 @@
+import assign from 'object-assign';
 export function flatArray(data = [], childrenName = 'children') {
   const result = [];
   const loop = (array) => {
     array.forEach(item => {
-      const newItem = { ...item };
+      const newItem = assign({}, item);
       delete newItem[childrenName];
       result.push(newItem);
       if (item[childrenName] && item[childrenName].length > 0) {
diff --git a/components/tabs/index.jsx b/components/tabs/index.tsx
similarity index 100%
rename from components/tabs/index.jsx
rename to components/tabs/index.tsx
diff --git a/components/tabs/style/index.js b/components/tabs/style/index.tsx
similarity index 100%
rename from components/tabs/style/index.js
rename to components/tabs/style/index.tsx
diff --git a/components/tag/index.jsx b/components/tag/index.tsx
similarity index 88%
rename from components/tag/index.jsx
rename to components/tag/index.tsx
index 229b821c49..70d7a05fa1 100644
--- a/components/tag/index.jsx
+++ b/components/tag/index.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 import Icon from '../icon';
 import classNames from 'classnames';
-
+import splitObject from '../_util/splitObject';
 export default class Tag extends React.Component {
   static defaultProps = {
     prefixCls: 'ant-tag',
@@ -45,7 +45,10 @@ export default class Tag extends React.Component {
   }
 
   render() {
-    const { prefixCls, closable, color, className, children, ...restProps } = this.props;
+    const [{
+      prefixCls, closable, color, className, children
+    },restProps] = splitObject(this.props,
+      ['prefixCls', 'closable', 'color','className','children']);
     const close = closable ? <Icon type="cross" onClick={this.close} /> : '';
     const classString = classNames({
       [prefixCls]: true,
diff --git a/components/tag/style/index.js b/components/tag/style/index.tsx
similarity index 100%
rename from components/tag/style/index.js
rename to components/tag/style/index.tsx
diff --git a/components/time-picker/index.jsx b/components/time-picker/index.tsx
similarity index 95%
rename from components/time-picker/index.jsx
rename to components/time-picker/index.tsx
index 8c1b558f01..cc9163f478 100644
--- a/components/time-picker/index.jsx
+++ b/components/time-picker/index.tsx
@@ -4,7 +4,7 @@ import RcTimePicker from 'rc-time-picker/lib/TimePicker';
 import defaultLocale from './locale/zh_CN';
 import classNames from 'classnames';
 import GregorianCalendar from 'gregorian-calendar';
-
+import assign from 'object-assign';
 export default class TimePicker extends React.Component {
   static defaultProps = {
     format: 'HH:mm:ss',
@@ -77,12 +77,12 @@ export default class TimePicker extends React.Component {
       locale = this.context.antLocale.TimePicker;
     }
     // 统一合并为完整的 Locale
-    return { ...locale, ...this.props.locale };
+    return assign({}, locale, this.props.locale);
   }
 
   render() {
     const locale = this.getLocale();
-    const props = { ...this.props };
+    const props = assign({}, this.props);
     props.placeholder = ('placeholder' in this.props)
       ? props.placeholder : locale.placeholder;
     if (props.defaultValue) {
diff --git a/components/time-picker/locale/en_US.js b/components/time-picker/locale/en_US.tsx
similarity index 58%
rename from components/time-picker/locale/en_US.js
rename to components/time-picker/locale/en_US.tsx
index 2566680873..f5e274cf0c 100644
--- a/components/time-picker/locale/en_US.js
+++ b/components/time-picker/locale/en_US.tsx
@@ -1,8 +1,7 @@
 import TimepickerLocale from 'rc-time-picker/lib/locale/en_US';
-
-const locale = {
+import assign from 'object-assign';
+const locale = assign({}, {
   placeholder: 'Select a time',
-  ... TimepickerLocale,
-};
+}, TimepickerLocale);
 
 export default locale;
diff --git a/components/time-picker/locale/ru_RU.js b/components/time-picker/locale/ru_RU.tsx
similarity index 68%
rename from components/time-picker/locale/ru_RU.js
rename to components/time-picker/locale/ru_RU.tsx
index 134bfae691..b5676e5c5b 100644
--- a/components/time-picker/locale/ru_RU.js
+++ b/components/time-picker/locale/ru_RU.tsx
@@ -2,11 +2,10 @@
  * Created by Andrey Gayvoronsky on 13/04/16.
  */
 import TimepickerLocale from 'rc-time-picker/lib/locale/ru_RU';
-
-const locale = {
+import assign from 'object-assign';
+const locale = assign({}, {
   placeholder: 'Выберите время',
-  ... TimepickerLocale,
-};
+}, TimepickerLocale);
 
 export default locale;
 
diff --git a/components/time-picker/locale/zh_CN.js b/components/time-picker/locale/zh_CN.tsx
similarity index 58%
rename from components/time-picker/locale/zh_CN.js
rename to components/time-picker/locale/zh_CN.tsx
index 4db90bf0c6..b7ae75b716 100644
--- a/components/time-picker/locale/zh_CN.js
+++ b/components/time-picker/locale/zh_CN.tsx
@@ -1,8 +1,7 @@
 import TimepickerLocale from 'rc-time-picker/lib/locale/zh_CN';
-
-const locale = {
+import assign from 'object-assign';
+const locale = assign({}, {
   placeholder: '请选择时间',
-  ... TimepickerLocale,
-};
+}, TimepickerLocale);
 
 export default locale;
diff --git a/components/time-picker/style/index.js b/components/time-picker/style/index.tsx
similarity index 100%
rename from components/time-picker/style/index.js
rename to components/time-picker/style/index.tsx
diff --git a/components/timeline/Timeline.jsx b/components/timeline/Timeline.tsx
similarity index 80%
rename from components/timeline/Timeline.jsx
rename to components/timeline/Timeline.tsx
index 3db9e4ac72..0eb357b00d 100644
--- a/components/timeline/Timeline.jsx
+++ b/components/timeline/Timeline.tsx
@@ -1,14 +1,17 @@
 import React from 'react';
 import classNames from 'classnames';
 import TimelineItem from './TimelineItem';
-
+import splitObject from '../_util/splitObject';
 export default class Timeline extends React.Component {
   static defaultProps = {
     prefixCls: 'ant-timeline',
   }
 
   render() {
-    const { prefixCls, children, pending, className, ...restProps } = this.props;
+    const [{
+      prefixCls, children, pending, className
+    },restProps] = splitObject(this.props,
+      ['prefixCls', 'children', 'pending','className']);
     const pendingNode = typeof pending === 'boolean' ? null : pending;
     const classString = classNames({
       [prefixCls]: true,
diff --git a/components/timeline/TimelineItem.jsx b/components/timeline/TimelineItem.tsx
similarity index 80%
rename from components/timeline/TimelineItem.jsx
rename to components/timeline/TimelineItem.tsx
index a9a7ef0553..2740b06327 100644
--- a/components/timeline/TimelineItem.jsx
+++ b/components/timeline/TimelineItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-
+import splitObject from '../_util/splitObject';
 export default class TimelineItem extends React.Component {
   static defaultProps = {
     prefixCls: 'ant-timeline',
@@ -10,7 +10,10 @@ export default class TimelineItem extends React.Component {
   }
 
   render() {
-    const { prefixCls, color, last, children, pending, className, dot, ...restProps } = this.props;
+    const [{
+      prefixCls, color, last, children, pending, className, dot
+    },restProps] = splitObject(this.props,
+      ['prefixCls', 'color', 'last','children','pending','className','dot']);
 
     const itemClassName = classNames({
       [`${prefixCls}-item`]: true,
diff --git a/components/timeline/index.jsx b/components/timeline/index.tsx
similarity index 100%
rename from components/timeline/index.jsx
rename to components/timeline/index.tsx
diff --git a/components/timeline/style/index.js b/components/timeline/style/index.tsx
similarity index 100%
rename from components/timeline/style/index.js
rename to components/timeline/style/index.tsx
diff --git a/components/tooltip/index.jsx b/components/tooltip/index.tsx
similarity index 100%
rename from components/tooltip/index.jsx
rename to components/tooltip/index.tsx
diff --git a/components/tooltip/style/index.js b/components/tooltip/style/index.tsx
similarity index 100%
rename from components/tooltip/style/index.js
rename to components/tooltip/style/index.tsx
diff --git a/components/transfer/index.jsx b/components/transfer/index.tsx
similarity index 99%
rename from components/transfer/index.jsx
rename to components/transfer/index.tsx
index b72a53bcc8..b739b6d7e9 100644
--- a/components/transfer/index.jsx
+++ b/components/transfer/index.tsx
@@ -3,7 +3,7 @@ import List, { isRenderResultPlainObject } from './list';
 import Operation from './operation';
 import Search from './search';
 import classNames from 'classnames';
-
+import assign from 'object-assign';
 function noop() {
 }
 
diff --git a/components/transfer/list.jsx b/components/transfer/list.tsx
similarity index 97%
rename from components/transfer/list.jsx
rename to components/transfer/list.tsx
index 02954a3bf9..b665cd1ade 100644
--- a/components/transfer/list.jsx
+++ b/components/transfer/list.tsx
@@ -4,7 +4,7 @@ import Search from './search';
 import classNames from 'classnames';
 import Animate from 'rc-animate';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
-
+import assign from 'object-assign';
 function noop() {
 }
 
@@ -117,8 +117,8 @@ export default class TransferList extends React.Component {
     let { searchPlaceholder, notFoundContent } = this.props;
 
     // Custom Layout
-    const footerDom = footer({ ...this.props });
-    const bodyDom = body({ ...this.props });
+    const footerDom = footer(assign({}, this.props));
+    const bodyDom = body(assign({}, this.props));
 
     const listCls = classNames({
       [prefixCls]: true,
diff --git a/components/transfer/operation.jsx b/components/transfer/operation.tsx
similarity index 100%
rename from components/transfer/operation.jsx
rename to components/transfer/operation.tsx
diff --git a/components/transfer/search.jsx b/components/transfer/search.tsx
similarity index 100%
rename from components/transfer/search.jsx
rename to components/transfer/search.tsx
diff --git a/components/transfer/style/index.js b/components/transfer/style/index.tsx
similarity index 100%
rename from components/transfer/style/index.js
rename to components/transfer/style/index.tsx
diff --git a/components/tree-select/index.jsx b/components/tree-select/index.tsx
similarity index 100%
rename from components/tree-select/index.jsx
rename to components/tree-select/index.tsx
diff --git a/components/tree-select/style/index.js b/components/tree-select/style/index.tsx
similarity index 100%
rename from components/tree-select/style/index.js
rename to components/tree-select/style/index.tsx
diff --git a/components/tree/index.jsx b/components/tree/index.tsx
similarity index 100%
rename from components/tree/index.jsx
rename to components/tree/index.tsx
diff --git a/components/tree/style/index.js b/components/tree/style/index.tsx
similarity index 100%
rename from components/tree/style/index.js
rename to components/tree/style/index.tsx
diff --git a/components/upload/getFileItem.js b/components/upload/getFileItem.tsx
similarity index 100%
rename from components/upload/getFileItem.js
rename to components/upload/getFileItem.tsx
diff --git a/components/upload/index.jsx b/components/upload/index.tsx
similarity index 97%
rename from components/upload/index.jsx
rename to components/upload/index.tsx
index 713026ef33..fc7650f873 100644
--- a/components/upload/index.jsx
+++ b/components/upload/index.tsx
@@ -4,7 +4,7 @@ import UploadList from './uploadList';
 import getFileItem from './getFileItem';
 import classNames from 'classnames';
 const prefixCls = 'ant-upload';
-
+import assign from 'object-assign';
 function noop() {
 }
 
@@ -52,12 +52,12 @@ function genPercentAdd() {
   };
 }
 
-function UploadDragger(props) {
+export function Dragger(props) {
   return <Upload {...props} type="drag" style={{ height: props.height }} />;
 }
 
 export default class Upload extends React.Component {
-  static Dragger = UploadDragger;
+  static Dragger = Dragger;
 
   static defaultProps = {
     type: 'select',
@@ -232,14 +232,13 @@ export default class Upload extends React.Component {
 
   render() {
     let type = this.props.type || 'select';
-    let props = {
-      ...this.props,
+    let props = assign({}, this.props, {
       onStart: this.onStart,
       onError: this.onError,
       onProgress: this.onProgress,
       onSuccess: this.onSuccess,
       beforeUpload: this.beforeUpload,
-    };
+    });
     let uploadList;
     if (this.props.showUploadList) {
       uploadList = (
diff --git a/components/upload/style/index.js b/components/upload/style/index.tsx
similarity index 100%
rename from components/upload/style/index.js
rename to components/upload/style/index.tsx
diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.tsx
similarity index 100%
rename from components/upload/uploadList.jsx
rename to components/upload/uploadList.tsx
diff --git a/components/validation/index.jsx b/components/validation/index.tsx
similarity index 100%
rename from components/validation/index.jsx
rename to components/validation/index.tsx
diff --git a/components/validation/style/index.js b/components/validation/style/index.tsx
similarity index 100%
rename from components/validation/style/index.js
rename to components/validation/style/index.tsx
diff --git a/package.json b/package.json
index 2aa765d0d9..25e157e4bc 100644
--- a/package.json
+++ b/package.json
@@ -28,10 +28,9 @@
   "main": "dist/antd",
   "files": [
     "dist",
-    "lib",
-    "index.d.ts"
+    "lib"
   ],
-  "typings": "type-definitions/antd.d.ts",
+  "typings": "lib/index.d.ts",
   "license": "MIT",
   "dependencies": {
     "array-tree-filter": "~1.0.0",
@@ -40,6 +39,7 @@
     "gregorian-calendar": "~4.1.0",
     "gregorian-calendar-format": "~4.1.0",
     "normalize.css": "^4.1.1",
+    "object-assign": "~4.1.0",
     "rc-animate": "~2.1.0",
     "rc-calendar": "~5.6.2",
     "rc-cascader": "~0.9.9",
@@ -68,12 +68,12 @@
     "rc-tree-select": "~1.7.2",
     "rc-upload": "~1.13.0",
     "rc-util": "~3.1.3",
-    "react-slick": "~0.12.0",
     "react-addons-pure-render-mixin": "~15.1.0",
+    "react-slick": "~0.12.0",
     "warning": "~3.0.0"
   },
   "devDependencies": {
-    "antd-tools": "^0.8.0",
+    "antd-tools": "^0.9.0",
     "babel-eslint": "^6.0.2",
     "babel-jest": "^12.0.2",
     "babel-plugin-antd": "^0.4.0",
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000..de6423c912
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "jsx": "react",
+    "target": "es6"
+  }
+}
\ No newline at end of file
diff --git a/typings.json b/typings.json
index a93ad67fd4..139eb642d1 100644
--- a/typings.json
+++ b/typings.json
@@ -1,6 +1,6 @@
 {
   "globalDependencies": {
-    "react": "registry:dt/react#0.14.0+20160526134601",
+    "react": "registry:dt/react#0.14.0+20160423065914",
     "react-dom": "registry:dt/react-dom#0.14.0+20160412154040"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
index de4dcacf20..e387e0c16f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,7 +5,7 @@ module.exports = function (webpackConfig) {
   if (process.env.RUN_ENV === 'PRODUCTION') {
     // Fix ie8 compatibility
     webpackConfig[0].module.loaders.unshift({
-      test: /\.jsx?$/,
+      test: /\.(tsx|jsx?)$/,
       loader: 'es3ify-loader',
     });
   }