improve types (youzan#1036)

AzureTech · Mar 26, 2019 · b8f6d0a · b8f6d0a
1 parent ed69111
commit b8f6d0a
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 80 deletions.
diff --git a/packages/zent/src/affix/Affix.tsx b/packages/zent/src/affix/Affix.tsx
@@ -8,19 +8,19 @@ import WindowEventHandler from '../utils/component/WindowEventHandler';
 import getViewportSize from '../utils/dom/getViewportSize';
 
 export interface IAffixProps {
-  offsetTop?: number;
+  offsetTop: number;
   offsetBottom?: number;
   onPin?: () => void;
   onUnpin?: () => void;
-  zIndex?: number;
+  zIndex: number;
   className?: string;
   placeHoldClassName?: string;
   prefix?: string;
 }
 
 export interface IAffixState {
   position: 'static' | 'fixed';
-  width: number | null;
+  width: number | undefined;
   placeHoldStyle: CSSProperties;
 }
 
@@ -33,7 +33,7 @@ export class Affix extends Component<IAffixProps, IAffixState> {
 
   state: IAffixState = {
     position: 'static',
-    width: null,
+    width: undefined,
     placeHoldStyle: {},
   };
 
@@ -54,7 +54,7 @@ export class Affix extends Component<IAffixProps, IAffixState> {
     this.affix = false;
     this.setState({
       position: 'static',
-      width: null,
+      width: undefined,
       placeHoldStyle: { overflow: 'hidden' },
     });
     onUnpin && onUnpin();
@@ -85,7 +85,7 @@ export class Affix extends Component<IAffixProps, IAffixState> {
       return;
     }
 
-    let reallyNum, propsNum;
+    let reallyNum: number, propsNum: number;
 
     if (props.offsetBottom !== undefined) {
       reallyNum =

diff --git a/packages/zent/src/alert/Alert.tsx b/packages/zent/src/alert/Alert.tsx
@@ -5,13 +5,13 @@ import isFunction from 'lodash-es/isFunction';
 
 export interface IAlertProps {
   type: 'info' | 'warning' | 'danger' | 'error';
-  size?: 'normal' | 'large';
-  rounded?: boolean;
-  closable?: boolean;
+  size: 'normal' | 'large';
+  rounded: boolean;
+  closable: boolean;
   onClose?: () => void;
   children: React.ReactNode;
   className?: string;
-  prefix?: string;
+  prefix: string;
 }
 
 // 忽略不支持的style
@@ -78,8 +78,8 @@ export class Alert extends Component<IAlertProps> {
       `${prefix}-alert`,
       `${prefix}-${styleClassMap[type]}`,
       `${prefix}-${sizeClassMap[size]}`,
+      className,
       {
-        [className]: !!className,
         [`${prefix}-alert-border-rounded`]: rounded,
         [`${prefix}-alert-closable`]: closable,
       }

diff --git a/packages/zent/src/badge/Badge.tsx b/packages/zent/src/badge/Badge.tsx
@@ -6,15 +6,15 @@ import isArray from 'lodash-es/isArray';
 const NO_STYLE = {};
 
 export interface IBadgeProps {
-  count?: number;
-  maxCount?: number;
-  dot?: boolean;
-  showZero?: boolean;
+  count: number;
+  maxCount: number;
+  dot: boolean;
+  showZero: boolean;
   offset?: [number, number];
   style?: React.CSSProperties;
   children: React.ReactNode;
-  className?: string;
-  prefix?: string;
+  className: string;
+  prefix: string;
 }
 
 export class Badge extends PureComponent<IBadgeProps> {
@@ -27,27 +27,16 @@ export class Badge extends PureComponent<IBadgeProps> {
     prefix: 'zent',
   };
 
-  render() {
+  renderCount() {
     const {
       count,
       maxCount,
       dot,
       showZero,
       offset,
       style,
-      className,
       prefix,
-      children,
     } = this.props;
-    const containerCls = cx({
-      [`${prefix}-badge`]: true,
-      [`${prefix}-badge--has-content`]: children,
-      [`${prefix}-badge--no-content`]: !children,
-      [className]: !!className,
-
-      // For compatibility only
-      [`${prefix}-badge-none-cont`]: !children,
-    });
     const posStyle =
       isArray(offset) && offset.length === 2
         ? {
@@ -56,29 +45,36 @@ export class Badge extends PureComponent<IBadgeProps> {
           }
         : NO_STYLE;
     const badgeStyle = style ? { ...style, ...posStyle } : posStyle;
+    if (dot) {
+      return <span className={`${prefix}-badge-dot`} style={badgeStyle} />;
+    } else if (count > 0 || (count === 0 && showZero)) {
+      return (
+        <span className={`${prefix}-badge-count`} style={badgeStyle}>
+          {count > maxCount ? `${maxCount}+` : count}
+        </span>
+      );
+    }
+    return null;
+  }
 
-    const renderCount = () => {
-      let countEle = null;
-      if (dot) {
-        countEle = (
-          <span className={`${prefix}-badge-dot`} style={badgeStyle} />
-        );
-      } else if (count > 0 || (count === 0 && showZero)) {
-        countEle = (
-          <span className={`${prefix}-badge-count`} style={badgeStyle}>
-            {count > maxCount ? `${maxCount}+` : count}
-          </span>
-        );
-      }
-      return countEle;
-    };
+  render() {
+    const { className, prefix, children } = this.props;
+    const containerCls = cx({
+      [`${prefix}-badge`]: true,
+      [`${prefix}-badge--has-content`]: children,
+      [`${prefix}-badge--no-content`]: !children,
+      [className]: !!className,
+
+      // For compatibility only
+      [`${prefix}-badge-none-cont`]: !children,
+    });
 
     return (
       <div className={containerCls}>
         {children ? (
           <div className={`${prefix}-badge-content`}>{children}</div>
         ) : null}
-        {renderCount()}
+        {this.renderCount()}
       </div>
     );
   }

diff --git a/packages/zent/src/block-header/BlockHeader.tsx b/packages/zent/src/block-header/BlockHeader.tsx
@@ -8,10 +8,10 @@ export interface IBlockHeaderProps {
   className?: string;
   title: string;
   tooltip?: ReactNode;
-  content?: ReactNode;
+  content: ReactNode;
   childAlign?: 'left' | 'right';
-  position?: PopPositions;
-  prefix?: string;
+  position: PopPositions;
+  prefix: string;
 }
 
 export class BlockHeader extends Component<IBlockHeaderProps> {

diff --git a/packages/zent/src/breadcrumb/Breadcrumb.tsx b/packages/zent/src/breadcrumb/Breadcrumb.tsx
@@ -5,9 +5,9 @@ import cx from 'classnames';
 import Item, { IBreadcrumbItemProps } from './Item';
 
 export interface IBreadcrumbProps {
-  breads?: IBreadcrumbItemProps[];
-  className?: string;
-  prefix?: string;
+  breads: IBreadcrumbItemProps[];
+  className: string;
+  prefix: string;
 }
 
 export class Breadcrumb extends Component<IBreadcrumbProps> {

diff --git a/packages/zent/src/button/Button.tsx b/packages/zent/src/button/Button.tsx
@@ -28,7 +28,10 @@ const A_BLACK_LIST = ['href', 'target'].concat(BLACK_LIST);
 
 const TWO_CN_CHAR_REG = /^[\u4e00-\u9fa5]{2}$/;
 
-const wrapTextWithSpanTag = (children, isNeedInsertSpace) => {
+const wrapTextWithSpanTag = (
+  children: React.ReactNode,
+  isNeedInsertSpace: boolean
+) => {
   return Children.map(children, child => {
     if (typeof child === 'string') {
       if (isNeedInsertSpace && TWO_CN_CHAR_REG.test(child)) {
@@ -43,23 +46,23 @@ const wrapTextWithSpanTag = (children, isNeedInsertSpace) => {
 
 export interface IButtonProps
   extends Omit<React.HTMLProps<HTMLButtonElement>, 'size'> {
-  type?: 'default' | 'primary' | 'secondary' | 'danger' | 'success';
-  size?: 'medium' | 'large' | 'small';
-  htmlType?: 'button' | 'submit' | 'reset';
-  block?: boolean;
-  disabled?: boolean;
-  loading?: boolean;
-  outline?: boolean;
-  bordered?: boolean;
+  type: 'default' | 'primary' | 'secondary' | 'danger' | 'success';
+  size: 'medium' | 'large' | 'small';
+  htmlType: 'button' | 'submit' | 'reset';
+  block: boolean;
+  disabled: boolean;
+  loading: boolean;
+  outline: boolean;
+  bordered: boolean;
   component?: React.ComponentType<any> | string;
   href?: string;
   target?: string;
   className?: string;
   style?: CSSProperties;
-  prefix?: string;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
+  prefix: string;
+  onClick?: MouseEventHandler<Element>;
   icon?: IconType;
-  insertSpace?: boolean;
+  insertSpace: boolean;
 }
 
 export class Button extends Component<IButtonProps> {
@@ -79,27 +82,26 @@ export class Button extends Component<IButtonProps> {
 
   static Group = Group;
 
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
   // 处理点击事件
-  handleClick(event) {
+  handleClick: React.MouseEventHandler = event => {
     if (this.props.disabled || this.props.loading) return;
 
     if (this.props.onClick) {
       this.props.onClick(event);
     }
-  }
+  };
 
-  isNeedInsertSpace() {
+  isNeedInsertSpace(): boolean {
     const { icon, children, insertSpace } = this.props;
-    return insertSpace && React.Children.count(children) === 1 && !icon;
+    return !!insertSpace && React.Children.count(children) === 1 && !icon;
   }
 
   // render a 标签
-  renderLink(classNames, iconNode, wrappedChildren) {
+  renderLink(
+    classNames: string,
+    iconNode: React.ReactNode,
+    wrappedChildren: React.ReactNode
+  ) {
     const { component, disabled, loading, href = '', target } = this.props;
     const Node = component || 'a';
     const nodeProps = omit(this.props, A_BLACK_LIST);
@@ -118,7 +120,11 @@ export class Button extends Component<IButtonProps> {
   }
 
   // render button 标签
-  renderButton(classNames, iconNode, wrappedChildren) {
+  renderButton(
+    classNames: string,
+    iconNode: React.ReactNode,
+    wrappedChildren: React.ReactNode
+  ) {
     const { component, disabled, loading, htmlType } = this.props;
     const Node = component || 'button';
     const nodeProps = omit(this.props, BTN_BLACK_LIST);
@@ -152,7 +158,6 @@ export class Button extends Component<IButtonProps> {
       icon,
       children,
     } = this.props;
-    const renderer = href || target ? 'renderLink' : 'renderButton';
     const { className } = this.props;
     const classNames = setClass(
       {
@@ -172,8 +177,15 @@ export class Button extends Component<IButtonProps> {
       children,
       this.isNeedInsertSpace()
     );
-
-    return this[renderer](classNames, iconNode, wrappedChildren);
+    const args: [string, React.ReactNode, React.ReactNode] = [
+      classNames,
+      iconNode,
+      wrappedChildren,
+    ];
+    if (href || target) {
+      return this.renderLink.apply(this, args);
+    }
+    return this.renderButton.apply(this, args);
   }
 }
 

diff --git a/packages/zent/src/button/Group.tsx b/packages/zent/src/button/Group.tsx
@@ -3,14 +3,13 @@ import { Component } from 'react';
 import setClass from 'classnames';
 
 export interface IButtonGroupProps {
-  className?: string;
-  prefix?: string;
+  className: string;
+  prefix: string;
   style?: React.CSSProperties;
 }
 
 export class ButtonGroup extends Component<IButtonGroupProps> {
   static defaultProps = {
-    style: null,
     className: '',
     prefix: 'zent',
   };