代码之家  ›  专栏  ›  技术社区  ›  Michael Wilson

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

  •  3
  • Michael Wilson  · 技术社区  · 6 年前

    我正在尝试为我在这里继承的自定义构建模块规范编写类型定义。无法理解。诀窍在于 计算上下文中的上下文 功能 应驱动自 属性 因此 应该是Valuea 驱动自 凯亚

    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”

    1 回复  |  直到 6 年前
        1
  •  1
  •   Michael Wilson    5 年前

    我不确定这是否会对其他人有所帮助,但@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类型与此viewmodel结构相适应是一种很好的学习体验。