title: Sort an array in React useEffect() with Typescript
body: <p>I'm setting an array of movie objects in useEffect and want them sorted alphabetically. If possible later I want to add the functionality of sorting them by different properties but for now I just want to get over this TypeScript hump. I have a separate types file where I export my movie interface:</p>
  <pre><code>export interface Movie {
      comments: string,
      imdb: string,
      mtc: string,
      rtc: string,
      smn: string,
      title: string
  }
  </code></pre>
  <p>Which I then import in my page</p>
  <pre><code>import { Movie } from '../types';
  </code></pre>
  <p>I call useEffect, request the list of movies from my MongoDB and then want to sort them.</p>
  <pre><code>const Database = () =&gt; {
  
    const [movies, setMovies] = React.useState&lt;Movie[]&gt;([]);
    const [sortType, setSortType] = React.useState('title');
    const history = useHistory();
  
    React.useEffect(() =&gt; {
      Requests.getMovies()
        .then(setMovies)
        .catch (err =&gt; console.log(err));
  
        const types: Movie = {
          title: 'title',
          rtc: 'rtc',
          imdb: 'imdb',
          smn: 'smn',
          mtc: 'mtc',
          comments: 'comments'
        };
  
  
        const sortArray = (sortProperty: string): sortProperty is keyof typeof types =&gt; {
  
        const sorted = [...movies].sort((a: Movie, b: Movie) =&gt; b[sortProperty] - a[sortProperty] );
  
  return sorted;
  
        }
  
        sortArray(sortType);
        setMovies(sortArray);
    }, [sortType])
  
  return (
  // Bunch of stuff on the page and then map out the movies like so..
  
        &lt;tbody&gt;
          {movies.map((movie, index) =&gt; (
            &lt;tr key={index} onClick={() =&gt; history.push(`/edit/${movie.title}`)}&gt;
              &lt;td&gt;{movie.title}&lt;/td&gt;
              &lt;td&gt;{movie.imdb}&lt;/td&gt;
              &lt;td&gt;{movie.rtc}&lt;/td&gt;
              &lt;td&gt;{movie.mtc}&lt;/td&gt;
              &lt;td&gt;{movie.smn}&lt;/td&gt;
              &lt;td&gt;{movie.comments}&lt;/td&gt;
            &lt;/tr&gt;
          ))}
        &lt;/tbody&gt;
  
  //Bunch of other stuff on the page..
  )
  }
  
  export default Database;
  </code></pre>
  <p>I get the list of movies to show up no problem but sorting them is hard. I found <a href="https://dev.to/ramonak/react-how-to-dynamically-sort-an-array-of-objects-using-the-dropdown-with-react-hooks-195p" rel="nofollow noreferrer">this</a> and <a href="https://stackoverflow.com/questions/56568423/typescript-no-index-signature-with-a-parameter-of-type-string-was-found-on-ty">this</a> and <a href="https://medium.com/javascript-in-plain-english/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc" rel="nofollow noreferrer">this</a> but TypeScript keeps giving me errors. On the <code>return sorted</code>...</p>
  <pre><code>Type 'Movie[]' is not assignable to type 'boolean'.
  </code></pre>
  <p>..and on the <code>b[sortProperty]</code> and <code>a[sortProperty]</code>.</p>
  <pre><code>Element implicitly has an 'any' type because expression of type 'string | number | symbol' can't be used to index type 'Movie'.
  
  No index signature with a parameter of type 'string' was found on type 'Movie'.
  </code></pre>
  <p>How do I get this to work? I thought sort returned the sorted array, but it returns a boolean? Why can't it sort by a property that is defined in the object and also in the interface?</p>