Question

我正在尝试为我在此继承的自定义构建模块规范编写类型定义。无法弄清楚。诀窍是函数中计算上下文中的 this 上下文应该从属性驱动，以便 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;

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

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类型适应此视图模型结构是一种很好的学习经验。

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

1 个答案: