title: Creating Angular/Typescript Interface for parsing Alpha Vantage API JSON return values
body: <p>I'm creating a project in Angular that uses the Alpha Vantage API to look up stock prices and display historical stock data in a graph, but I'm having trouble creating an interface to store the JSON string that I get back from the API call. I'm aware that I could just call <code>JSON.parse()</code>, but since it's a best practice to cast returns from Angular's <code>HttpClient</code> into a template for easy access (instead of manually parsing the object returned from <code>JSON.parse()</code>, I'd like to figure this out.</p>
  
  <p>So the issue is that the JSON string that is returned from the API call (any of the TIME_SERIES_X calls, to be specific) has variable property names for basically everything after the MetaData. See sample below:</p>
  
  <pre><code>{
      "Meta Data": {
          "1. Information": "Intraday (5min) open, high, low, close prices and volume",
          "2. Symbol": "AAPL",
          "3. Last Refreshed": "2019-09-27 16:00:00",
          "4. Interval": "5min",
          "5. Output Size": "Compact",
          "6. Time Zone": "US/Eastern"
      },
      "Time Series (5min)": {
          "2019-09-27 16:00:00": {
              "1. open": "218.6500",
              "2. high": "218.9300",
              "3. low": "218.3700",
              "4. close": "218.8500",
              "5. volume": "630543"
          },
          "2019-09-27 15:55:00": {
              "1. open": "218.8100",
              "2. high": "218.9200",
              "3. low": "218.6200",
              "4. close": "218.6600",
              "5. volume": "545536"
          },
          "2019-09-27 15:50:00": {
              "1. open": "218.7100",
              "2. high": "218.8400",
              "3. low": "218.5800",
              "4. close": "218.8200",
              "5. volume": "260471"
          }
      }
  }
  </code></pre>
  
  <p>Both <code>"Time Series (5min)"</code> and all of the timestamps vary depending on the timing of the API call and the parameters you give it (more info on Alpha Vantage API <a href="https://www.alphavantage.co/documentation/" rel="nofollow noreferrer">here</a>).</p>
  
  <p>So, here's what I have so far. Because the <code>TIME_SERIES_INTRADAY</code> function has a different metadata structure than the others, I separated it out and use a union type for the metadata section of the <code>TimeSeriesResponseFormat</code> interface.</p>
  
  <pre><code>interface SeriesFormat {
      [entryTitle: string]: {
          ["1. open"]: string,
          ["2. high"]: string,
          ["3. low"]: string,
          ["4. close"]: string,
          ["5. volume"]: string
      }[]
  }
  
  interface IntradayMetadataFormat {
      ["1. Information"]: string,
      ["2. Symbol"]: string,
      ["3. Last Refreshed"]: string,
      ["4. Interval"]: string,
      ["5. Output Size"]: string,
      ["6. Time Zone"]: string
  }
  
  interface MetadataFormat {
      ["1. Information"]: string,
      ["2. Symbol"]: string,
      ["3. Last Refreshed"]: string,
      ["4. Output Size"]: string,
      ["5. Time Zone"]: string
  }
  
  export interface TimeSeriesResponseFormat {
      ["Meta Data"]: MetadataFormat | IntradayMetadataFormat,
      [seriesTitle: string]: SeriesFormat
  }
  </code></pre>
  
  <p>The error that I'm getting is:</p>
  
  <pre><code>Property '["Meta Data"]' of type 'IntradayMetadataFormat | MetadataFormat' is not assignable to string index type 'SeriesFormat'.
  </code></pre>
  
  <p>Unless I'm mistaken, since ["Meta Data"] is a string being used as an index signature, Angular/Typescript is trying to cast it as a <code>SeriesFormat</code> interface, and that's why it's throwing the error. What I'm confused about is how to actually get this to work as intended. I'd appreciate any advice you guys have.</p>