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类型。

这个解决方案无任何副作用，校验完备，使用简便。

我修改了类型文件中 `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],
  ...
})

暂时可以解决这个问题.

我支持楼上不用behavior，而是自己手动展开。behavior这个是普通Object，随意发挥了。

封装一个use方法

export function useSmsBehavior(data: TData){
  const smsBehavior = Behavior({
    data: {
      useName: "",
    },
    methods: {
      test(){
        ...
      }
    },
    ...
  });
  return {
    data: data as TData & {
      // add data in behavior
      useName: string;
    },
    smsBehavior,
  };
}

使用Behavior

const {smsBehavior, data} = useSmsBehavior({money: 100});

Component({
  behaviors: [smsBehavior],
  properties: {},
  data,
  method: {
    getMoney(){
      console.log(this.data.money, this.data.userName);
      this.test();
    }
  }
}

方法

declare namespace WechatMiniprogram.Page {
  interface ILifetime {
    test():void;
  }
}
declare namespace WechatMiniprogram.Component {
  interface InstanceMethods {
    test(): void;
  }
}

方法的处理可能会污染没有使用behavior的页面。如果不怕麻烦也可以把properties、methods丢进use方法里处理一下。

遇到同样的问题，我的解决方案是弃用了behavior这个功能，将data跟methods封装起来，在Page/Component函数被调用时再添加进去...为了语法上的声明，选择了不用behavior，有点无奈。

// funcs/test.ts
export const testData = {
  test:  ''
}
export const testMethods = {
  // 但是函数内如果要使用this，就要对this再加上声明
  test (this: WechatMiniprogram.Page.Instance<typeof testData, {}>) {
    // do something
    this.setData({
      test: 'hello world'
    })
  }
}

// components/x/x.ts
import { testData, testMethods } from 'path/to/funcs/test'
Component({
  data: {
    ...testData,
    // other component data
  },
  methods: {
    ...testMethods,
    // other component methods
  }
})

// pages/x/x.ts
import { testData, testMethods } from 'path/to/funcs/test'
Page({
  ...testMethods,
  data: {
    ...testData,
    // other page data
  },
  // other page methods
})

最后怎么解决的？？

这个恐怕无解。

behavior是通过一个识别符在运行时嵌入的， 然后这个identifier是个string。Typescript的类型推断不可能从这个string里推导出你需要的类型。

能想到的唯一办法就是你自己写一个新的类Component的函数，把behavior的类型作为generic parameter传进去，然后用它来调用原来的Component的并更改相应的类型参数。

还是不够雅致，但这个behavior就是这样设计的。。。

如果不是通过string而是通过object嵌入，或者全部是类React Hooks的函数式编程好多类型推导会方便很多。