小程序用ts时点击事件e的类型

今天检查代码的时候发现,小伙伴用ts写的文件里面,点击事件的e都是用any,这明显不对。所以趁着有空,去百度去翻阅资料解决这个问题。

小程序的官方社区下面直接给了答案,如下图:

嗯,是的,用WechatMiniprogram.BaseEvent就解决了定义的类型,不再报错,如下图:

如果你是单纯的只是想看见这个点击事件,上面文章就解决了问题。如果类似问题也想解决,可以往下读。

对于别的事件的e怎么去定义呢?比如input的e.detail.value这种,用上面方式是报错的,至少提醒上是报错的。那怎么办呢?我首先是想百度和谷歌看看有没有更好的解决方案,结果很遗憾,没人教怎么去找对应的类型,只能自己上啦。

ok,下面进入正文,你肯认真看,保准你以后会举一反三

  1. 首先,你找到刚刚写的WechatMiniprogram.BaseEvent的页面,并鼠标焦点到WechatMiniprogram.BaseEvent的BaseEvent上面,然后按键盘的f12或者fn+f12,你会进到下面的页面,如图:

  1. 看上图,你能看到对应的文件名,也能看到我们WechatMiniprogram.BaseEvent定义的类型,那么这个文件名代表什么呢?ok,看右侧,你会发现这个是typing里面全部是定义。事件的,页面的,api的都一一有说明

 2.那么input的事件是哪个呢?就在event这个文件下面就可以找到,如下图:

这样就可以找到对应的事件,事件的在event这个库就够咯。

tips:要注意每个调用的库命名空间哦!

比如下面的event的和component的命名空间就不一样

 

 调用的时候一定要看好调用的命名空间,比如事件的是WechatMiniprogram.BaseEvent,组件的是WechatMiniprogram.Component.Constructor

到这,就可以自己看和选同的类型啦。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
可以使用以下类型来校验JS事件对象e的类型: ```typescript interface MouseEvent extends UIEvent { readonly altKey: boolean; readonly button: number; readonly buttons: number; readonly clientX: number; readonly clientY: number; readonly ctrlKey: boolean; readonly metaKey: boolean; readonly movementX: number; readonly movementY: number; readonly offsetX: number; readonly offsetY: number; readonly pageX: number; readonly pageY: number; readonly relatedTarget: EventTarget | null; readonly screenX: number; readonly screenY: number; readonly shiftKey: boolean; readonly x: number; readonly y: number; } interface KeyboardEvent extends UIEvent { readonly altKey: boolean; readonly code: string; readonly ctrlKey: boolean; readonly isComposing: boolean; readonly key: string; readonly location: number; readonly metaKey: boolean; readonly repeat: boolean; readonly shiftKey: boolean; } interface UIEvent extends Event { readonly detail: number; readonly view: Window | null; } interface Event { readonly bubbles: boolean; cancelBubble: boolean; readonly cancelable: boolean; readonly composed: boolean; readonly currentTarget: EventTarget | null; readonly defaultPrevented: boolean; readonly eventPhase: number; readonly isTrusted: boolean; returnValue: boolean; readonly target: EventTarget | null; readonly timeStamp: number; readonly type: string; composedPath(): EventTarget[]; initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void; preventDefault(): void; stopImmediatePropagation(): void; stopPropagation(): void; } interface EventTarget { addEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void; dispatchEvent(event: Event): boolean; removeEventListener(type: string, listener?: EventListenerOrEventListenerObject | null, options?: boolean | EventListenerOptions): void; } ``` 以上这些类型都是内置的TypeScript类型,可以直接使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值