title: @typescript-eslint/no-unsafe-assignment: Unsafe assignment of an any value
body: <p>Consider the following code:</p>
  <pre class="lang-js prettyprint-override"><code>const defaultState = () =&gt; {
    return {
      profile: {
        id: '',
        displayName: '',
        givenName: '',
      },
      photo: '',
    }
  }
  
  const state = reactive(defaultState())
  
  export const setGraphProfile = async () =&gt; {
    const response = await getGraphProfile()
    state.profile = { ...defaultState().profile, ...response.data }
  }
  </code></pre>
  <p>Which generates the ESLint warning:</p>
  <blockquote>
  <p>@typescript-eslint/no-unsafe-assignment: Unsafe assignment of an any value.</p>
  </blockquote>
  <p>This means that the properties in <code>response.data</code> might not match the ones of the <code>profile</code>. The return of <code>getGraphProfile</code> is <code>Promise&lt;AxiosResponse&lt;any&gt;&gt;</code>. Of course it's easy to get rid of this ESLint warning by simply ignoring it:</p>
  <pre class="lang-js prettyprint-override"><code>// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  state.profile = { ...defaultState().profile, ...response.data }
  </code></pre>
  <h3>Questions:</h3>
  <ul>
  <li>How is it possible to shape the data in the Promise <code>getGraphProfile</code> so it does match?
  Because one can create a TS <code>interface</code> but that would simply create duplicate code with the object <code>defaultState().profile</code></li>
  <li>Why is TypeScript not having an issue with this code but the linter does? Do both not need to be alligned?</li>
  </ul>
  <h3>The implementations:</h3>
  <pre class="lang-js prettyprint-override"><code>const callGraph = (
    url: string,
    token: string,
    axiosConfig?: AxiosRequestConfig
  ) =&gt; {
    const params: AxiosRequestConfig = {
      method: 'GET',
      url: url,
      headers: { Authorization: `Bearer ${token}` },
    }
    return axios({ ...params, ...axiosConfig })
  }
  
  const getGraphDetails = async (
    uri: string,
    scopes: string[],
    axiosConfig?: AxiosRequestConfig
  ) =&gt; {
    try {
      const response = await getToken(scopes)
      if (response &amp;&amp; response.accessToken) {
        return callGraph(uri, response.accessToken, axiosConfig)
      } else {
        throw new Error('We could not get a token because of page redirect')
      }
    } catch (error) {
      throw new Error(`We could not get a token: ${error}`)
    }
  }
  
  export const getGraphProfile = async () =&gt; {
    try {
      return await getGraphDetails(
        config.resources.msGraphProfile.uri,
        config.resources.msGraphProfile.scopes
      )
    } catch (error) {
      throw new Error(`Failed retrieving the graph profile: ${error}`)
    }
  }
  
  export const getGraphPhoto = async () =&gt; {
    try {
      const response = await getGraphDetails(
        config.resources.msGraphPhoto.uri,
        config.resources.msGraphPhoto.scopes,
        { responseType: 'arraybuffer' }
      )
      if (!(response &amp;&amp; response.data)) {
        return ''
      }
      const imageBase64 = new Buffer(response.data, 'binary').toString('base64')
      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
      return `data:${response.headers['content-type']};base64, ${imageBase64}`
    } catch (error) {
      throw new Error(`Failed retrieving the graph photo: ${error}`)
    }
  }
  </code></pre>