title: How do I pass dynamic keys into a object described by an interface?
body: <p>I have a fairly straight forward json object, that has two distinct keys "checked" and "unchecked".</p>
  
  <pre><code>{
    "checked" : {
      "trClass": ",
      "text": "Select all",
      "icon": "fa fa-square-o"
    },
    "unchecked": {
      "trClass": "success",
      "text": "Deselect all",
      "icon": "fa fa-check-square"
    }
  }
  </code></pre>
  
  <p>I have described this object as follows: </p>
  
  <pre><code>interface CheckProps {
    trClass: string;
    test: string;
    icon: string;
  }
  interface CheckJson {
    checked: CheckProps;
    unchecked: CheckProps;
  }
  </code></pre>
  
  <p>Now, in my code the key "checked" or "unchecked" will be passed in dynamically, and I keep getting a <strong>"implicit has any type"</strong> error. the $button element has a data attribute called "state" that will either be 'checked' or 'unchecked' so it will be a valid selector, but how do I tell TypeScript this?</p>
  
  <p>Here is the code in question: </p>
  
  <pre><code>function toggleAllCheckableRows(e: JQueryEventObject){
    const $button: JQuery = $(e.target);
    const json: CheckJson = $button.data('json');
    const state: string = $button.data('state');
    const oppositeSelector: string = $button.data('state') === 'checked' ? 'unchecked' : 'checked';
  
    const currentState = json[state]; //Elementy immplicity has 'any' type because type 'CheckJson' has no index signature
    const oppositeState = json[oppositeSelector]; //Elementy immplicity has 'any' type because type 'CheckJson' has no index signature
  }
  </code></pre>