typescript :polymorhpic this,重载签名与函数实现不兼容

标签 typescript

谁能解释为什么这不起作用:

abstract class Model {
    static deserialize<T extends Model>(this: ( new() => T ), object: any): T;
    static deserialize<T extends Model>(ctor: ( new() => T ), object: any): T {
        return new ctor();
    }

    static deserializeArray<T extends Model>(this: ( new() => T ), ...objects: any[]): T[];
    static deserializeArray<T extends Model>(ctor: ( new() => T ), ...objects: any[]): T[] {
        return objects.map(object => Model.deserialize(ctor, object));
    }
}

class MyModel extends Model { }

这将允许:

let myModel = MyModel.deserialize({});
let myModels = MyModel.deserializeArray({}, {}, {});

let myModel = Model.deserialize(MyModel, {});
let myModels = Model.deserializeArray(MyModel, {}, {}, {});

Typescript 2.5.2 提示“重载签名与函数实现不兼容”。

为什么需要两种形式?

考虑一个返回序列化 (json) 模型的 REST API:

class MyModelController {
    get(id: number) {
        let myModel = ... some db/service call ...
        return myModel.serialize();
    }
}

然后是通用服务(角度)来请求模型:

@Injectable()
abstract class HttpService {
    constructor(private http: Http) { }

    errorHandler(response) {
        ...
    }

    get<T extends Model>(ModelType: ( new() => T ), endpoint: string): Observable<T> {
        return this.http.get(endpoint)
            // we can't call ModelType.deserialize() here...
            .map(response => Model.deserialize(ModelType, response.json()))
            .catch(response => this.errorHandler(response));
    }
}

@Injectable()
class MyModelService extends HttpService {
    get(id: number) {
       return super.get(MyModel, `/api/models/${id}`);
    }
}

解决方案

abstract class Model {
    static deserialize<T extends Model>(this: ( new() => T), object: {}): T;
    static deserialize<T extends Model>(this: Function & { prototype: Model }, ctor: ( new() => T ), object: {});
    static deserialize<T extends Model>(this: ( new() => T), first: ( new() => T ) | {}, second?: any) {
        return typeof first === "function" ? new first() : new this(); 
    }

    static deserializeArray<T extends Model>(this: ( new() => T), ...objects: {}[]): T[];
    static deserializeArray<T extends Model>(this: Function & { prototype: Model }, ctor: ( new() => T ), ...objects: {}[]): T[];
    static deserializeArray<T extends Model>(this: ( new() => T), first: ( new() => T ) | {}[], second?: {}[]): T[] {
        const ctor = typeof first === "function" ? first : this;
        const objects = typeof first === "function" ? second : first;
        return objects.map(object => Model.deserialize(ctor, object));
    }
}

这允许两种形式同时保留抽象

最佳答案

在我看来,没有必要同时拥有:

let myModel1 = MyModel.deserialize({});
let myModel2 = Model.deserialize(MyModel, {});

第一种形式就足够了,可读性更强,然后代码将如下所示:

type ModelCtor<T extends Model> = {
    new(): T;
    deserialize<T extends Model>(object: any): T;
    deserializeArray<T extends Model>(...objects: any[]): T[];
};

abstract class Model {
    static deserialize<T extends Model>(this: ModelCtor<T>, object: any): T {
        return new this();
    }

    static deserializeArray<T extends Model>(this: ModelCtor<T>, ...objects: any[]): T[] {
        return objects.map(object => this.deserialize(object));
    }
}

class MyModel extends Model { }

let myModel = MyModel.deserialize({});
let myModels = MyModel.deserializeArray({}, {}, {});

( code in playground )

但是,如果出于某种超出我理解的原因你确实想要两种形式,那么你可以这样做:

type ModelCtor<T extends Model> = {
    new(): T;
    deserialize<T extends Model>(object: any): T;
    deserialize<T extends Model>(ctor: ModelCtor<T>, object: any): T;

    deserializeArray<T extends Model>(...objects: any[]): T[];
    deserializeArray<T extends Model>(ctor: ModelCtor<T>, ...objects: any[]): T[];
};

class Model {
    static deserialize<T extends Model>(this: ModelCtor<T>, object: any): T;
    static deserialize<T extends Model, S extends Model>(this: ModelCtor<T>, ctor: ModelCtor<S>, object: any): S;
    static deserialize<T extends Model, S extends Model>(this: ModelCtor<T>, first: ModelCtor<S> | any, second?: any): S {
        return second === undefined ? new this() : new first();
    }

    static deserializeArray<T extends Model>(this: ModelCtor<T>, ...objects: any[]): T[];
    static deserializeArray<T extends Model, S extends Model>(this: ModelCtor<T>, ctor: ModelCtor<S>, ...objects: any[]): S[];
    static deserializeArray<T extends Model, S extends Model>(this: ModelCtor<T>, ...objects: any[]): S[] {
        const ctor: ModelCtor<S> = typeof objects[0] === "function" ? objects[0] : this as any;
        return objects.map(object => ctor.deserialize(ctor, object));
    }
}

class MyModel extends Model { }

let myModel1 = MyModel.deserialize({});
let myModels1 = MyModel.deserializeArray({}, {}, {});

let myModel2 = Model.deserialize(MyModel, {});
let myModels2 = Model.deserializeArray(MyModel, {}, {}, {});

( code in playground )

代码更加编译(我认为没有充分的理由)。
另外,我必须从 Model 中删除 abstract 部分,否则会出现此错误:

The 'this' context of type 'typeof Model' is not assignable to method's 'this' of type 'ModelCtor'.
Cannot assign an abstract constructor type to a non-abstract constructor type.

对于这两行:

let myModel2 = Model.deserialize(MyModel, {});
let myModels2 = Model.deserializeArray(MyModel, {}, {}, {});

也许您可以多尝试一下,并在不删除 abstract 的情况下修复这些错误。

关于 typescript :polymorhpic this,重载签名与函数实现不兼容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46229367/

相关文章:

angular - 无法在 Jasmine 和 Karma 中使用 .ts 文件。获取错误 'Unable to determine file type..'

javascript - 如何延迟在 [(ngModel)] 中获取数据?

reactjs - 如何测试 React Chrome 扩展?

java - java 中的函数式编程和有用的编译器错误

javascript - 从模块导出的变量在 Angular 类的函数内部无法访问

angular - onBlur 和 onSubmit 上的 NgModel 更新

javascript - 如何在 Angular 4 中使用 socket.io-client

angular - 如何将用户引导至页面的特定部分?

javascript - Angular 应用程序中的 Angular 元素在优化时会产生无限重新加载问题

Angular-Material Sidenav cdkScrollable