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

浙公网安备 33010602011771号