How to get around property does not exist on 'Object'

ObjectTypescript

Object Problem Overview


I'm new to Typescript, and not sure how to word this question.

I need to access two "possible" properties on an object that is passed in the constructor. I know im missing some checks to see if they are defined, but Typescript is throwing me a "Property does not exist on 'Object'" message. The message appears on the selector and template returns.

class View {
    public options:Object = {};
   
   constructor(options:Object) {
       this.options = options;
   }
   
   selector ():string {
	   return this.options.selector;
   }   

   template ():string {
	   return this.options.template;
   }   
   
   render ():void {
	   
   }   
}

I'm sure its fairly simple, but Typescript is new to me.

Object Solutions


Solution 1 - Object

If you use the any type instead of Object, you can access any property without compile errors.

However, I would advise to create an interface that marks the possible properties for that object:

interface Options {
  selector?: string
  template?: string
}

Since all of the fields use ?:, it means that they might or might not be there. So this works:

function doStuff(o: Options) {
  //...
}

doStuff({}) // empty object
doStuff({ selector: "foo" }) // just one of the possible properties
doStuff({ selector: "foo", template: "bar" }) // all props

If something comes from javascript, you can do something like this:

import isObject from 'lodash/isObject'

const myOptions: Options = isObject(somethingFromJS) // if an object
    ? (somethingFromJS as Options) // cast it
    : {} // else create an empty object

doStuff(myOptions) // this works now

Of course this solution only works as expected if you are only unsure about the presence of a property not of it's type.

Solution 2 - Object

If you don't want to change the type or create an interface, you can also use this syntax to access unknown properties:

selector ():string {
    return this.options["selector"];
}   

template ():string {
    return this.options["template"];
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionEric HarmsView Question on Stackoverflow
Solution 1 - ObjectBalázs ÉdesView Answer on Stackoverflow
Solution 2 - ObjectJohn MontgomeryView Answer on Stackoverflow