扫描小程序码分享
1、创建一个behavior,并在组件中引入这个behavior,调用behavior里的data和方法 都会报错不存在该属性或者方法;虽然是可以用as any 就可以调用到,但是有没有更好的解决方法呢?
2、在组件中引入这个behavior,调用behavior里的data和方法 都会报错不存在该属性或者方法;
17 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
declare namespace WechatMiniprogram.Page { interface ILifetime { test():void; } } declare namespace WechatMiniprogram.Component { interface InstanceMethods<D extends DataOption> { test(): void; } }
可以尝试在类型声明中typings/index.d.ts进行声明类型扩展,应该会有用
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
2020年的问题,现在2024年了,有什么完美解法吗?
同求解……我每次都要 (this as any).test() ,但这样看起来很拉跨
只需要定义behavior的同时能自动导出对应的behavior类型,在page或者component的property/data/methods中定义一个空对象并强制类型为behavior对应的property/data/methods类型即可。
// 组件或者页面的定义文件 import listBehavior, { type ListBehavior } from '@/behaviors/listBehavior' type Item = { id: string; num: number } Component({ behaviors: [listBehavior], properties: { ...{} as ListBehavior<Item[]>['properties'], otherProp: { type: String, value: '0' } }, data: { ...{} as ListBehavior<Item[]>['data'], }, methods: { ...{} as ListBehavior<Item[]>['methods'], getList(page, pageSize) { return doReq('/getAllList', page, pageSize) } onPullDownRefresh() { // listBehavior['methods']中的refreshList this.refreshList() }, onReachBottom() { // listBehavior['methods']中的loadList this.loadList() } } })
// behaviors/listBehavior.ts import { useBehavior } from '@/utils/use' const { behaviorID, _optType, } = useBehavior({ data: { list: [], _page: 1, _pageSize: 10, }, methods: { loadList() { // 此处的getList是使用behavior的组件或者页面中定义的 this.getList(this.data._page, this.data._pageSize).then(res => { this.setData({ list: res }) }) }, refreshList() { this.setData({ _page: 1, list: [] }) this.loadList() } } }) export default behaviorID export type ListBehavior = typeof _optType
核心就在于定义behavior的同时能够导出一个能表示当前类型的变量_optType,_optType可以是没有任何实际作用的空对象{},它的作用就是能够通过 typeof 来实现自动导出behavior类型。
这个解决方案无任何副作用,校验完备,使用简便。
function useBehavior<TData extends WechatMiniprogram.Behavior.DataOption,
TProperty extends WechatMiniprogram.Behavior.PropertyOption,
TMethod extends WechatMiniprogram.Behavior.MethodOption,
TCustomInstanceProperty extends WechatMiniprogram.IAnyObject = Record<string, never>>(opt: Partial<WechatMiniprogram.Behavior.Data<TData>> &
Partial<WechatMiniprogram.Behavior.Property<TProperty>> &
Partial<WechatMiniprogram.Behavior.Method<TMethod>> &
Partial<WechatMiniprogram.Behavior.OtherOption> &
Partial<WechatMiniprogram.Behavior.Lifetimes> &
ThisType<WechatMiniprogram.Behavior.Instance<TData, TProperty, TMethod, TCustomInstanceProperty>>) {
const behaviorID = Behavior(opt)
return {
behaviorID,
_optType: {} as typeof opt,
}
export {
useBehavior
我修改了类型文件中 `WechatMiniprogram.Page.Constructor` 的和 `Options` 类型的定义. 添加了两个新的可选范型 `BehaviorData` 和 `BehaviorMethods`. 在使用 `Page` 的时候把相应的 behavior 的类型传进去.
type Options< TData extends DataOption, TCustom extends CustomOption, BehaviorData, BehaviorMthods > = (TCustom & Partial<Data<TData>> & Partial<ILifetime> & { options?: Component.ComponentOptions }) & ThisType<Instance<TData & BehaviorData, TCustom & BehaviorMthods>> interface Constructor { <TData extends DataOption, TCustom extends CustomOption, BehaviorData = {}, BehaviorMethods = {}>( options: Options<TData, TCustom, BehaviorData, BehaviorMethods> ): void } Page<TData, TOptions, BehaviorData, BehaviorMethods>({ behaviors: [behavior], ... })
暂时可以解决这个问题.
暂时可以解决这个问题, 希望官方能明确下用法或更新下类型库.
正在加载...
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
declare namespace WechatMiniprogram.Page { interface ILifetime { test():void; } } declare namespace WechatMiniprogram.Component { interface InstanceMethods<D extends DataOption> { test(): void; } }
可以尝试在类型声明中typings/index.d.ts进行声明类型扩展,应该会有用
2020年的问题,现在2024年了,有什么完美解法吗?
同求解……我每次都要 (this as any).test() ,但这样看起来很拉跨
只需要定义behavior的同时能自动导出对应的behavior类型,在page或者component的property/data/methods中定义一个空对象并强制类型为behavior对应的property/data/methods类型即可。
// 组件或者页面的定义文件 import listBehavior, { type ListBehavior } from '@/behaviors/listBehavior' type Item = { id: string; num: number } Component({ behaviors: [listBehavior], properties: { ...{} as ListBehavior<Item[]>['properties'], otherProp: { type: String, value: '0' } }, data: { ...{} as ListBehavior<Item[]>['data'], }, methods: { ...{} as ListBehavior<Item[]>['methods'], getList(page, pageSize) { return doReq('/getAllList', page, pageSize) } onPullDownRefresh() { // listBehavior['methods']中的refreshList this.refreshList() }, onReachBottom() { // listBehavior['methods']中的loadList this.loadList() } } })
// behaviors/listBehavior.ts import { useBehavior } from '@/utils/use' const { behaviorID, _optType, } = useBehavior({ data: { list: [], _page: 1, _pageSize: 10, }, methods: { loadList() { // 此处的getList是使用behavior的组件或者页面中定义的 this.getList(this.data._page, this.data._pageSize).then(res => { this.setData({ list: res }) }) }, refreshList() { this.setData({ _page: 1, list: [] }) this.loadList() } } }) export default behaviorID export type ListBehavior = typeof _optType
核心就在于定义behavior的同时能够导出一个能表示当前类型的变量_optType,_optType可以是没有任何实际作用的空对象{},它的作用就是能够通过 typeof 来实现自动导出behavior类型。
这个解决方案无任何副作用,校验完备,使用简便。
function useBehavior<TData extends WechatMiniprogram.Behavior.DataOption,
TProperty extends WechatMiniprogram.Behavior.PropertyOption,
TMethod extends WechatMiniprogram.Behavior.MethodOption,
TCustomInstanceProperty extends WechatMiniprogram.IAnyObject = Record<string, never>>(opt: Partial<WechatMiniprogram.Behavior.Data<TData>> &
Partial<WechatMiniprogram.Behavior.Property<TProperty>> &
Partial<WechatMiniprogram.Behavior.Method<TMethod>> &
Partial<WechatMiniprogram.Behavior.OtherOption> &
Partial<WechatMiniprogram.Behavior.Lifetimes> &
ThisType<WechatMiniprogram.Behavior.Instance<TData, TProperty, TMethod, TCustomInstanceProperty>>) {
const behaviorID = Behavior(opt)
return {
behaviorID,
_optType: {} as typeof opt,
}
}
export {
useBehavior
}
我修改了类型文件中 `WechatMiniprogram.Page.Constructor` 的和 `Options` 类型的定义. 添加了两个新的可选范型 `BehaviorData` 和 `BehaviorMethods`. 在使用 `Page` 的时候把相应的 behavior 的类型传进去.
type Options< TData extends DataOption, TCustom extends CustomOption, BehaviorData, BehaviorMthods > = (TCustom & Partial<Data<TData>> & Partial<ILifetime> & { options?: Component.ComponentOptions }) & ThisType<Instance<TData & BehaviorData, TCustom & BehaviorMthods>> interface Constructor { <TData extends DataOption, TCustom extends CustomOption, BehaviorData = {}, BehaviorMethods = {}>( options: Options<TData, TCustom, BehaviorData, BehaviorMethods> ): void } Page<TData, TOptions, BehaviorData, BehaviorMethods>({ behaviors: [behavior], ... })
暂时可以解决这个问题.
我修改了类型文件中 `WechatMiniprogram.Page.Constructor` 的和 `Options` 类型的定义. 添加了两个新的可选范型 `BehaviorData` 和 `BehaviorMethods`. 在使用 `Page` 的时候把相应的 behavior 的类型传进去.
type Options< TData extends DataOption, TCustom extends CustomOption, BehaviorData, BehaviorMthods > = (TCustom & Partial<Data<TData>> & Partial<ILifetime> & { options?: Component.ComponentOptions }) & ThisType<Instance<TData & BehaviorData, TCustom & BehaviorMthods>> interface Constructor { <TData extends DataOption, TCustom extends CustomOption, BehaviorData = {}, BehaviorMethods = {}>( options: Options<TData, TCustom, BehaviorData, BehaviorMethods> ): void } Page<TData, TOptions, BehaviorData, BehaviorMethods>({ behaviors: [behavior], ... })
暂时可以解决这个问题.
我修改了类型文件中 `WechatMiniprogram.Page.Constructor` 的和 `Options` 类型的定义. 添加了两个新的可选范型 `BehaviorData` 和 `BehaviorMethods`. 在使用 `Page` 的时候把相应的 behavior 的类型传进去.
type Options< TData extends DataOption, TCustom extends CustomOption, BehaviorData, BehaviorMthods > = (TCustom & Partial<Data<TData>> & Partial<ILifetime> & { options?: Component.ComponentOptions }) & ThisType<Instance<TData & BehaviorData, TCustom & BehaviorMthods>> interface Constructor { <TData extends DataOption, TCustom extends CustomOption, BehaviorData = {}, BehaviorMethods = {}>( options: Options<TData, TCustom, BehaviorData, BehaviorMethods> ): void } Page<TData, TOptions, BehaviorData, BehaviorMethods>({ behaviors: [behavior], ... })
暂时可以解决这个问题, 希望官方能明确下用法或更新下类型库.
我修改了类型文件中 `WechatMiniprogram.Page.Constructor` 的和 `Options` 类型的定义. 添加了两个新的可选范型 `BehaviorData` 和 `BehaviorMethods`. 在使用 `Page` 的时候把相应的 behavior 的类型传进去.
type Options< TData extends DataOption, TCustom extends CustomOption, BehaviorData, BehaviorMthods > = (TCustom & Partial<Data<TData>> & Partial<ILifetime> & { options?: Component.ComponentOptions }) & ThisType<Instance<TData & BehaviorData, TCustom & BehaviorMthods>> interface Constructor { <TData extends DataOption, TCustom extends CustomOption, BehaviorData = {}, BehaviorMethods = {}>( options: Options<TData, TCustom, BehaviorData, BehaviorMethods> ): void } Page<TData, TOptions, BehaviorData, BehaviorMethods>({ behaviors: [behavior], ... })
暂时可以解决这个问题, 希望官方能明确下用法或更新下类型库.
我修改了类型文件中 `WechatMiniprogram.Page.Constructor` 的和 `Options` 类型的定义. 添加了两个新的可选范型 `BehaviorData` 和 `BehaviorMethods`. 在使用 `Page` 的时候把相应的 behavior 的类型传进去.
type Options< TData extends DataOption, TCustom extends CustomOption, BehaviorData, BehaviorMthods > = (TCustom & Partial<Data<TData>> & Partial<ILifetime> & { options?: Component.ComponentOptions }) & ThisType<Instance<TData & BehaviorData, TCustom & BehaviorMthods>> interface Constructor { <TData extends DataOption, TCustom extends CustomOption, BehaviorData = {}, BehaviorMethods = {}>( options: Options<TData, TCustom, BehaviorData, BehaviorMethods> ): void } Page<TData, TOptions, BehaviorData, BehaviorMethods>({ behaviors: [behavior], ... })
暂时可以解决这个问题, 希望官方能明确下用法或更新下类型库.
我修改了类型文件中 `WechatMiniprogram.Page.Constructor` 的和 `Options` 类型的定义. 添加了两个新的可选范型 `BehaviorData` 和 `BehaviorMethods`. 在使用 `Page` 的时候把相应的 behavior 的类型传进去.
type Options< TData extends DataOption, TCustom extends CustomOption, BehaviorData, BehaviorMthods > = (TCustom & Partial<Data<TData>> & Partial<ILifetime> & { options?: Component.ComponentOptions }) & ThisType<Instance<TData & BehaviorData, TCustom & BehaviorMthods>> interface Constructor { <TData extends DataOption, TCustom extends CustomOption, BehaviorData = {}, BehaviorMethods = {}>( options: Options<TData, TCustom, BehaviorData, BehaviorMethods> ): void } Page<TData, TOptions, BehaviorData, BehaviorMethods>({ behaviors: [behavior], ... })
暂时可以解决这个问题, 希望官方能明确下用法或更新下类型库.