我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))
世界都清晰了,我终于不用四处维护我的代码了
帮忙点个赞吧~,原创不易,支持转载请标明出处~