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.
The "Property does not exist on type String" error occurs when we try to access a property that does not exist on the string type. To solve the error, use an object instead of a string, or make sure you're accessing a valid built-in method on the string.
The "Property does not exist on type void" error occurs when we try to access a property on the return value of a function that doesn't return anything. To solve the error, make sure to return the correct value from all of the function's code paths.
To fix the error "TS2339: Property 'x' does not exist on type 'Y'" with TypeScript, we should make sure the properties are listed in the interface that's set as the type of the object. interface Images { main: string; [key: string]: string; } const getMainImageUrl = (images: Images): string => { return images. main; };
The error "Property does not exist on type 'never'" occurs when we forget to type a state array or don't type the return value of the useRef hook. To solve the error, use a generic to explicitly type the state array or the ref value in your React application.
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"]; }
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With