title: Define firebase data structure with TypeScript
body: <p>I'm writing a React application using Firebase as the data store and I'm working on integrating TypeScript. I'm curious how to define the data structure used in Firebase so TypeScript will allow me to pull in the data.</p>
  
  <p>The Firebase backend stores a list of acronyms with some information as defined in this interface</p>
  
  <pre><code>interface Acronym {
    id: string;
    short: string;
    full: string;
    description: string;
    category: string;
  }
  </code></pre>
  
  <p>I have a component that fetches the Firebase data in the <code>componentDidMount</code> lifecycle method and then pushes the response into a stored state which is an array of <code>Acronym</code> type.</p>
  
  <pre><code>componentDidMount() {
    db
      .collection('acronyms')
      .onSnapshot(querySnapshot =&gt; {
        const acronyms: Acronym[] = [];
  
        querySnapshot.forEach(doc =&gt; {
          acronyms.push(doc.data());
        });
  
        this.props.updateState({acronyms});
      });
  }
  </code></pre>
  
  <p>TypeScript throws an error on <code>acronyms.push(doc.data());</code> since the doc.data() does not have a defined return type of <code>Acronym</code>. How can I tell TypeScript that the <code>doc.data()</code> will return the <code>Acronym</code> type?</p>