feat: up to ts 2.4, fix compile error

components/accordion/index.tsx

@@ -3,21 +3,26 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import RNAccordion from 'react-native-collapsible/Accordion';
 import AccordionProps from './PropsType';
-import AccordionStyle from './style/index';
+import AccordionStyle, { TAccordionStyle } from './style/index';
 import Icon from '../icon';
 
 export interface AccordionPanelProps {
   key?: string;
   header: any;
 }
 
+export interface AccordionNativeProps extends AccordionProps {
+  styles: TAccordionStyle;
+}
+
+
 class AccordionPanel extends React.Component<AccordionPanelProps, any> {
   render() {
     return null;
   }
 }
 
-class Accordion extends React.Component<AccordionProps, any> {
+class Accordion extends React.Component<AccordionNativeProps, any> {
   static defaultProps = {
     styles: AccordionStyle,
   };

components/accordion/style/index.tsx

@@ -1,7 +1,17 @@
 import variables from '../../style/themes/default';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 
-export default StyleSheet.create({
+export interface TAccordionStyle {
+  container: ViewStyle;
+  header: ViewStyle;
+  arrow: ViewStyle;
+  headerWrap: ViewStyle;
+  headerText: TextStyle;
+  content: ViewStyle;
+  contentText: TextStyle;
+}
+
+export default StyleSheet.create<TAccordionStyle>({
   container: {
     borderTopWidth: StyleSheet.hairlineWidth,
     borderTopColor: variables.border_color_base,

components/action-sheet/AndroidContainer.tsx

@@ -46,13 +46,13 @@ class ActionSheetAndroid extends React.Component<Props, any> {
       excludedActivityTypes.map((item, index) => <View key={index}>{item}</View>)
     ) : (
       options as Array<string>).map((item, index) => (
-        <View key={index} style={[cancelButtonIndex === index ? styles.cancelBtn : null]}>
+        <View key={index} style={[cancelButtonIndex === index ? styles.cancelBtn : undefined]}>
           <TouchableHighlight
             style={[ styles.btn ]}
             underlayColor={variables.fill_tap}
             onPress={() => this.confirm(index)}
           >
-            <Text style={[ destructiveButtonIndex === index ? styles.destructiveBtn : null ]}>
+            <Text style={[ destructiveButtonIndex === index ? styles.destructiveBtn : undefined ]}>
               {item}
             </Text>
           </TouchableHighlight>

components/activity-indicator/index.tsx

@@ -4,10 +4,14 @@ import {
   Text,
   ActivityIndicator,
 } from 'react-native';
-import style from './style';
+import style, { TActivityIndicatorStyle } from './style';
 import PropTypes from './PropsType';
 
-export default class RNActivityIndicator extends React.Component<PropTypes, any> {
+export interface ActivityIndicatorNativeProps extends PropTypes {
+  styles: TActivityIndicatorStyle;
+}
+
+export default class RNActivityIndicator extends React.Component<ActivityIndicatorNativeProps, any> {
   static defaultProps = {
     animating: true,
     color: 'gray',
@@ -34,13 +38,15 @@ export default class RNActivityIndicator extends React.Component<PropTypes, any>
   }
 
   _renderSpinner() {
+    const { styles, color, size, text } = this.props;
+    const { spinner, tip } = styles;
     return (
-      <View style={this.props.styles.spinner} >
+      <View style={spinner} >
         <ActivityIndicator
-          color={this.props.color}
-          size={this.props.size}
+          color={color}
+          size={size}
         />
-        {this.props.text && (<Text style={[this.props.styles.tip]}>{this.props.text}</Text>)}
+        {text && (<Text style={[tip]}>{text}</Text>)}
       </View>
     );
   }

components/activity-indicator/style/index.tsx

@@ -1,7 +1,15 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, TextStyle } from 'react-native';
 import variables from '../../style/themes/default';
 
-export default StyleSheet.create({
+export interface TActivityIndicatorStyle {
+  container: ViewStyle;
+  innerContainer: ViewStyle;
+  wrapper: ViewStyle;
+  tip: TextStyle;
+  toast: TextStyle;
+  spinner: ViewStyle;
+}
+export default StyleSheet.create<TActivityIndicatorStyle>({
   container: {
     position: 'absolute',
     top: 0,

components/input-item/Input.web.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import omit from 'omit.js';
 
-export interface InputProps extends React.ChangeTargetHTMLProps<HTMLInputElement> {
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   focused?: boolean;
 }
 

components/list/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, ViewStyle } from 'react-native';
 import Item from './ListItem';
 import { ListProps } from './PropsType';
 import listStyles from './style/index';
@@ -34,7 +34,7 @@ export default class List extends React.Component<ListProps, any> {
       {headerDom}
       <View style={styles.Body}>
         {children}
-        <View style={[styles.BodyBottomLine]}/>
+        <View style={[styles.BodyBottomLine as ViewStyle]}/>
       </View>
       {footerDom}
     </View>);

components/progress/demo/basic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, ViewStyle } from 'react-native';
 import { WhiteSpace, Button, Progress } from 'antd-mobile';
 
 export default class BasicProgressExample extends React.Component<any, any> {
@@ -19,15 +19,15 @@ export default class BasicProgressExample extends React.Component<any, any> {
   }
 
   render() {
-    const viewStyle = {
+    const style = {
       marginTop: 80,
       flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
     };
     return (
       <View>
         <Progress percent={90} position="fixed" />
 
-        <View style={[viewStyle]}>
+        <View style={[style as ViewStyle]}>
           <View style={{ marginRight: 10, height: 4, flex: 1 }}><Progress percent={this.state.percent} /></View>
           <Text>{this.state.percent}%</Text>
         </View>

components/result/index.tsx

@@ -1,6 +1,6 @@
 /* tslint:disable:jsx-no-multiline-js */
 import React from 'react';
-import { View, Text, Image } from 'react-native';
+import { View, Text, Image, ImageURISource } from 'react-native';
 import ResultStyle from './style';
 import Button from '../button';
 import ResultProps from './PropsType';
@@ -19,7 +19,7 @@ export default class Result extends React.Component<ResultProps, any> {
     if (img) {
       imgContent = <View style={styles.imgWrap}>{img}</View>;
     } else if (imgUrl) {
-      imgContent = <View style={styles.imgWrap}><Image source={imgUrl} style={styles.img} /></View>;
+      imgContent = <View style={styles.imgWrap}><Image source={imgUrl as ImageURISource | ImageURISource[]} style={styles.img} /></View>;
     }
 
     return (

package.json

@@ -65,9 +65,9 @@
     "warning": "^3.0.0"
   },
   "devDependencies": {
-    "@types/react": "15.0.31",
-    "@types/react-dom": "~15.5.1",
-    "@types/react-native": "~0.42.0",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@types/react-native": "latest",
     "antd": "2.x",
     "antd-demo-jest": "^1.3.1",
     "antd-mobile-demo-data": "^0.1.1",
@@ -121,7 +121,7 @@
     "stylelint": "^7.12.0",
     "stylelint-config-standard": "^16.0.0",
     "svg-sprite-loader": "^0.3.1",
-    "typescript": "~2.3.0",
+    "typescript": "~2.4.0",
     "typescript-babel-jest": "^1.0.1",
     "webpack-visualizer-plugin": "^0.1.11"
   },