Как правильно описать объект в модели на TypeScript?

Question

[faleaksey]

Всем привет! только начал изучение TypeScript и при описании типов используемых в модели вылетатет ошибка, а именно "Object literal may only specify known properties, and 'value' does not exist in type '{ [key: number]: any; }'"...
как правильно установить тип объекту _total и внутренним его значениям?

export default class Model {

    _total: { [key: number]: any } = {};

    constructor() {
        super();
        this._total= {
            value: 1,
            btn: {
                add: true,
                rem: false
            }
        };
    }
}

Answer 1

[Владимир Проскурин]

Ну так у вас ключ _total это не number, это string
_total: { [key: string]: any } = {};
UPD: вот тут описано про сигнатуру индексов https://basarat.gitbooks.io/typescript/docs/types/...

Comments

[faleaksey]

Владимир Проскурин , не совсем понятно. почему в данном контексте _total задаётся тип string, при том что в конструкторе он имеет форму объекта?

[Владимир Проскурин]

faleaksey, вот это описание
{ [key: string]: any }
описывает тип вашего объекта _total. В квадратных скобках описывается тип индексации, в данном случае мы пишем, что его тип будет строкой. В массивах ставится number, в объектах обычно string.
Далее any, это уже тип значения свойств объекта.

[faleaksey]

Владимир Проскурин, понятно, а как быть со значениями внутри свойств:

this._total= {
            value: 1,
            btn: {
                add: true,
                rem: false
            }
        };

если value нужно определить как number, а btn.add & btn.rem как boolean ?

[Владимир Проскурин]

faleaksey, следует описать типы ваших полей. Например btn

interface Button {
  add: Boolean;
  rem: Boolean;
}

а для значения объекта _total

interface TotalValue {
  value: Number;
  btn: Button;
}

и теперь можно не использовать эту страшную сигнатуру с key: string, а просто прописать
_total: TotalValue;
итого

interface Button {
  add: Boolean;
  rem: Boolean;
}
interface TotalValue {
  value: Number;
  btn: Button;
}
export default class Model {
    _total: TotalValue;

    constructor() {
       
        this._total= {
            value: 1,
            btn: {
                add: true,
                rem: false
            }
        };
    }
}

[Владимир Проскурин]

faleaksey, также сделайте себе за правило, старайтесь редко использовать any, всегда определяйте подробно тип, иначе теряется весь смысл TypeScript.

[faleaksey]

Владимир Проскурин, как раз и хотел от него уйти) спасибо за ответ!

Answer 2

[eRKa]

export default class Model {
    _total: { [key: string]: any } = {};

    constructor() {
        super();
        this._total['value'] = 1;
        this._total['btn'] = {
                add: true,
                rem: false
        };
    }
}

Если все будете превращать в any, то толку от typescript не будет. Поэтому лучше типизируйте свои свойства как то так

class Total {
    value: number,
    btn: {
        add: boolean,
        rem: boolean
    }
};

export default class Model {
    _total: Total;

    constructor() {
        super();
        this._total= new Total {
            value: 1,
            btn: {
                add: true,
                rem: false
            }
        };
    }
}