- Component 在传递 behaviors 时无法推断 this 的类型?
Component 不传递 behaviors 选项可以正确推断 this 对象的 TS 类型,但传递之后就不行了。比如下面的代码,如果删掉 behaviors 这一行,通过 this 来访问组件下的属性和方法就能得到类型提示,比如 this.data.form.data.nickname、this.loadData(),不过 behaviors 的属性和方法仍然还是不行。 Component({ behaviors: [commonBehavior, storeBehavior, formBehavior], data: { form: { data: { nickname: null, }, rules: [ { name: "nickname", rules: [{ required: true, message: "请输入昵称" }], }, ], }, }, lifetimes: { async attached() { await this.loadData(); }, }, methods: { async loadData() { const user = this.data.loginedUser; this.setFormData({ nickname: user!.nickname }); }, onTapClear() { this.setFormData({ nickname: null }); }, onSubmitForm(e) { // 如果是事件触发,需要先保存输入再提交 if (e) { this.onChangeInput(e); } this.validateForm({ success: async (data) => { const { nickname } = data; await userUpdate({ nickname }); this.updateLoginedUser(); wx.showToast({ title: "提交成功" }); wx.navigateBack(); }, }); }, }, });
2024-12-30 - Page 对象里如何声明混入的 behaviors 的 TypeScript 类型?
formBehavior.js export default Behavior({ data: { formData: {}, formRules: [], formError: "", formLoading: false, }, methods: { setFormData(formData: Record) { this.setData({ formData }); }, setFormError(formError: string) { this.setData({ formError }); }, setFormLoading(formLoading: boolean) { this.setData({ formLoading }); }, submitForm( success?: (formData: Record) => void, fail?: (errors: Array<{ message: string }>) => void ) { }, }, }); page.js Page({ behaviors: [formBehavior], onSubmitForm() { // 消除混入的 Behavior 属性不存在的 TS 告警 (this as any).submitForm(async (formData: Record) => { }); }, }); 上面的代码中 Page 对象混入了 formBehavior,但在调用其方法 submitForm 时 TypeScript 告警“属性不存在”,只能通过 this as any 来强制隐藏。尝试过定义 formBehavior 的数据类型 FormBehaviorData 和方法类型 FormBehaviorMehtod,然后通过 TData 和 TMethod 范型参数传递给 Behavior,没有用,给页面指定范型参数 Page<FormBehaviorData & WechatMiniprogram.Page.DataOption, FormBehaviorMehtod & WechatMiniprogram.Page.CustomOption> 也不行。
2024-12-08