用ts实现一个属性类

最近一直在用angular，angular的设计理念是面向对象的，每个功能都封装在class里面，跟java的思想差不多。
最近遇到这样一个需求：
用openlayer画一个点，点的属性（比如颜色color、大小size等）要对应做一个仪表盘来管理。
功能倒是不复杂，我们可以很快写出这个Point类来：

class Point{
    color:string;
    size:string;
    constructor(color:string,size:string){
        this.color = color;
        this.size = size;
    }
}

不过好景不长，项目经理后来增加了需求：
点的属性需要分组管理，并且可以排序。
比如color要分到“外观”这个组里，这样我们在定义颜色属性时，就不能单单只考虑key和value了，还要增加所属分组group这个属性；如果要排序，还要增加排序order这个属性。
那，这又该如何设计Point类呢？
我们可以将属性单独设计一个类，比如叫CssProp吧，这个类会放group和order这样的一些额外属性，然后我们在Point中声明color属性时，就需指定CssProp这个类型。

interface Params {
    id: number;
    name: string;
    group: string;
}

class Base {
    id: number;
    name: string;
    group: string;
    constructor(params: Params) {
        this.id = params.id;
        this.name = params.name;
        this.group = params.group;
    }
}


class CssProp extends Base {
    title: string;
    private _value: string;

    constructor(params: Params, title: string) {

        super(params);

        this.title = title;
    }
    public get value() {
        console.log('get ok');
        return this._value;
    }
    public set value(v) {
        console.log('set ok');
        this._value = v;
    }


}

class Point {

    color: CssProp = new CssProp({ id: 1, name: 'backgroud-color', group: '外观' }, '颜色');

    constructor() {
        this.color.value = '#ff0000';
    }
}

var p = new Point();
console.log(p.color);
/*
set ok
CssProp {
  id: 1,
  name: 'backgroud-color',
  group: '外观',
  title: '颜色',
  _value: '#ff0000'
}
*/