title: How to use nested objects in TypeScript? Property does not exist on type 'object'
body: <p>I have a React/GraphQL small application working fine, and I'm trying to add TypeScript to it, as I'm new to TypeScript and trying to learn it. I have a GraphQL API endpoint that is returning products and information on those products. Using React, I'm storing products in a state and then rendering each product using JSX.</p>
  <p>I created a type <code>Product</code> with the information that I expect the API to return, but it's also returning nested objects, and everything I tried triggers a TypeScript error. This is a simplified example of what the API is returning:</p>
  <pre><code>{
      &quot;data&quot;: {
          &quot;products&quot;: [
              {
                  &quot;productName&quot;: &quot;Soda&quot;,
                  &quot;code&quot;: &quot;sod&quot;,
                  &quot;prices&quot;: {
                      &quot;nationalPrices&quot;: {
                          &quot;localPrices&quot;: [
                              {
                                  &quot;pricePerUnit&quot;: &quot;1.99&quot;
                              }
                          ],
                          &quot;regionalPrices&quot;: [
                              {
                                  &quot;pricePerUnit&quot;: &quot;2.49&quot;
                              }
                          ]
                      },
                      &quot;vendorPrices&quot;: {
                          &quot;localPrices&quot;: [
                              {
                                  &quot;pricePerUnit&quot;: &quot;1.49&quot;
                              }
                          ]
                      }
                  }
              },
              // more products... 
          ]
      }
  }
  </code></pre>
  <p>And this is the solution I currently have. <code>code</code>, <code>productName</code> and <code>prices</code> are working fine, but <code>nationalPrices</code> is triggering a TypeScript error <code>property nationalPrices does not exist on type 'object'</code>. What can I do to fix this error?</p>
  <pre><code>type nationalPricesObject = {
      localPrices: object[];
  }
  
  type Product = {
      code: string;
      productName: string;
      prices: object;
      nationalPrices: nationalPricesObject;
  }
  
  
  function ProductList() {
      const [products, setProducts] = useState &lt; Product[] &gt; ([]);
      const { loading, data, error } = useQuery(LOAD_PRODUCTS);
  
      useEffect(() =&gt; {
          if (data) {
              setProducts(data.products);
          }
      }, [data]);
  
      return (
          &lt;&gt;
              &lt;div&gt;
                  {products.map(p =&gt;
                  (
                      &lt;div&gt;
                          &lt;ProductCard
                              productName={p.displayName}
                              code={p.code}
                              // simplified code below for sake of clearity 
                              pricePerUnit={p.prices.nationalPrices.localPrices[0]['pricePerUnit']}
                          /&gt;
                      &lt;/div&gt;
                  ))}
              &lt;/div&gt;
          &lt;/&gt;
      )
  }
  </code></pre>