@property type of abstract class issues in 3.x version which work fine in 2.x

Cocos Creator
#1

so back to the 2.x version i have these code:

enum TargetColliderType
{
    GROUP,
    NODE,
    BOTH
}


@ccclass('ATargetCollider')
abstract class ATargetCollider
{
    abstract get target(): any[]; 
    abstract set target(value: any[]);
}

@ccclass('GroupTargetsCollider')
class GroupTargetsCollider extends ATargetCollider
{
    @property([cc.Integer])
    _target: number[] = []

    @property(
        {
            type: [cc.Integer],
            override: true,
            //group: 
            //{
            //    id: "0",
            //    name: "Condition",
            //    displayOrder: 0
            //}
        }
    )
    get target(): number[] { return this._target }
    set target(value: number[]) 
    {
        this._target = value;
    }
    
}

@ccclass('NodeTargetsCollider')
class NodeTargetsCollider extends ATargetCollider
{
    @property([cc.Node])
    _target: cc.Node[] = []

    @property(
        {
            type: [cc.Node],
            override: true,
            //group: 
            //{
            //    id: "0",
            //    name: "Condition",
            //    displayOrder: 0
            //}
        }
    )
    get target(): cc.Node[] { return this._target }
    set target(value: cc.Node[]) 
    {
        this._target = value;
    }

}

@ccclass('BothTargetColliderHelper')
class BothTargetColliderHelper
{
    @property([cc.Node])
    nodes: cc.Node[] = []

    @property([cc.Integer])
    groups: number[] = []
}

@ccclass('BothTargetCollider')
class BothTargetCollider extends ATargetCollider
{
    @property([BothTargetColliderHelper])
    _target: BothTargetColliderHelper[] = []

    @property(
        {
            type: [BothTargetColliderHelper],
            //group: 
            //{
            //    id: "0",
            //    name: "Condition",
            //    displayOrder: 0
            //}
        }
    )
    get target(): BothTargetColliderHelper[] { return this._target }
    set target(value: BothTargetColliderHelper[]) {
        this._target = value;
    }

}
@ccclass
export class TestLLL extends cc.Component {
    @property({type: cc.Enum(TargetColliderType)})
    _type: TargetColliderType = TargetColliderType.GROUP;

    @property(
        {
            type: TargetColliderType,
        }
    )
    get type(): TargetColliderType { return this._type }
    set type(data: TargetColliderType)
    {
        if(data === this._type) return;
        this._type = data;

        switch(data)
        {
            case TargetColliderType.GROUP:
                this.target = null;
                this.target = new GroupTargetsCollider();
                break;
            case TargetColliderType.NODE:
                this.target = null;
                this.target = new NodeTargetsCollider();
                break;
            case TargetColliderType.BOTH:
                this.target = null;
                this.target = new BothTargetCollider();
                break;
        }
    }

    @property(
        {
            type: ATargetCollider,
            visible() {
                return !!this.target
            }
        }
    )
    target: ATargetCollider = new GroupTargetsCollider();
}

These code will help me a lot on switching option:
it can switch from this:
image
to this:
image

Then i do the same thing on 3.x

enum TargetColliderType
{
    GROUP,
    NODE,
    BOTH
}
cc.Enum(TargetColliderType)

@ccclass('ATargetCollider')
abstract class ATargetCollider
{
    abstract get target(): any[]; 
    abstract set target(value: any[]);
}

@ccclass('GroupTargetsCollider')
class GroupTargetsCollider extends ATargetCollider
{
    @type([cc.PhysicsGroup])
    _target: cc.PhysicsGroup[] = []

    @property(
        {
            type: [cc.PhysicsGroup],
            override: true,
            //group: 
            //{
            //    id: "0",
            //    name: "Condition",
            //    displayOrder: 0
            //}
        }
    )
    get target(): cc.PhysicsGroup[] { return this._target }
    set target(value: cc.PhysicsGroup[]) 
    {
        this._target = value;
    }
    
}

@ccclass('NodeTargetsCollider')
class NodeTargetsCollider extends ATargetCollider
{
    @type([cc.Node])
    _target: cc.Node[] = []

    @property(
        {
            type: [cc.Node],
            override: true,
            //group: 
            //{
            //    id: "0",
            //    name: "Condition",
            //    displayOrder: 0
            //}
        }
    )
    get target(): cc.Node[] { return this._target }
    set target(value: cc.Node[]) 
    {
        this._target = value;
    }

}

@ccclass('BothTargetColliderHelper')
class BothTargetColliderHelper
{
    @type([cc.Node])
    nodes: cc.Node[] = []

    @type([cc.PhysicsGroup])
    groups: cc.PhysicsGroup[] = []
}

@ccclass('BothTargetCollider')
class BothTargetCollider extends ATargetCollider
{
    @type([BothTargetColliderHelper])
    _target: BothTargetColliderHelper[] = []

    @property(
        {
            type: [BothTargetColliderHelper],
            //group: 
            //{
            //    id: "0",
            //    name: "Condition",
            //    displayOrder: 0
            //}
        }
    )
    get target(): BothTargetColliderHelper[] { return this._target }
    set target(value: BothTargetColliderHelper[]) {
        this._target = value;
    }

}

@ccclass('ColliderEvents')
export class ColliderEvents extends ACollider
{
    @type(TargetColliderType)
    _type: TargetColliderType = TargetColliderType.GROUP;

    @property(
        {
            type: TargetColliderType,
        }
    )
    get type(): TargetColliderType { return this._type }
    set type(data: TargetColliderType)
    {
        if(data === this._type) return;
        this._type = data;

        switch(data)
        {
            case TargetColliderType.GROUP:
                this.target = null;
                this.target = new GroupTargetsCollider();
                break;
            case TargetColliderType.NODE:
                this.target = null;
                this.target = new NodeTargetsCollider();
                break;
            case TargetColliderType.BOTH:
                this.target = null;
                this.target = new BothTargetCollider();
                break;
        }
    }

    @property(
        {
            type: ATargetCollider,
            visible() {
                return !!this.target
            }
        }
    )
    target: ATargetCollider = new GroupTargetsCollider();

    protected pre_exception() { console.log(this.target)  }

    on_collision_enter(self: cc.Collider2D, other: cc.Collider2D, contact: cc.IPhysics2DContact) 
    {

    }

    end_collision(self: cc.Collider2D, other: cc.Collider2D, contact: cc.IPhysics2DContact) 
    {

    }
}

nothing show up
image

so can anyone please help me on this :frowning: I just dont know why and how to fix this

#2

Editor 3.x has changed the way the script is parsed, so it does not work properly.
You can try to use different variables to represent different types of targets in this way.