我get到typeScript的高级技巧

此文为博主自己的记录,

枚举enum

之前写常量 我会直接

const status =[
    {type:'all',value:1}
    {type:'part',value:2}
]

或者

const status = ['all','part']

 看起来不太聪明的样子

现在有了ts的enum了,我又可以了

于是可以利用enum如下

export enum InternalStatus {
    TYPE_ALL = 25,
    OPEN = 1,
    CLOSE = 0
}

export const InternalStatusConstant: { [K in InternalStatus]: string } = {
    '25': '不限',
    '1': '打开',
    '0': '关闭'
};

 比如知道后端返回的值需要做对比的时候就可以很直观 

InternalStatus.OPEN ===data.status?"等于":“不等于”

如果你需要显示状态对应的字段 你可以

InternalStatusConstant[data.status]
//或者
InternalStatusConstant[InternalStatus.OPEN]

 如果需要改状态/改name,我只需要修改一个源了~

typeOf

typeOf  代表取某个值的 type,可以从以下示例来展示他们的用法

以前typeScript定义mobx类型各种弯弯绕绕

之前的写法如下:

// store
export interface ICommonStoreContainer {
  store: {
    commonStore: CommonStore;
    loginStore: LoginStore;
    userStore: UserStore;
    billStore: BillStore;
  };
}

export LoginBusiniss = (storeContainer:ICommonStoreContainer )=>{
  const {store } = storeContainer
  const {loginStore} = store
  const propsConnect = {
        user:loginStore.user
   } 
  const  diapathConnect = {
       getUserInfo : loginStore.getUserInfo
  }
  return{
     ...propsConnect ,
     ...getUserInfo
  }     
}

export interface loginBusinissProps{
     user?:IUser;
     getUserInfo?:(id:number)=>AxiosPromise
}

// 引用
interface  userProps extend Partial<loginBusinissProps>{
  onClose?:()=>void;
}
 function User(props:userProps){
   const {getUserInfo,user,onClose} = useProps
     retrun <>
      <p>用户模块</p>
     </>
}
//注册监听到组件上 
export default inject("loginStore")(observer(User))

 好麻烦我要各种绕圈子OMG

现在使用pick和typeof,定义如下:

const store =  {
    loginStore:new loginStore()       
}

type StoreType = typeof store

// 引用
interface useProps { 
    onClose?: () => void;
}

interface MobxProps extends useProps, Pick<StoreType, "loginStore">
function User(props: userProps) { 
    const { onClose, loginStore } = props as MobxProps
    return  <>
    <p>用户模块</p>
   </>
    }

export default inject("loginStore")(observer(User))

世界都清晰了,我终于不用四处维护我的代码了

帮忙点个赞吧~,原创不易,支持转载请标明出处~

 

posted @ 2020-07-29 16:23  文学少女  阅读(219)  评论(0编辑  收藏  举报