add tslint type check test

try refactoring list type definition

components/list/ListItem.tsx

@@ -1,11 +1,11 @@
 /* tslint:disable:jsx-no-multiline-js */
 import React from 'react';
 import { Image, View, TouchableHighlight, Text } from 'react-native';
-import { ListItemProps, BriefProps } from './PropsType';
+import { ListItemNativeProps, BriefNativeProps } from './PropsType';
 import listItemStyles from './style/index';
 import listStyles from './style/index';
 
-export class Brief extends React.Component<BriefProps, any> {
+export class Brief extends React.Component<BriefNativeProps, any> {
   render() {
     const { children, style, styles = listStyles, wrap } = this.props;
 
@@ -24,8 +24,8 @@ export class Brief extends React.Component<BriefProps, any> {
   }
 }
 
-export default class Item extends React.Component<ListItemProps, any> {
-  static defaultProps: Partial<ListItemProps> = {
+export default class Item extends React.Component<ListItemNativeProps, any> {
+  static defaultProps: Partial<ListItemNativeProps> = {
     multipleLine: false,
     wrap: false,
     styles: listItemStyles,

components/list/ListItem.web.tsx

@@ -2,24 +2,24 @@
 import React from 'react';
 import classNames from 'classnames';
 import Touchable from 'rc-touchable';
-import { ListItemProps, BriefProps } from './PropsType';
+import { ListItemWebProps, BriefWebProps } from './PropsType';
 import omit from 'omit.js';
 
-export class Brief extends React.Component<BriefProps, any> {
+export class Brief extends React.Component<BriefWebProps, any> {
   render() {
     return (
       <div className="am-list-brief" style={this.props.style}>{this.props.children}</div>
     );
   }
 }
 
-class ListItem extends React.Component<ListItemProps, any> {
-  static defaultProps: Partial<ListItemProps> = {
+class ListItem extends React.Component<ListItemWebProps, any> {
+  static defaultProps: Partial<ListItemWebProps> = {
     prefixCls: 'am-list',
     align: 'middle',
     error: false,
     multipleLine: false,
-    wrap: false,
+    // wrap: false,
     platform: 'cross',
   };
 

components/list/PropsType.tsx

@@ -1,74 +1,77 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import ReactNative from 'react-native';
 
 export interface ListProps {
   renderHeader?: Function | JSX.Element;
   renderFooter?: Function | JSX.Element;
-  children?: JSX.Element | JSX.Element[];
-  style?: React.CSSProperties | {} | Array<{}>;
-  /* for web */
+}
+
+export interface ListWebProps extends ListProps, React.HTMLProps<HTMLDivElement> {
   prefixCls?: string;
-  className?: string;
-  role?: string;
-  /* for native */
+}
+
+export interface ListNativeProps extends ListProps, ReactNative.ViewProperties {
+  ref?: any
   styles?: {
-    Header?: {};
-    Footer?: {};
-    Body?: {};
-    BodyBottomLine?: {};
+    Header?: ReactNative.TextStyle;
+    Footer?: ReactNative.TextStyle;
+    Body?: ReactNative.ViewStyle;
+    BodyBottomLine?: ReactNative.ViewStyle;
   };
 }
 
 export interface ListItemProps {
   align?: 'top'|'middle'|'bottom';
   disabled?: boolean;
   multipleLine?: boolean;
-  children?: ReactNode;
-  thumb?: ReactNode | null;
-  extra?: ReactNode;
+  thumb?: React.ReactNode;
+  extra?: React.ReactNode;
   arrow?: 'horizontal'|'down'|'up'|'empty'|'';
-  wrap?: boolean;
-  onClick?: (e?: any) => void;
-  style?: React.CSSProperties | {} | Array<{}>;
-  /* for web */
-  prefixCls?: string;
-  className?: string;
+}
 
-  role?: string;
+export interface ListItemWebProps extends ListItemProps, React.HTMLProps<HTMLDivElement> {
+  prefixCls?: string;
   activeStyle?: React.CSSProperties;
   error?: boolean;
   platform?: 'android' | 'ios' | 'cross';
+  // wrap?: boolean; // overwrite React.HTMLAttributes.wrap: string
+}
 
-  /* for native */
+export interface ListItemNativeProps extends ListItemProps,
+  ReactNative.ViewProperties,
+  Pick<ReactNative.TouchableHighlightProperties, 'onPressIn' | 'onPressOut'> {
+  ref?: any
+  wrap?: boolean;
   styles?: {
-    underlayColor: {},
-    Content: {},
-    column: {},
-    Extra: {},
-    Arrow: {},
-    ArrowV: {},
-    Item: {},
-    Thumb: {},
-    multipleThumb: {},
-    Line: {},
-    multipleLine: {},
+    underlayColor: string,
+    Content: ReactNative.TextStyle,
+    column: ReactNative.ViewStyle,
+    Extra: ReactNative.TextStyle,
+    Arrow: ReactNative.ImageStyle,
+    ArrowV: ReactNative.ImageStyle,
+    Item: ReactNative.ViewStyle,
+    Thumb: ReactNative.ImageStyle,
+    multipleThumb: ReactNative.ImageStyle,
+    Line: ReactNative.ViewStyle,
+    multipleLine: ReactNative.ViewStyle,
   };
-  onPressIn?: () => void;
-  onPressOut?: () => void;
+  onClick?: ReactNative.TouchableHighlightProperties['onPress'];
 }
 
 export interface BriefProps {
-  children?: ReactNode;
-  wrap?: boolean;
-  style?: React.CSSProperties | {} | Array<{}>;
 
-  /* for web */
-  prefixCls?: string;
-  className?: string;
+}
+
+export interface BriefWebProps extends BriefProps,
+  Pick<React.HTMLProps<HTMLDivElement>, 'style'> {
 
-  role?: string;
-  /* for native */
-  styles: {
-    Brief: {},
-    BriefText: {},
+}
+
+export interface BriefNativeProps extends BriefProps,
+  Pick<ReactNative.TextProperties, 'style'> {
+  wrap?: boolean;
+  styles?: {
+    Brief: ReactNative.ViewStyle,
+    BriefText: ReactNative.TextStyle,
   };
 }

components/list/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import Item from './ListItem';
-import { ListProps } from './PropsType';
+import { ListNativeProps } from './PropsType';
 import listStyles from './style/index';
 
-export default class List extends React.Component<ListProps, any> {
+export default class List extends React.Component<ListNativeProps, any> {
   static Item = Item;
 
   render() {

components/list/index.web.tsx

@@ -2,12 +2,12 @@
 import React from 'react';
 import Item from './ListItem.web';
 import classNames from 'classnames';
-import { ListProps } from './PropsType';
+import { ListWebProps } from './PropsType';
 
-export default class List extends React.Component<ListProps, any> {
+export default class List extends React.Component<ListWebProps, any> {
   static Item = Item;
 
-  static defaultProps: Partial<ListProps> = {
+  static defaultProps: Partial<ListWebProps> = {
     prefixCls: 'am-list',
   };
 

package.json

@@ -130,6 +130,7 @@
     "srclint": "eslint site scripts --ext '.js,.jsx'",
     "tslint": "antd-tools run ts-lint && npm run compile && rm -rf lib",
     "tslint-fix": "antd-tools run ts-lint-fix && npm run compile && rm -rf lib",
+    "tslint-check": "tslint --type-check -p tests/types/native && tslint --type-check -p tests/types/web",
     "demolint": "RUN_ENV=DEMO eslint components/*/demo/*.md --ext '.md'",
     "stylelint": "stylelint \"{site,components}/**/*.less\" --syntax less",
     "stylelint-fix": "stylelint \"{site,components}/**/*.less\" --syntax less --fix",

tests/types/native/native.tsx

@@ -0,0 +1,56 @@
+import List from 'antd-mobile/lib/list';
+
+const noop = () => { };
+const style = { rotation: 0 };
+
+const list = () => (
+  <List
+    renderHeader={noop}
+    renderFooter={noop}
+    onTouchEnd={noop}
+    styles={{
+      Header: style,
+      Body: style,
+      BodyBottomLine: style,
+      Footer: style,
+    }}
+  >
+    <br />
+    <List.Item
+      align='top'
+      disabled
+      multipleLine
+      thumb='/'
+      extra='/'
+      arrow=''
+      wrap
+      styles={{
+        underlayColor: '',
+        Content: style,
+        column: style,
+        Extra: style,
+        Arrow: style,
+        ArrowV: style,
+        Item: style,
+        Thumb: style,
+        multipleThumb: style,
+        Line: style,
+        multipleLine: style
+      }}
+      onClick={noop}
+      onTouchEnd={noop}
+    >
+      <br />
+      <List.Item.Brief
+        wrap
+        style={style}
+        styles={{
+          Brief: style,
+          BriefText: style
+        }}
+      >
+        <br />
+      </List.Item.Brief>
+    </List.Item>
+  </List>
+);

tests/types/native/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../../tsconfig",
+  "compilerOptions": {
+    "noUnusedLocals": false,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "pretty": true,
+    "baseUrl": "../../../",
+    "paths": {
+      "antd-mobile": ["./components/native"],
+      "antd-mobile/lib/*": ["./components/*"]
+    }
+  },
+  "files": [
+    "./native.tsx"
+  ]
+}

tests/types/web/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../../tsconfig",
+  "compilerOptions": {
+    "noUnusedLocals": false,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "pretty": true,
+    "baseUrl": "../../../",
+    "paths": {
+      "antd-mobile": ["./components"],
+      "antd-mobile/lib/*": ["./components/*/index.web"]
+    }
+  },
+  "files": [
+    "./web.tsx"
+  ]
+}

tests/types/web/web.tsx

@@ -0,0 +1,34 @@
+import List from 'antd-mobile/lib/list';
+
+const noop = () => { };
+const style = { color: 'silver' };
+
+const list = () => (
+  <List
+    renderHeader={noop}
+    renderFooter={noop}
+    prefixCls=''
+    onClick={noop}
+  >
+    <br />
+    <List.Item
+      align='top'
+      disabled
+      multipleLine
+      thumb='/'
+      extra='/'
+      arrow=''
+      wrap='soft'
+      prefixCls=''
+      activeStyle={style}
+      error
+      platform='cross'
+      onTouchEnd={noop}
+    >
+      <br />
+      <List.Item.Brief style={style}>
+        <br />
+      </List.Item.Brief>
+    </List.Item>
+  </List>
+);

tsconfig.json

@@ -11,7 +11,8 @@
   "exclude": [
     "node_modules",
     "lib",
-    "es"
+    "es",
+    "tests"
   ],
   "compileOnSave": false
 }