gpt4 book ai didi

typescript 多重继承

转载 作者:搜寻专家 更新时间:2023-10-30 20:32:35 25 4
gpt4 key购买 nike

我需要在 typescript 中进行多重继承。从逻辑上讲,将很多功能放在层次结构中是不好的。我有一个基类和多个层次结构分支。但是我需要以某种方式使用混合将一些主要逻辑放在单独的类中,因为它并不是在每个分支中都使用。

更新代码示例:

function Mixin = function(mixins:any[]){ // mixin decorator
return function(target){
mixins.forEach((mixin) => {
add every function from mixing to target prototype,
if functions with same name does not exists there,
so we are able to do calls to as example different render() functions

Will show it in OpenableItem
});
}
}

function element = function(){
return function(target){
target.prototype.element = function(){
return this.$el;
}
}
}
--------------------------------------------------------------------------------------
@element // every item will have this function as Root as Openable
class BaseItem{
y() => number; // we need to get y position of every item
}
OpenableMixin{
render() => render arrow only
open(){} => change arrow position and cause menu to fire change event
close(){} => change arrow position and cause menu to fire change event
}
class ItemsMixin extends OpenableMixing{// for now if item have childs it must be openable,
// but Responsive has only tasks and must be openable too
addItem(item: BaseItem) // need to add generics
removeItem(item: BaseItem)
}
--------------------------------------------------------------------------------------
@Mixin([ItemsMixin, ActivitiesMixin]) // it can have items and activities
class OpenableItem extends BaseItem implement ItemsMixin, ActivitiesMixin { // as in typescript docs
render(){
// call rendering from BaseItem class
super.render();
// call rendering from OpenableMixing
OpenableMixin.prototype.render.call(this);
// do some separate rendering for OpenableItem only
this.$el.append('line');
}
}

@Mixin([ItemsMixin]) // it can have items
class RootItem extends BaseItem implement ItemsMixin{ // and subitems functionality is only for Root class
subitems: Array<BaseItem> // need to add generics to be able to put here different item types
}
--------------------------------------------------------------------------------------
@element
class Menu{
items: Array<Item>
}

@element
class Timeline{
menu: Menu
listAllelement() => {
console.log(this.element());
console.log(this.menu.element());
this.menu.items.forEach((item) => {
console.log(item.element());
if(item.hasChilds()){ // really it must be (item instanceof RootItem || item instanceof OpenableItem)
item.items.forEach((subitem) => { // really we need some recursion here
console.log(subitem.element());
})
}
})
}
}

在现实中,需要实现多重继承的情况很少见,而且在 javascript 中出现这样的问题的情况也很少见。但是每个项目都可以根据需要具有不同的功能。

试想一下,可以有不同的项目可以有多个混入。将所有东西都放入 base 是否明智?你对这个问题的态度是什么?

最佳答案

TypeScript 2.2 添加了对 ECMAscript 2017 mixin pattern 的支持

这是一个完整的代码示例:

// http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/
// https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#support-for-mix-in-classes

type Constructor<T> = new (...args: any[]) => T;

class S {
foo() {
console.log('foo from S');
}
}

// Here the possible SuperClass is set to {} (Object)
function Mixin1<T extends Constructor<{}>>(SuperClass: T) {
return class extends SuperClass {
foo() {
console.log('foo from Mixin1');
if (super.foo) super.foo();
}
};
}

// Here the possible SuperClass (S) is specified
function Mixin2<T extends Constructor<S>>(SuperClass: T) {
return class extends SuperClass {
foo() {
console.log('foo from Mixin2');
super.foo();
}
};
}

class C extends Mixin1(Mixin2(S)) {
foo() {
console.log('foo from C');
super.foo();
}
}

new C().foo();

这个输出:

foo from C
foo from Mixin1
foo from Mixin2
foo from S

关于 typescript 多重继承,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40807808/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com