title: Adding Typescript interfaces for deeply nested object returned by API
body: <p>I'm new to Typescript and trying to add types to a simple app. I'm stuck on an error with a deeply nested object.</p>
  <pre><code>export default function AnimalAdoptionCosts() {
    const [currencyQuote, setCurrencyQuote] = useState({});
    const [userInput, setUserInput] = useState(&quot;&quot;);
  
      const fetchAdoptionRates = async (userInput: string) =&gt; {
      const response = await fetch(
        `http://localhost:5000/v1/adoptionRate?animal=${userInput}`
      );
      console.log(response);
      const body = await response.json();
      if (response.status !== 200) throw Error(body.message);
      setCurrencyQuote(body);
    };
  
  
    const handleSubmit = async (userInput: string) =&gt; {
      await fetchExchangeRates();
      const costToAdopt = currencyQuote?.data.quote.USD.price;
    };
  
    return (
      &lt;&gt;
        &lt;form onSubmit={() =&gt; handleSubmit(userInput)}&gt;
          &lt;label htmlFor=&quot;animal&quot;&gt;Enter an animal type&lt;/label&gt;
          &lt;input
            value={userInput}
            id=&quot;userinput&quot;
            placeholder=&quot;ex: Pomeranian&quot;
            onChange={(event) =&gt; setUserInput(event.target.value)}
          /&gt;
          &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; /&gt;
         {costToAdopt}
        &lt;/form&gt;
      &lt;/&gt;
  </code></pre>
  <p>The Typescript error is: <code>[1] Property 'data' does not exist on type '{}'.  TS2339</code> for this line: <code>const costToAdopt = currencyQuote?.data.quote.USD.price;</code></p>
  <p>I get that this is because useState sets the default as an empty object, but it feels weird to do</p>
  <pre><code>interface CurrencyQuote {
   data: {
      quote:  {
         USD:   {
           price: number
         }
      }
  }
  </code></pre>
  <p>is this what I should be doing? I found this <a href="https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgJKQLbIN4FgBQyRywAJgFzIgCuGARtANwHHIDOwAXhJTfUwQC%20BUJFiIUAUQAecDAAcANijyFiIOT3ZgooAObM1RYJjaVVrVgG0A1hACelNjv0BdSuggYWxQYeH4BABucFDIAPZ0AFaUMnJKKAC8OD5EGhhaAESQzpkANKkkpuaFrJlwmSVGlqxklACMBdU1RBzcDQAMpb5NLciZdJUpzS11yABMvX3EbVoAzAAs3UQBrAGCQA" rel="nofollow noreferrer">example playground to work off of</a>, but then I would make 4 different interfaces, which seems overcomplicated.</p>
  <p>Also if you're a TS whiz, I'd love help figuring out how to type out the other important info in my function. Thank you!</p>