自定义模块模式的 TypeScript 类型定义

Question

我正在尝试为我在这里继承的自定义构建模块规范编写类型定义。想不通。诀窍在于 函数 中的计算上下文中的 this 上下文应该由 properties 驱动，这样 shouldBeValueA 是从 keyA 驱动。

define.model("moduleName",
[
    "jquery"
],
function($) {
    return this.viewModel({
        pub: {
            properties: {
                keyA: "valueA"
            },
            functions: {
                keyB: this.computed(function() {
                    var shouldBeValueA = this.keyA;
                })
            }
        }
    })
})

目前我得到的最佳定义:

interface Define {
model: (
    name: string,
    dependencies: string[],
    moduleContext: <T>(this: {
        computed: (context: (this: T) => any) => KnockoutComputed<any>,
        viewModel: (options: {
            pub: {
                properties: T,
                functions: any
            },
        }) => any;
    },
    ...args) => void) => void;
}

declare var define: Define;

但是这个错误:“属性 keyA 在类型 T 上不存在”

Answer 1

我不确定这是否对其他人有帮助，但@kingdaro 是正确的，这种模式与 vue.js API 非常相似。我最终构建了受该模式启发的类型定义。

interface RequireDefine {
    model<TPubProps, TPubFuncs, TPrivProps, TPrivFuncs>(
        name: string,
        deps: string[],
        factory: (
            this: {
                viewModel<TPubProps, TPubFuncs, TPrivProps, TPrivFuncs>(
                    options: ThisTypedViewModelOptions<TPubProps, TPubFuncs, TPrivProps, TPrivFuncs>
                ): TPubProps & TPubFuncs
    ): any
}

type ThisTypedViewModelOptions<TPubProps, TPubFuncs, TPrivProps, TPrivFuncs> =
    object
    & ViewModelOptions<TPubProps, TPubFuncs, TPrivProps, TPrivFuncs>
    & ThisType<CombinedViewModelInstance<TPubProps, TPubFuncs, TPrivProps, TPrivFuncs>>

type CombinedViewModelInstance<TPubProps, TPubFuncs, TPrivProps, TPrivFuncs> = TPubProps & TPubFuncs & { priv: () => TPrivProps & TPrivFuncs }    

type DefaultMethods = { [key: string]: (...args: any[]) => any };

interface ViewModelOptions<
    TPubProps = object,
    TPubFuncs = DefaultMethods,
    TPrivProps = object,
    TPrivFuncs = DefaultMethods
    > {

    ctor?: (options?: any) => void,
    pub?: {
        properties?: TPubProps,
        functions?: TPubFuncs
    },
    priv?: {
        properties?: TPrivProps,
        functions?: TPrivFuncs
    }
}

它仍然不完全完美，但是将 vue 类型适应这种 View 模型结构是一个很好的学习经验。