Come aggirare la proprietà non esiste su "Oggetto"

Question

Sono nuovo di dattiloscritto e non sono sicuro di come formulare questa domanda.

Ho bisogno di accedere a due proprietà "possibili" su un oggetto che viene passato nel costruttore. So che mi mancano alcuni controlli per vedere se sono definiti, ma Typescript mi ​​sta lanciando un messaggio "La proprietà non esiste sul" Oggetto "". Il messaggio viene visualizzato sui selettori selettore e modello.

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 { 

    } 
} 

Sono sicuro che è abbastanza semplice, ma Typescript è nuovo per me.

Answer 1

Se si utilizza il tipo any anziché Object, è possibile accedere a qualsiasi proprietà senza errori di compilazione.

Tuttavia, vorrei consigliare di creare un'interfaccia che segna le possibili proprietà per quell'oggetto:

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

Dal momento che tutti i campi usano ?:, vuol dire che potrebbe o non potrebbe essere lì. Quindi, questo funziona:

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

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

Se qualcosa viene da javascript, si può fare qualcosa di simile:

import isObject from 'lodash/isObject' 

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

doStuff(myOptions) // this works now 

Naturalmente questa soluzione funziona solo come previsto se non siete sicuri solo circa la presenza di una proprietà non del suo tipo

Answer 2

Se non si desidera modificare il tipo o creare un'interfaccia, è anche possibile utilizzare questa sintassi per accedere alle proprietà sconosciute:

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

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