Add typings

components/alert/index.tsx

@@ -1,10 +1,31 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 import Icon from '../icon';
 import classNames from 'classnames';
 
-export default class Alert extends React.Component {
+interface AlertProps {
+  /**
+   * Type of Alert styles, options:`success`, `info`, `warning`, `error`
+   */
+  type: 'success' | 'info' | 'warning' | 'error';
+  /** Whether Alert can be closed */
+  closable?: boolean;
+  /** Close text to show */
+  closeText?: React.ReactNode;
+  /** Content of Alert */
+  message: React.ReactNode;
+  /** Additional content of Alert */
+  description?: React.ReactNode;
+  /** Callback when close Alert */
+  onClose?: (event) => void;
+  /** Whether to show icon */
+  showIcon?: boolean;
+  style?: React.CSSProperties;
+  prefixCls?: string;
+}
+
+export default class Alert extends React.Component<AlertProps, any> {
   static defaultProps = {
     prefixCls: 'ant-alert',
     showIcon: false,
@@ -20,7 +41,7 @@ export default class Alert extends React.Component {
   }
   handleClose = (e) => {
     e.preventDefault();
-    let dom = ReactDOM.findDOMNode(this);
+    let dom = ReactDOM.findDOMNode(this) as HTMLElement;
     dom.style.height = `${dom.offsetHeight}px`;
     // Magic code
     // 重复一次后才能正确设置 height

components/back-top/index.tsx

@@ -20,17 +20,21 @@ function getScroll(w, top) {
   return ret;
 }
 
-export default class BackTop extends React.Component {
-
-  static propTypes = {
-    visibilityHeight: React.PropTypes.number,
-  }
+interface BackTopProps {
+  visibilityHeight?: number;
+  onClick?: (event) => void;
+  prefixCls?: string;
+  className?: string;
+}
 
+export default class BackTop extends React.Component<BackTopProps, any> {
   static defaultProps = {
     onClick() {},
     visibilityHeight: 400,
     prefixCls: 'ant-back-top',
-  }
+  };
+
+  scrollEvent: any;
 
   constructor(props) {
     super(props);
@@ -41,7 +45,9 @@ export default class BackTop extends React.Component {
   }
 
   scrollToTop = (e) => {
-    if (e) e.preventDefault();
+    if (e) {
+      e.preventDefault();
+    }
     this.setScrollTop(0);
     this.props.onClick(e);
   }
@@ -69,7 +75,7 @@ export default class BackTop extends React.Component {
   }
 
   render() {
-    const { prefixCls, className, children, ...otherProps } = this.props;
+    const { prefixCls, className, children } = this.props;
     const classString = classNames({
       [prefixCls]: true,
       [className]: !!className,
@@ -86,7 +92,10 @@ export default class BackTop extends React.Component {
     };
 
     // fix https://fb.me/react-unknown-prop
-    const divProps = omit(otherProps, [
+    const divProps = omit(this.props, [
+      'prefixCls',
+      'className',
+      'children',
       'visibilityHeight',
     ]);
 

components/badge/ScrollNumber.tsx

@@ -1,4 +1,5 @@
-import React, {createElement} from 'react';
+import * as React from 'react';
+import { createElement, Component } from 'react';
 import {findDOMNode} from 'react-dom';
 import isCssAnimationSupported from '../_util/isCssAnimationSupported';
 import assign from 'object-assign';
@@ -12,7 +13,7 @@ function getNumberArray(num) {
       .map(i => Number(i)) : [];
 }
 
-export default class ScrollNumber extends React.Component {
+export default class ScrollNumber extends Component<any, any> {
   static defaultProps = {
     prefixCls: 'ant-scroll-number',
     count: null,
@@ -32,6 +33,8 @@ export default class ScrollNumber extends React.Component {
     height: React.PropTypes.number,
   };
 
+  lastCount: any;
+
   constructor(props) {
     super(props);
     this.state = {

components/badge/index.tsx

@@ -3,7 +3,19 @@ import Animate from 'rc-animate';
 import ScrollNumber from './ScrollNumber';
 import classNames from 'classnames';
 
-export default class Badge extends React.Component {
+interface BadgeProps {
+  /** Number to show in badge */
+  count: number | string;
+  /** Max count to show */
+  overflowCount?: number;
+  /** whether to show red dot without number */
+  dot?: boolean;
+  style?: React.CSSProperties;
+  prefixCls?: string;
+  className?: string;
+}
+
+export default class Badge extends React.Component<BadgeProps, any> {
   static defaultProps = {
     prefixCls: 'ant-badge',
     count: null,

components/breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,5 @@
-import React, { cloneElement } from 'react';
+import * as React from 'react';
+import { cloneElement } from 'react';
 import BreadcrumbItem from './BreadcrumbItem';
 
 const defaultNameRender = (breadcrumbName, route, params) => {
@@ -13,7 +14,19 @@ const defaultNameRender = (breadcrumbName, route, params) => {
   return <span>{name}</span>;
 };
 
-export default class Breadcrumb extends React.Component {
+interface BreadcrumbProps {
+  prefixCls?: string;
+  routes?: Array<any>;
+  params?: Object;
+  separator?: string | React.ReactNode;
+  linkRender?: (link, name, paths: Array<any>) => React.ReactNode;
+  nameRender?: (breadcrumbName, route, params) => React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
+  static Item: any;
+
   static defaultProps = {
     prefixCls: 'ant-breadcrumb',
     separator: '/',
@@ -56,7 +69,7 @@ export default class Breadcrumb extends React.Component {
         return null;
       });
     } else {
-      crumbs = React.Children.map(children, (element, index) => {
+      crumbs = React.Children.map(children, (element: any, index) => {
         return cloneElement(element, {
           separator,
           key: index,

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import splitObject from '../_util/splitObject';
 
-export default class BreadcrumbItem extends React.Component {
+interface BreadcrumbItemProps {
+  separator?: React.ReactNode;
+  href?: string;
+}
+
+export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps, any> {
   static defaultProps = {
     prefixCls: 'ant-breadcrumb',
     separator: '/',

components/breadcrumb/index.en-US.md

@@ -28,5 +28,5 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 | routes    | The routing stack information of router | Array             |         | -      |
 | params    | Routing parameter                        | Object            |         | -      |
 | separator | Custom separator                      | String or Element |         | '/'    |
-| linkRender | Custom link function，and react-router configuration | Function(href, name) |         | -    |
-| nameRender | Custom link function，and react-router configuration | Function(name) |         | -    |
+| linkRender | Custom link function，and react-router configuration | Function(href, name, paths) |         | -    |
+| nameRender | Custom link function，and react-router configuration | Function(breadcrumbName, route, params) |         | -    |

components/button/button-group.tsx

@@ -4,7 +4,15 @@ import splitObject from '../_util/splitObject';
 
 const prefix = 'ant-btn-group-';
 
-export default function ButtonGroup(props) {
+type ButtonSize = 'small' | 'large'
+
+interface ButtonGroupProps {
+  size?: ButtonSize;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export default function ButtonGroup(props: ButtonGroupProps) {
   const [{ size, className }, others] = splitObject(props, ['size', 'className']);
 
   // large => lg
@@ -22,7 +30,3 @@ export default function ButtonGroup(props) {
 
   return <div {...others} className={classes} />;
 }
-
-ButtonGroup.propTypes = {
-  size: React.PropTypes.oneOf(['large', 'small']),
-};

components/button/button.tsx

@@ -24,7 +24,26 @@ function insertSpace(child) {
   return child;
 }
 
-export default class Button extends React.Component {
+type ButtonType = 'primary' | 'ghost' | 'dashed'
+type ButtonShape = 'circle' | 'circle-outline'
+type ButtonSize = 'small' | 'large'
+
+interface ButtonProps {
+  type?: ButtonType;
+  htmlType?: string;
+  icon?: string;
+  shape?: ButtonShape;
+  size?: ButtonSize;
+  onClick?: React.FormEventHandler;
+  loading?: boolean;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  prefixCls?: string;
+}
+
+export default class Button extends React.Component<ButtonProps, any> {
+  static Group: any;
+
   static defaultProps = {
     prefixCls: 'ant-btn',
     onClick() {},
@@ -42,6 +61,9 @@ export default class Button extends React.Component {
     icon: React.PropTypes.string,
   };
 
+  timeout: any;
+  clickedTimeout: any;
+
   componentWillUnmount() {
     if (this.clickedTimeout) {
       clearTimeout(this.clickedTimeout);
@@ -55,7 +77,7 @@ export default class Button extends React.Component {
     button.className = button.className.replace(` ${this.props.prefixCls}-clicked`, '');
   }
 
-  handleClick = (...args) => {
+  handleClick = (e) => {
     // Add click effect
     const buttonNode = findDOMNode(this);
     this.clearButton(buttonNode);
@@ -63,12 +85,12 @@ export default class Button extends React.Component {
     clearTimeout(this.timeout);
     this.timeout = setTimeout(() => this.clearButton(buttonNode), 500);
 
-    this.props.onClick(...args);
+    this.props.onClick(e);
   }
 
   // Handle auto focus when click button in Chrome
   handleMouseUp = (e) => {
-    findDOMNode(this).blur();
+    (findDOMNode(this) as HTMLElement).blur();
     if (this.props.onMouseUp) {
       this.props.onMouseUp(e);
     }

components/card/index.tsx

@@ -1,7 +1,18 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import splitObject from '../_util/splitObject';
-export default props => {
+
+interface CardProps {
+  title?: React.ReactNode;
+  extra?: React.ReactNode;
+  bordered?: boolean;
+  bodyStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+  loading?: boolean;
+  children?: any;
+}
+
+export default (props: CardProps) => {
   const [{
     prefixCls = 'ant-card', className, extra, bodyStyle,
     title, loading, bordered = true,

components/index.tsx

@@ -1,7 +1,23 @@
 import Affix from './affix';
 export { Affix };
 
-// export {default as } does not work for ie8
+import Alert from './alert';
+export { Alert };
+
+import BackTop from './back-top';
+export { BackTop };
+
+import Badge from './badge';
+export { Badge };
+
+import Breadcrumb from './breadcrumb';
+export { Breadcrumb };
+
+import Button from './button';
+export { Button };
+
+import Card from './card';
+export { Card };
 
 import Collapse from './collapse';
 export { Collapse };