美文网首页
typescript的使用tips (dva/umi)

typescript的使用tips (dva/umi)

作者: JiangHaoFunc | 来源:发表于2020-03-09 18:29 被阅读0次

    一、connect mapStateToProps 中的提示

    connect 提示.jpg
    function mapStateToProps(state: ConnectState) {
      return {
        menuCollapsed: state.global.menuCollapsed,
      };
    }
    

    这个提示依赖于 ConnectState, ConnectState是怎么定义呢?

    ConnectState 这个相当于整个工程model层state的输出(connect.d.ts 文件)

    import { AnyAction } from 'redux';
    import { RouterTypes } from 'umi';
    import { GlobalModelState } from './global';
    
    export interface Loading {
      global: boolean;
      effects: { [key: string]: boolean | undefined };
      models: {
    
      };
    }
    
    export interface ConnectState {
      loading: Loading;
      global: GlobalModelState
    }
    

    在这个文件中,要把你定义的model的state interface

    import { GlobalModelState } from './global';
    

    然后导出

    export interface ConnectState {
      global: GlobalModelState
    }
    

    二、model的定义

    import { Reducer } from 'redux';
    import { Effect } from 'dva';
    
    // 需要导出的state
    export interface XXXState {
      key1: string;
      key2: string[];
    }
    
    export interface XXXModelType {
      namespace: string;
      state: XXXState;
      effects: {
        effects1: Effect;
        effects2: Effect;
        effects3: Effect;
      };
      reducers: {
        reducers1: Reducer<XXXState>;
      };
    }
    
    

    三、页面state props定义

    个人遇到常见问题

    1.dispatch 怎么定义

    import { Dispatch, AnyAction } from 'redux';
    interface Props {
      dispatch: Dispatch<AnyAction>;
    }
    

    2.antd form 怎么定义

    import { FormComponentProps } from 'antd/es/form';
    interface Props {
      form: FormComponentProps['form'];
    }
    

    3.location query 怎么定义

    import { RouteComponentProps } from 'react-router-dom';
    interface Props extends RouteComponentProps {
      others: ...
    }
    

    这样 this.props 中就有location等字段

    4.一般情况下,props中基本都是model中定义的,我们可以直接继承model定义的,不用重新写

    import { modelState } from '@/models/model';
    interface Props extends modelState {
      others: ...
    }
    

    导出model中定义的state,继承即可

    5.props中多个model的参数,切含有location,多个继承

    import { RouteComponentProps } from 'react-router-dom';
    import { model1State } from '@/models/model1';
    import { model2State } from '@/models/model2';
    interface Props extends RouteComponentProps, model1State, model2State {
      others: ...
    }
    

    四、一些事件

    1.input onChange

    onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    
    }
    

    2.input onClick

    onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    
    }
    

    五、返回的数据 (可选做,这个的工作量相对较多,但是做好后,定义好类型,修改字段会变的非常容易,类型检测会避免很多错误)

    interface prop_list {
      name?: string;
      value?: string;
      image?: string;
    }
    
    export interface sku_list_list {
      cost_price?: string;
      variant_sku?: string;
      stock?: string;
      prop_list?: prop_list[];
    }
    

    ----------------20200420更新----------------

    六、对于返回的数据,项目中常用到的接口数据对象(比如,用户信息,商品信息,订单信息等)

    types/目录下定义好其结构化类型声明

    相关文章

      网友评论

          本文标题:typescript的使用tips (dva/umi)

          本文链接:https://www.haomeiwen.com/subject/uvxmdhtx.html