Properly Typing Map Subproperties

CanJS
1

I had the following issue:

I have following viewModel for a component

export const ViewModel = Map.extend({
  define: {
    props: {
      type: '*',
      value: {
          isActive: true,
          schedulingOn: false,
          externalOn: false,
          streamingOn: false
      }
    }
  },
});

which has boolean values

but when I view in devTools they are strings

 $('advanced-tab').viewModel().attr('props')
Map {_data: Object, _cid: ".map1141", _computedAttrs: Object, isActive: "true", schedulingOn: "false"…}
__bindEvents: Object_bindings: 11
_bubbleBindings: Object
_cid: ".map1141"
_computedAttrs: Object
_data: Object
externalOn: "false"
isActive: "true"
schedulingOn: "false"
streamingOn: "false"
__proto__: can.Construct

Michael Price @web-mech provided the following solution:

try refactoring your view model to look like this

export const ViewModel = Map.extend({
  define: {
    props: {
      Type: Map.extend({
        define: {
          isActive: {
            type: 'boolean',
            value: true
          },
          schedulingOn: {
            type: 'boolean',
            value: false
          },
          externalOn: {
            type: 'boolean',
            value: false
          },
          streamingOn: {
            type: 'boolean',
            value: false
          } 
        }
      }),
      value: Object
    }
  }
});

well, this essentially turns props into a can map, which has defined types. So your boolean flags will be coerced into booleans instead of strings, so your viewmodel still has a props property, its just well defined now with types.

So there you have it, the way to properly type subproperties. I hope this helps others with a similar issue.