Comment se déplacer, la propriété n'existe pas sur 'Object'

Question

Je suis nouveau dans Dactylographe et je ne sais pas comment formuler cette question.

J'ai besoin d'accéder à deux propriétés "possibles" sur un objet qui est passé dans le constructeur. Je sais que je manque quelques vérifications pour voir si elles sont définies, mais Typescript me lance un message "La propriété n’existe pas sur" l’objet ". Le message apparaît sur le sélecteur et le modèle est renvoyé.

 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 {

   }   
}
 

Je suis sûr que c'est assez simple, mais le tapuscrit est nouveau pour moi.

Answer 1

Si vous utilisez l' any type, au lieu d' Object, vous pouvez accéder à toute propriété, sans les erreurs de compilation.

Cependant, je vous conseille de créer une interface qui marque les propriétés possibles de cet objet:

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

Étant donné que tous les champs de l'utilisation ?:, cela signifie qu'ils peuvent ou ne peuvent pas être là. Donc cela fonctionne:

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

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

Si quelque chose vient de javascript, vous pouvez faire quelque chose comme ceci:

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

Bien entendu, cette solution ne fonctionne que comme prévu si vous ne savez pas à propos de la présence d'une propriété qui n'est pas de ce genre.

Answer 2

Si vous ne souhaitez pas modifier le type ou créer une interface, vous pouvez également utiliser cette syntaxe pour accéder à des propriétés inconnues:

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

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