fix: strictNullCheck with defaultProps

DefinitelyTyped/DefinitelyTyped#11640

Author: paranoidjk

components/badge/index.tsx

@@ -18,7 +18,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
       children, text, size, overflowCount, dot, corner, ...restProps, // todo: hot
     } = this.props;
 
-    text = typeof text === 'number' && text > overflowCount ? `${overflowCount}+` : text;
+    text = typeof text === 'number' && text > (overflowCount as number) ? `${overflowCount}+` : text;
 
     // dot mode don't need text
     if (dot) {

components/badge/index.web.tsx

@@ -16,7 +16,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
       className, prefixCls,
       children, text, size, overflowCount, dot, corner, hot, ...restProps,
     } = this.props;
-
+    overflowCount = overflowCount as number;
     text = typeof text === 'number' && text > overflowCount ? `${overflowCount}+` : text;
 
     // dot mode don't need text

components/grid/index.tsx

@@ -24,8 +24,10 @@ export default class Grid extends React.Component<GridProps, any> {
   }
 
   render() {
-    const { data, hasLine, columnNum, isCarousel, carouselMaxRow, onClick = () => {}, styles } = this.props;
-
+    const { data, hasLine, isCarousel, onClick = () => {}, styles } = this.props;
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640
+    const columnNum = this.props.columnNum as number;
+    const carouselMaxRow = this.props.carouselMaxRow as number;
     const dataLength = data && data.length || 0;
     const rowCount = Math.ceil(dataLength / columnNum);
 

components/grid/index.web.tsx

@@ -20,9 +20,12 @@ export default class Grid extends React.Component<GridProps, any> {
   render() {
     const {
       prefixCls, className,
-      data, hasLine, columnNum, isCarousel, carouselMaxRow, onClick = () => {},
+      data, hasLine, isCarousel, onClick = () => {},
     } = this.props;
 
+    const columnNum = this.props.columnNum as number;
+    const carouselMaxRow = this.props.carouselMaxRow as number;
+
     const dataLength = data && data.length || 0;
     const rowCount = Math.ceil(dataLength / columnNum);
 

components/input-item/index.tsx

@@ -50,7 +50,8 @@ export default class InputItem extends React.Component<InputItemProps, any> {
   }
 
   onChange = (text) => {
-    const { maxLength, onChange, type } = this.props;
+    const { onChange, type } = this.props;
+    const maxLength = this.props.maxLength as number;
     switch (type) {
       case 'bankCard':
         text = text.replace(/\D/g, '');
@@ -95,10 +96,10 @@ export default class InputItem extends React.Component<InputItemProps, any> {
 
   render() {
     const {
-      value, defaultValue, type, style, clear, children, error, extra, labelNumber,
+      value, defaultValue, type, style, clear, children, error, extra,
       last, onExtraClick = noop, onErrorClick = noop, styles,
     } = this.props;
-
+    const labelNumber = this.props.labelNumber as number;
     let valueProps;
     if ('value' in this.props) {
       valueProps = {

components/steps/StepsItem.tsx

@@ -21,10 +21,14 @@ export default class StepsItem extends React.Component<StepsItemProps, any> {
 
   render() {
     const {
-      size, current, index, last, title, description,
-      status, errorTail, icon, styles,
+      size, last, title, description,
+      status, icon, styles,
     } = this.props;
 
+    const index = this.props.index as number;
+    const current = this.props.current as number;
+    const errorTail = this.props.errorTail as number;
+
     let headCls: string = '';
     let tailTopCls: string = '';
     let tailBottomCls: string = '';

components/steps/index.web.tsx

@@ -41,7 +41,8 @@ export default class Steps extends React.Component<StepsProps, any> {
   }
   render() {
     this.stepRefs = [];
-    const { children, current, status } = this.props;
+    const { children, status } = this.props;
+    const current = this.props.current as number;
     // flattern the array at first https://github.com/ant-design/ant-design-mobile/issues/934
     let newChildren: Array<any> = React.Children.map(children, item => item);
     newChildren = React.Children.map(newChildren, (item: any, index) => {

components/textarea-item/index.tsx

@@ -45,8 +45,8 @@ export default class TextAreaItem extends React.Component<TextAreaItemProps, any
   onChange = (event) => {
     const text = event.nativeEvent.text;
     let height;
-    const { autoHeight, rows, onChange } = this.props;
-
+    const { autoHeight, onChange } = this.props;
+    const rows = this.props.rows as number;
     if (autoHeight) {
       height = event.nativeEvent.contentSize.height;
     } else if (rows > 1) {
@@ -67,9 +67,11 @@ export default class TextAreaItem extends React.Component<TextAreaItemProps, any
   render() {
     const { inputCount } = this.state;
     const {
-      value, defaultValue, rows, error, clear, count, autoHeight, last, onErrorClick,
+      value, defaultValue, error, clear, autoHeight, last, onErrorClick,
       styles, style,
     } = this.props;
+    const rows = this.props.rows as number;
+    const count = this.props.count as number;
 
     let valueProps;
     if ('value' in this.props) {

components/textarea-item/index.web.tsx

@@ -160,10 +160,11 @@ export default class TextareaItem extends React.Component<TextareaItemProps, Tex
 
   render() {
     let {
-      prefixCls, prefixListCls, style, title, value, defaultValue, clear, rows, count,
+      prefixCls, prefixListCls, style, title, value, defaultValue, clear,
       editable, disabled, error, className, labelNumber, autoHeight,
     } = this.props;
-
+    const count = this.props.count as number;
+    const rows = this.props.rows as number;
     // note: remove `placeholderTextColor` prop for rn TextInput supports placeholderTextColor
     const otherProps = omit(this.props, ['prefixCls', 'prefixListCls', 'editable', 'style',
       'clear', 'children', 'error', 'className', 'count', 'labelNumber', 'title', 'onErrorClick',

components/toast/ToastContainer.tsx

@@ -37,7 +37,8 @@ export default class ToastContainer extends React.Component<ToastProps, any> {
   }
 
   componentDidMount() {
-    const { onClose, duration, onAnimationEnd } = this.props;
+    const { onClose, onAnimationEnd } = this.props;
+    const duration = this.props.duration as number;
     const timing = Animated.timing;
     if (this.anim) {
       this.anim = null;